欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS布局

程序员文章站 2024-01-01 21:10:34
...

一. 概述一下理念

bootstrap基于H5开发。提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广。

响应式图片:max-width:100% height:auto;

可以加上:.img-responsive类

排版方面的基本样式为:

body的margin为0,背景色为白色,行间距为20/14倍

使用Normalize.css库,使各个浏览器差别最小化

居中容器container有一个最大范围。(最大左右margin为auto,和设备有关)

二. 文字基础排版(全局设置)

1.标题(h标记和small标记)

header1small标记的副标题

header2small标记的副标题

header3small标记的副标题

header4small标记的副标题

header5small标记的副标题
header6small标记的副标题

CSS布局CSS布局

所有标题元素里的内容的字体颜色都是灰色(#999999),行间距都为1。

内的文本字体在h1、h2、h3内是当前元素所对应字体大小的65%;而在h4、h5、h6下则是75%。

A. 字体大小为14px,间距为20px。p元素的margin-bottom为行间距一半(10px)。

B. 突出显示

当你有一段文字,想高亮显示,又不想获得和h标记一样的权重时,可以class="lead"

email me

如图.lead和h1的对比效果:

CSS布局

2. 强调文本

CSS布局

3. 缩略语abbr和.initialism

两者都可以实现下划虚线悬停手型效果 需要搭配title属性使用。

4. 地址address

用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890
汤姆大叔
tomxu@outlook.com

效果如图

CSS布局

5. 引用blockquote

引用的一般格式是

爱情不是你想买想买就能买

出自爱情买卖

CSS布局

当然,small换成footer也是一样的效果。

默认是左对齐的,想要右对齐可以对blockquote使用.pull-right类。整体飘到了右边。

CSS布局

6. 列表

(1)ul-li无序列表

bootstrap下,普通列表的ul-li框架和默认基本是一样的。

A. ul-li列表的样式是由list-style决定的。在bootstrap框架使用.list-unstyle类。源码样式无非是padding-left:0;list-style:none。

注意:如果是列表嵌套列表,对祖父级的ul应用.list-unstyle类,孙代li是不会继承的。

B. 内联列表:正常的ul-li是竖着显示的。在很多场合,最典型的就是导航,需要把li打横排列。这时可以使用内联列表的.list-inline类

 
  • home
  • article
  • about

CSS布局

(2)有序列表ol-li

更换了字体,显示更加柔和

(3)dl-dt-dd定义列表

定义列表包括了描述信息,bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。


标题1
描述1
标题2
描述2
标题3
描述3

CSS布局

我想在横向展示一个商品列表,包括描述信息。如果给dl加上class="dl-horizontal"

CSS布局

7. 代码

包括code单行代码,kbd用户输入代码和pre多行代码块。

代码样式的用法示例如下:


CSS布局

(1)code

code内联代码可以在行间引用。原理是给code标记定义背景色,文字颜色

(2)kbd

kbd表示需要用户输入,可以配合input元素使用。

请输入ctrl+c来复制代码,然后使用ctrl+v来粘贴代码

CSS布局

(3)多行代码块pre

pre是预编译的意思。bootstrap实现基本方法是背景-边框,高度,圆角,竖向滚动。

粘贴进去会有空格。

类似还有可以格式化代码。用较为标准的字体和行间距显示

8.其它H5标记补充

(1),也可以使用.mark

this is mark text


CSS布局

(2)del标记和s标记

I am delated.

CSS布局

(3)ins标记和u标记

下划线,ins定义已经被插入文档中的文本。u标记语义和ins不同,如果文本不是超链接,就不要对其使用u标记

(4)对齐相关

——text-left

——text-center

——text-right

文本居左中右。

——text-justify:自己判断——齐行定义单词间的间隔对齐,跟避头尾法则类似。注意css3中也有相应的属性。

——text-nowrap:浏览器缩小时始终保持1行

(5)大小写相关:

text-lowercase小写

text-uppercase大写

text-capitalize首字母大小

【例3.1】文本排版练习

I am afraid William Shakespeare

you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.

This is why I am afraid, you say that u love me too.

你说烟雨微芒,兰亭远望;后来轻揽婆娑,深遮霓裳。你说春光烂漫,绿袖红香;后来内掩西楼,静立卿旁。你说软风轻拂,醉卧思量;后来紧掩门窗,漫帐成殇。

你说情丝柔肠,如何相忘;我却眼波微转,兀自成霜。

CSS布局

三. 表格相关css

表格实现是给table加上.table类

【例3.2】做一个5行5列的表格,记录信息


ID TITLE AUTHOR PUBDATE PRICE
1 西游记 吴承恩 10.99 2010-1-1
2 三国演义 罗贯中 20.99 2010-1-2
3 水浒传 施耐庵 30.99 2010-1-3
4 红楼梦 曹雪芹 40.99 2010-1-4

无任何class样式时显示:

CSS布局

1.table基础样式

(1) 给table标签加上class="table",效果就变为:

CSS布局

秒变高富帅了有木有?

(2)隔行变色.table-striped

table-striped:斑马线

使用CSS3的:nth-child实现。

(3)添加边框

使用.table-bordered可以为所有单元格添加1px的边框。

(4)悬停高亮

使用.table:hover可以让当前行悬停高亮

(5)紧凑型表格

table-condensed:压缩,稍微小一点——减少单元格的内边距。全部应用后是这样的。

CSS布局


代码清单



ID TITLE AUTHOR PUBDATE PRICE
1 西游记 吴承恩 10.99 2010-1-1
2 三国演义 罗贯中 20.99 2010-1-2
3 水浒传 施耐庵 30.99 2010-1-3
4 红楼梦 曹雪芹 40.99 2010-1-4

2.行级元素tr的样式

(1).active

表示当前激活的信息。跟鼠标悬停.table-hover显示的样式一样(较深的灰色)

(2).success


2
                            三国演义
                            罗贯中
                            20.99
                            2010-1-2
                        

CSS布局

(3).info

如果给table添加info的class

CSS布局

(4).warning

warning显示为黄色

CSS布局

(5).danger

CSS布局

小结:如果table应用了table-hover当鼠标悬停时相应的颜色也会加深一点,如果应用了table-striped,在高亮行使用tr样式,原来的浅灰色会被覆盖。

3.响应式的表格

表格过宽时,一味地自适应是不现实的。

把table标签用一个容器包装,容器class命名为.table-responsive
加了之后在大屏幕显示有了1px solid black的边框。在屏幕小于768时消失,在768px时出现滚动条.(注在四大名著表格中是直到330px才出现滚动条。)

【例3.3】一个超简单布局练习——第一个bootstrap网页

如图实现布局。

CSS布局


    

Bootstrap Css Type

Book List

from BookStore
Id Title Author Proce PubDate
1 红楼梦 曹雪芹 30 2014
2 西游记 吴承恩 25 2013
3 水浒传 施耐庵 24 2012
4 三国演义 罗贯中 35 2015

Figure

html
hyper text markup language
javascript
ecmaScript dom bom
bootstrap
basic css componment jsplugin

From Djtao

Form Sublime

©DJTAO

【例3.4】进阶:购物单的模拟实现

CSS布局

任务描述:网站常见的购物车经常有删除操作。大于30元的货物以警告红显示,否则显示成功绿。网站根目录下一个json文件夹,里面的books.json文件包含下列信息:

[
    {
        "Id": 1,
        "Title": "红楼梦",
        "Price": 10.0
    }, {
        "Id": 2,
        "Title": "西游记",
        "Price": 20.0
    }, {
        "Id": 3,
        "Title": "三国演义",
        "Price": 30.0
    }, {
        "Id": 4,
        "Title": "水浒传",
        "Price": 40.0
    }
]

从json读取数据,返回到表格中。制作一个如图所示的模拟删除效果。

先补充一点知识

Query中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据,它使用的是GET HTTP请求。使用方法如下:

$.getJSON( url ,[ data ] ,[ success(data, textStatus, jqXHR) ] )

url是必选参数,表示json数据的地址;
data是可选参数,用于请求数据时发送数据参数;
success是可选参数,这是一个回调函数,用于处理请求到的数据。

获取json数据举例:

$.getJSON('test.json', function(data){
   for (var i = 0; i ' + data.rows[i].realName + '');
   }
});


(1)首先,需要获取json数据。

$.getJSON("json/books.json",null,function (data){
    ...
})

在获取json成功时执行回调函数。

(2)在html文档的body中创建一个div表格区。


(3)思考下一个预想中的表格是怎样的。



      ...
      
      ...
      

根据这一思想创建表头。把它加进html文档中。

var $tbl=$('
')//创建表格 .addClass('table table-hover table-striped');//创建表格基本样式 var $theadTr=$('').addClass('success') //定义父元素 .append($('加到父元素中 .append($('添加到父元素 .append($('添加到父元素 var $thead=$(''); $thead.append($theadTr); $tbl.append($thead);

(4)接下来要把json返回的data数据添加到tbody。

注意:按理来说,一个表格的tbody是必须创建的。如果在浏览器中查看livescript,你会发现除了thead,tfoot之外的表格主体全都包了一层tbody。但是这里就不创建了。心里清楚就好。

本例中books.json数据引入后,表述形式为data[0].Title=‘西游记’

一共有四组元素,需要遍历,用的是$.each(index,Obj)方法。需要说明的是$.each()是数组遍历的方法,两个参数不可省略,index表述索引值,Obj才是每组对象的主体。引用形式为:Obj[index].属性

$(data).each(function (index,book){}

(5)在each的函数内书写创建表格主体的代码

var $tr=$('
')//创建一行 .append($("'); var $btn=$("

(7)点击事件

点击事件处理两个问题

a. 弹出当行id信息;b.当列消失。

$btn.click(function(){//配置按钮点击事件
                var id=$(this).attr("data-id");//获取按钮绑定的Id
 
                alert('您删除的书库编号为:'+id); //弹出id
 
                $(this).parent().parent().fadeOut(600);}//隐藏当前行

(8)点击函数结束后,添加表格主体到tbl中

$td.append($btn).appendTo($tr);
            $tbl.append($tr);

最后在回调函数最下面,把整个表格加到网页中表格区

$tbl.appendTo($('#divBookList'));

基本要求就算做完了。

【改进】有明显的问题需要改进,就是数字编号。删除之后没有重排。为此需要重新整理点击事件

思路:需要一点原生js的操作。

(1)用两个计数器,count1读取,count2写入

(2)通过count2来获取当前页面可见的行数,作为购物车的物品数。但是fadeout执行需要时间,如果马上判断,就会误把正在消失的那行计入count2

(3)解决思路是,让计数器程序等到删除行消失之后延迟一点点时间再执行。比如说删除行fadOut(600)消失时间是600ms,我就通过Timout延迟620ms执行。

var oTab=document.getElementsByTagName('table')[0];
                var aRows=oTab.tBodies[0].rows;
                 
                var count1=$(this).parent().siblings().eq(0).html();
                // 把当前书籍序号加到count2上面
                // this.parentNode.parentNode.firstChild.innerHTML;
 
                alert('您删除的是购物车内第'+count1+'本书。书库编号为:'+id); //弹出id
                // $.post("url?id="+id,null,function(){
                //     //删除成功后处理的回调函数
                //      });)
                $(this).parent().parent().fadeOut(600);//隐藏当前行
                setTimeout(function(){
                     var count2=0;
                for(i=0;i

其它的改进:给表头第四列加一个内容名为“操作”

改进后的效果:

CSS布局

代码清单:

$(function(){
    //创建json,不返回任何操作
    $.getJSON("json/books.json",null,function (data){
        //读取成功时的成功时的回调函数
        var $tbl=$('
').html('Id').addClass('danger')) //创建一个 Id').html('Title').addClass('warning')) //创建一个 Title').html('Price').addClass('info')); //创建一个创建一个 Price
").html(book.Id)) //添加编号列 .append($("").html(book.Title)); //添加标题列

通过这三行代码,除了price外所有的json元素都添加到表格中了。

价格是需要判断后才能给添加样式。超过30块的用红色背景,否则用绿色。

if(parseInt(book.Price)>=30){
                $tr.append($("
").html(book.Price).addClass("danger")); }else{ $tr.append($("").html(book.Price).addClass("success")); }//添加价格列

(6)接下来处理按钮

新创建的一列按钮需要加以下内容:

1.红色的button按钮,内容为remove;

2.为按钮绑定id

3.字体图标(class=glyphicon glyphicon-remove)

var $td=$('
')//创建表格 .addClass('table table-hover table-striped');//创建表格基本样式 var $theadTr=$('').addClass('success') //定义父元素 .append($('加到父元素中 .append($('添加到父元素 .append($('添加到父元素 .append($(''); $thead.append($theadTr); $tbl.append($thead); $(data).each(function (index,book){ var $tr=$('')//创建一行 .append($("'); var $btn=$("

专题推荐

作者信息
CSS布局

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,累计授课长达上万课时, 培养了近百名IT名师, 培训数万名学员成功走向IT岗位,近年来致力于推广Web开发技术。

最近文章
图文详解.Net语言Smobiler开发之如何仿微信朋友圈的消息样式2041
ASP.NET代码轻松实现微信抢红包2049
C#开发微信多客服功能及开发集成实例1762
推荐视频教程
  • CSS布局javascript初级视频教程
  • CSS布局jquery 基础视频教程
  • 视频教程分类
    ').html('Id').addClass('danger')) //创建一个 Id').html('Title').addClass('warning')) //创建一个 Title').html('Price').addClass('info')) //创建一个创建一个 Price').html('Operate').addClass('active')); var $thead=$('
    ").html(book.Id)) //添加编号列 .append($(" ").html(book.Title)); //添加标题列 if(parseInt(book.Price)>=30){ $tr.append($(" ").html(book.Price).addClass("danger")); }else{ $tr.append($(" ").html(book.Price).addClass("success")); }//添加价格列 /*新创建的一列需要加以下内容: 1.红色的button按钮,内容为remove; 2.字体图标(class=glyphicon glyphicon-remove) 3.点击事件:(1)弹出删除信息;(2)当列消失。 */ var $td=$('
    相关标签: CSS布局

    上一篇:

    下一篇: