跟大家講解下有關 CSS布局，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說 CSS布局，小編也收集到了有關 CSS布局的相關資料，希望大家看到了會喜歡。
一. 概述一下理念
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標記的副標題
所有標題元素里的內容的字體顏色都是灰色（#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的對比效果：
2. 強調文本
3. 縮略語abbr和.initialism
兩者都可以實現下劃虛線懸停手型效果 需要搭配title屬性使用。
4. 地址address
用來包裹和聯系方式有關的信息。樣式差別是間距和底部樣式稍微有點不同。
Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P:(123) 456-7890 湯姆大叔 tomxu@outlook.com效果如圖
5. 引用blockquote
引用的一般格式是
愛情不是你想買想買就能買
出自愛情買賣
當然，small換成footer也是一樣的效果。
默認是左對齊的，想要右對齊可以對blockquote使用.pull-right類。整體飄到了右邊。
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
（2）有序列表ol-li
更換了字體，顯示更加柔和
（3）dl-dt-dd定義列表
定義列表包括了描述信息，bootstrap下的dl-dt-dd定義列表通常也是縱向排列的。
標題1 描述1 標題2 描述2 標題3 描述3
我想在橫向展示一個商品列表，包括描述信息。如果給dl加上class="dl-horizontal"
7. 代碼
包括code單行代碼，kbd用戶輸入代碼和pre多行代碼塊。
代碼樣式的用法示例如下：
（1）code
code內聯代碼可以在行間引用。原理是給code標記定義背景色，文字顏色
（2）kbd
kbd表示需要用戶輸入，可以配合input元素使用。
請輸入ctrl+c來復制代碼，然后使用ctrl+v來粘貼代碼
（3）多行代碼塊pre
pre是預編譯的意思。bootstrap實現基本方法是背景-邊框，高度，圓角，豎向滾動。
粘貼進去會有空格。
類似還有可以格式化代碼。用較為標準的字體和行間距顯示
8.其它H5標記補充
（1）,也可以使用.mark
this is mark text
（2）del標記和s標記
I am delated.
（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 Shakespeareyou 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
表格實現是給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樣式時顯示：
1.table基礎樣式
（1） 給table標簽加上class="table"，效果就變為：
秒變高富帥了有木有？
（2）隔行變色.table-striped
table-striped：斑馬線
使用CSS3的:nth-child實現。
（3）添加邊框
使用.table-bordered可以為所有單元格添加1px的邊框。
（4）懸停高亮
使用.table:hover可以讓當前行懸停高亮
（5）緊湊型表格
table-condensed:壓縮，稍微小一點——減少單元格的內邊距。全部應用后是這樣的。
代碼清單
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-42.行級元素tr的樣式
（1）.active
表示當前激活的信息。跟鼠標懸停.table-hover顯示的樣式一樣（較深的灰色）
（2）.success
2 三國演義 羅貫中 20.99 2010-1-2
（3）.info
如果給table添加info的class
（4）.warning
warning顯示為黃色
（5）.danger
小結：如果table應用了table-hover當鼠標懸停時相應的顏色也會加深一點，如果應用了table-striped，在高亮行使用tr樣式，原來的淺灰色會被覆蓋。
3.響應式的表格
表格過寬時，一味地自適應是不現實的。
把table標簽用一個容器包裝，容器class命名為.table-responsive加了之后在大屏幕顯示有了1px solid black的邊框。在屏幕小于768時消失，在768px時出現滾動條.（注在四大名著表格中是直到330px才出現滾動條。）
【例3.3】一個超簡單布局練習——第一個bootstrap網頁
如圖實現布局。
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】進階：購物單的模擬實現
任務描述：網站常見的購物車經常有刪除操作。大于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.length; i++) { $('#test').append('' + 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($('').html('Id').addClass('danger')) //創建一個Id加到父元素中 .append($('').html('Title').addClass('warning')) //創建一個Title添加到父元素 .append($('').html('Price').addClass('info')); //創建一個創建一個Price添加到父元素 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($("").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；remove
2.為按鈕綁定id
3.字體圖標（class=glyphicon glyphicon-remove）
var $td=$(''); var $btn=$("").attr('data-id',book.Id).addClass('btn btn-danger'); //定義按鈕btn的樣式。 var $span1=$('').addClass("glyphicon glyphicon-remove"); $btn.append($span1);//添加按鈕的圖標字體。 var $span2=$($('remove')); $btn.append($span2);//添加按鈕的文字內容（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其它的改進：給表頭第四列加一個內容名為“操作”
改進后的效果：
代碼清單：
$(function(){ //創建json,不返回任何操作 $.getJSON("json/books.json",null,function (data){ //讀取成功時的成功時的回調函數 var $tbl=$('')//創建表格 .addClass('table table-hover table-striped');//創建表格基本樣式 var $theadTr=$('').addClass('success') //定義父元素 .append($('').html('Id').addClass('danger')) //創建一個Id加到父元素中 .append($('').html('Title').addClass('warning')) //創建一個Title添加到父元素 .append($('').html('Price').addClass('info')) //創建一個創建一個Price添加到父元素 .append($('').html('Operate').addClass('active')); var $thead=$(''); $thead.append($theadTr); $tbl.append($thead); $(data).each(function (index,book){ var $tr=$('')//創建一行 .append($("").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")); }//添加價格列 var $td=$(''); var $btn=$("").attr('data-id',book.Id).addClass('btn btn-danger'); //定義按鈕的樣式。 var $span1=$('').addClass("glyphicon glyphicon-remove"); $btn.append($span1);//添加按鈕的圖標字體。 var $span2=$($('remove')); $btn.append($span2);//添加按鈕的文字內容 $btn.click(function(){//配置按鈕點擊事件 var id=$(this).attr("data-id");//獲取按鈕綁定的Id 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四. 表單
1.基礎表單
基礎表單和以前差不多，默認使用全局設置。多了一個form-group類。form-gronp提供了1個15px的margin-bottom。看起來更有層次感。