溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
各位網友大家好，如果你已經閱讀過我先前寫的關于CSS3彈性盒模型的實例演示，相信你對CSS3彈性盒模型屬性知識點應該已經有了一個非常深刻的映像。
從本篇文章開始，我將帶領大家，手把手地教大家如何來開發一個適合移動端瀏覽器的彈性盒模型的響應式頁面。同時實戰開發中的案例代碼可以作為你項目中的精簡框架了。
當你學習完成《CSS3實戰開發: 彈性盒模型之響應式WEB界面設計》這個系列教程之后，相信你對目前比較流行的前端輕量級框架 Bootstrap等會有一個深刻的認識。
Bootstrap(彈性流體布局式的前端輕量級框架)沒聽過？那你就out了，國內現在已經有不少互聯網網站使用它來布局網頁了。
Q：如果你認為我已經能用CSS2進行布局了，我才不稀罕你的響應式WEB界面設計的教程呢？
A：我們都知道，在CSS2.1當中，我們通過div+css進行葉面布局的時候，經常使用的 浮動(float) 和 絕對定位 來做。雖然用浮動，相對定位和絕對定位等也能完成頁面布局的設置，
但是它卻不夠靈活。同時也勢必會給頁面元素附加很多額外的樣式，這個從開發維護角度，從可擴展角度都是不方便的。 使用CSS3中新增的盒模型屬性可以迎刃而解所有的問題，
代碼之簡潔，功能之靈巧，擴展之方便都是不言而喻的。下面我將帶領大家，一步步的欣賞CSS3的精美。
下面我先來演示一下，我要帶領大家開發的頁面分別運行在大屏幕 和 小屏幕 下的效果，如下所示：
運行在大屏幕下時 | 運行在小屏幕下時 |
|  |
通過上面運行的實例效果圖，相信大家一定都非常驚喜。下面就讓我們開始今天的實戰開發之旅吧。
首先我先準備響應式WEB界面設計中要用到的html頁面，代碼如下(由于是文章不是視頻，不太方便將div里如何嵌套每一塊區域div一步步列出來，往大家諒解)：
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”styles.css”> <title>CSS3實戰開發: 彈性盒模型之響應式WEB界面設計 — 駕馭IT網 www.itdriver.cn</title> </head> <body> <div> <div> <div> <dl> <dt>推薦博文</dt> <dd> <ul> <li><a href=”http://www.itdriver.cn#01″>DIV+CSS 網站重構</a></li> <li><a href=”http://www.itdriver.cn#02″>精通CSS3</a></li> <li><a href=”http://www.itdriver.cn#03″>CSS3媒體查詢 演示</a></li> <li><a href=”http://www.itdriver.cn#04″>CSS3中的彈性流體盒模型技術詳解</a></li> <li><a href=”http://www.itdriver.cn#05″>CSS3新增屬性text-overflow 實例開發詳解</a></li> <li><a href=”http://www.itdriver.cn#06″>如何利用CSS3給文本添加樣式 （實例：燃燒的字體）</a></li> <li><a href=”http://www.itdriver.cn#07″>CSS3所支持的屬性選擇器實例演示</a></li> <li><a href=”http://www.itdriver.cn#08″>:link , :visited , :focus , :hover , :active</a></li> <li><a href=”http://www.itdriver.cn#09″>CSS選擇器優先級實例演示</a></li> <li><a href=”http://www.itdriver.cn#10″>CSS3 新特性一覽</a></li> <li><a href=”http://www.itdriver.cn#11″>使用CSS3制作照片墻實戰教程(1)</a></li> <li><a href=”http://www.itdriver.cn#12″>使用CSS3制作照片墻實戰教程(2)</a></li> <li><a href=”http://www.itdriver.cn#13″>使用CSS3制作照片墻實戰教程(3)</a></li> <li><a href=”http://www.itdriver.cn#14″>使用CSS3制作照片墻實戰教程(4)</a></li> <li><a href=”http://www.itdriver.cn#15″>使用CSS3制作照片墻實戰教程(5)</a></li> </ul> </dd> </dl> </div> <div> <dl> <dt>精彩分類</dt> <dd> <ul> <li><a href=”http://www.itdriver.cn#36″>CSS3</a></li> <li><a href=”http://www.itdriver.cn#37″>DIV + CSS</a></li> <li><a href=”http://www.itdriver.cn#38″>HTML5</a></li> <li><a href=”http://www.itdriver.cn#39″>Android</a></li> </ul> </dd> </dl> <dl> <dt>書籍推薦</dt> <dd> <ul> <li><a href=”http://www.itdriver.cn#40″>CSS3輕松精通</a></li> <li><a href=”http://www.itdriver.cn#41″>深入實戰CSS3</a></li> <li><a href=”http://www.itdriver.cn#42″>CSS3實戰開發</a></li> </ul> </dd> </dl> </div> </div> </div> <div> <div> <div> <dl> <dt>項目實戰教程</dt> <dd> <ul> <li><a href=”http://www.itdriver.cn#16″>HTML5+CSS3實戰開發新浪微博系列(10)</a></li> <li><a href=”http://www.itdriver.cn#17″>HTML5+CSS3實戰開發新浪微博系列(9)</a></li> <li><a href=”http://www.itdriver.cn#18″>HTML5+CSS3實戰開發新浪微博系列(8)</a></li> <li><a href=”http://www.itdriver.cn#19″>HTML5+CSS3實戰開發新浪微博系列(7)</a></li> <li><a href=”http://www.itdriver.cn#20″>HTML5+CSS3實戰開發新浪微博系列(6)</a></li> <li><a href=”http://www.itdriver.cn#21″>HTML5+CSS3實戰開發新浪微博系列(5)</a></li> <li><a href=”http://www.itdriver.cn#22″>HTML5+CSS3實戰開發新浪微博系列(4)</a></li> <li><a href=”http://www.itdriver.cn#23″>HTML5+CSS3實戰開發新浪微博系列(3)</a></li> <li><a href=”http://www.itdriver.cn#24″>HTML5+CSS3實戰開發新浪微博系列(2)</a></li> <li><a href=”http://www.itdriver.cn#25″>HTML5+CSS3實戰開發新浪微博系列(1)</a></li> </ul> </dd> </dl> </div> <div> <dl> <dt>視頻教程</dt> <dd> <ul> <li><a href=”http://www.itdriver.cn#26″>一周精通DIV+CSS視頻教程系列(10)</a></li> <li><a href=”http://www.itdriver.cn#27″>一周精通DIV+CSS視頻教程系列(9)</a></li> <li><a href=”http://www.itdriver.cn#28″>一周精通DIV+CSS視頻教程系列(8)</a></li> <li><a href=”http://www.itdriver.cn#29″>一周精通DIV+CSS視頻教程系列(7)</a></li> <li><a href=”http://www.itdriver.cn#30″>一周精通DIV+CSS視頻教程系列(6)</a></li> <li><a href=”http://www.itdriver.cn#31″>一周精通DIV+CSS視頻教程系列(5)</a></li> <li><a href=”http://www.itdriver.cn#32″>一周精通DIV+CSS視頻教程系列(4)</a></li> <li><a href=”http://www.itdriver.cn#33″>一周精通DIV+CSS視頻教程系列(3)</a></li> <li><a href=”http://www.itdriver.cn#34″>一周精通DIV+CSS視頻教程系列(2)</a></li> <li><a href=”http://www.itdriver.cn#35″>一周精通DIV+CSS視頻教程系列(1)</a></li> </ul> </dd> </dl> </div> </div> </div> </body> </html> |
運行html頁面，顯示效果如下圖所示：
接著我們在樣式表文件中，清除所有元素的默認外邊距(margin)和內邊距(padding)，同時清除列表默認樣式以及給超鏈接(a)添加 link 和 hover 樣式:
*{margin:0;padding:0;}/*清除所有元素默認的外邊距和內邊距*/
ul{ list-style-type:none;}/*清除列表樣式*/
a{ font-size:0.8em; } /*設置所有鏈接的字體為父容器的0.8倍*/
a:link{text-decoration:none;color:#00477D;} /*超鏈接，未點擊時的樣式*/
a:hover{text-decoration:underline;color:#FE9980;} /*超鏈接，鼠標劃過時的樣式*/ |
再次運行頁面，當前的頁面效果如下所示：
我們從上面的顯示內容知道，太擁擠了，已經分不清每個區域了，我們先著手將每一塊都應用上樣式。
我們都從最開始的顯示效果知道，每一塊大概包含以下這些樣式：
1. title背景是天藍色的；
2. 邊框顏色和title背景色一致；
3. title文字顏色是白色的；
4. 每一塊內容都是圓角的(利用CSS3新增的border-radius屬性)；
5. 讓每一塊內容都有點距離;
6. 每一塊區域都有一個淡淡的陰影效果。
好，知道需要給每一塊添加這么多樣式，開始著手coding吧。
先給頁面中每一個 dl 結點添加屬性， 給 dt 結點添加 屬性，給 dd 結點添加 屬性：
<!– 其他代碼省略 –> <dl> <dt>精彩分類</dt> <dd> <ul> <li><a href=”http://www.itdriver.cn#36″>CSS3</a></li> <li><a href=”http://www.itdriver.cn#37″>DIV + CSS</a></li> <li><a href=”http://www.itdriver.cn#38″>HTML5</a></li> <li><a href=”http://www.itdriver.cn#39″>Android</a></li> </ul> </dd> </dl> |
接著在樣式表文件中，定義panel, phead 和 pbody：
.panel{/*給定義了此樣式的元素添加邊框，同時添加陰影和圓角效果*/ width:100%; border:1px solid #809FFE; -webkit-border-radius: 5px; /*CSS3中新增屬性，添加圓角效果*/ -moz-border-radius:5px; border-radius:5px; margin: 2em 0em; /*是使盒子間外間距*/ box-shadow:4px 4px 10px #C6C6C6; /*給元素添加陰影效果，CSS3新增屬性*/ }
.panel .phead{ background-color:#809FFE; /*設置panel頭的背景色*/ height:2em; /*同時設置 height 和 line-height 屬性，可使盒子內的內容垂直方向上居中顯示*/ line-height:2em; padding-left:0.5em; /*設置盒子內文字顯示的樣式*/ color:#FFFFFF; font-weight:bold; }
.panel .pbody > ul > li{ /*設置panel的內容間的外間距*/ margin:4px 4px; } |
在上面的代碼中，我們使用了CSS3新增屬性 border-radius(給元素添加圓角效果)，和 box-shadow(給元素添加陰影)，如果你對這兩個不清楚的，可以看我寫的CSS3新增屬性的教程，里面會有詳細示例講解。
現在我們來看一下此時的運行效果(頁面太大，只截取了部分)：
接下來，我們就要開始給頁面添加CSS3的彈性盒模型屬性了。
我在以前寫的教程中講過，如果要給元素添加CSS3的彈性盒模型屬性，必須要現將盒子元素（也就是外層的容器）設置為display:box，這個屬性的作用就是告訴瀏覽器我要使用CSS3的彈性盒模型布局頁面。
我們先來給想讓內容現在一行的塊級容器添加 屬性吧，代碼如下:
<div> <div class=”row”> .. <!– 代碼省略 –> </div> </div> |
接著我們分別設置 container樣式 和 row樣式：
.container{ margin:auto;width:90%;} /*設置顯示內容塊的占整個顯示區域的大小，同時使容器內元素居中顯示*/
.row{ /*給應用了此樣式的塊元素內的塊級元素應用彈性盒模型屬性*/ display:-webkit-box; display:-moz-box; display:box; } |
運行頁面，此時效果如下圖所示:
因為我們給box元素應用水平空間上的空間分配，所以默認是使用 box-pack:start屬性，我們想讓它水平空間上充滿真個頁面。
給box應用屬性 box-pack: justify(首尾元素吸附在水平方向上的兩端，中間元素分享剩余的空間)：
.row{ /*給應用了此樣式的塊元素內的元素應用彈性盒模型屬性*/ display:-webkit-box; display:-moz-box; display:box; -webkit-box-pack:justify; /*首尾元素吸附在水平方向上的兩端，中間元素分享剩余的空間*/ -moz-box-pack:justify; box-pack:justify; } |
此時運行頁面的效果如下圖所示：
從上面顯示的效果我們可以看出，當給某一元素應用了 display:box的時候，其內的塊級元素是包裹內容的。但是我們可能希望某些區域占用的空間大一點，某些占用的空間小一點，那CSS3中有沒有這樣的屬性，可以讓我們自由調節占用的空間呢？
如果你看過去前面講的《CSS3中的彈性流體盒模型技術詳解(一)》的文章，我相信你一定可以想的起來：CSS3中新增屬性 box-flex:value。
我們再來回顧一下這個屬性的含義：box-flex屬性規定了元素是否可以自動伸縮其尺寸，只要對應顯示方向上有剩余空間(除了margin之外的剩余空間)，它(們)就會來填充這些空間，所有設置了此屬性的元素，按比率分配剩余空間。
好了，既然知道有這么個屬性，而且也知道它的作用，那么我們就可以給那些需要調整大小的塊元素應用此屬性吧。
等等，這里我們是不是遺漏了什么，難道就這么著急應用樣式此樣式嗎？既然它能自動填充所在區域內的剩余空間，那我們是否可以定義一套自由分配樣式的樣式文件呢？
好主意，我們可以假設將頁面分成12個欄位，然后通過不同的欄位大小，來分配空間。
在樣式表中添加如下樣式，分配代表占用的空間（假設頁面有12個欄位）：
/*欄位間相隔1em的距離*/ .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{ margin:1em 1%;}
/*分別定義1-12欄位占用的空間 開始…*/ .col-1{ -webkit-box-flex:1.0;-moz-box-flex:1.0;box-flex:1.0;}
.col-2{ -webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0;}
.col-3{ -webkit-box-flex:3.0;-moz-box-flex:3.0;box-flex:3.0;}
.col-4{ -webkit-box-flex:4.0;-moz-box-flex:4.0;box-flex:4.0;}
.col-5{ -webkit-box-flex:5.0;-moz-box-flex:5.0;box-flex:5.0;}
.col-6{ -webkit-box-flex:6.0;-moz-box-flex:6.0;box-flex:6.0;}
.col-7{ -webkit-box-flex:7.0;-moz-box-flex:7.0;box-flex:7.0;}
.col-8{ -webkit-box-flex:8.0;-moz-box-flex:8.0;box-flex:8.0;}
.col-9{ -webkit-box-flex:9.0;-moz-box-flex:9.0;box-flex:9.0;}
.col-10{ -webkit-box-flex:10.0;-moz-box-flex:10.0;box-flex:10.0;}
.col-11{ -webkit-box-flex:11.0;-moz-box-flex:11.0;box-flex:11.0;}
.col-12{ -webkit-box-flex:12.0;-moz-box-flex:12.0;box-flex:12.0;}
/*分別定義1-12欄位占用的空間 結束…*/ |
樣式定義好了，根據樣式定義，現在我想讓 【推薦博文】占用8個欄位，【精彩分類】那一欄占用4個欄位，【項目實戰】那一欄占用6個欄位，【視頻教程】也占有6個 欄位，代碼如下：
<body> <div> <div> <div class=”col-8″> <dl> <dt>推薦博文</dt> <dd> … </dd> </dl> </div> <div class=”col-4″> <dl> <dt>精彩分類</dt> <dd> … </dd> </dl> <dl> <dt>書籍推薦</dt> <dd> … </dd> </dl> </div> </div> </div> <div> <div> <div class=”col-6″> <dl> <dt>項目實戰教程</dt> <dd> … </dd> </dl> </div> <div class=”col-6″> <dl> <dt>視頻教程</dt> <dd> … </dd> </dl> </div> </div> </div> </body> |
好了，我們來運行一下頁面：
看這個效果是不是太完美了，我們在最下面再添加一個panel，取名叫 【贊助商鏈接】，放在【項目實戰教程】與【視頻教程】中間，然后col依次為 4，4，4，頁面代碼如下：
<div> <div> <div class=”col-4″> <dl> <dt>項目實戰教程</dt> <dd> … </dd> </dl> </div> <div class=”col-4″> <dl> <dt>贊助商鏈接</dt> <dd> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </dd> </dl> </div> <div class=”col-4″> <dl> <dt>視頻教程</dt> <dd> … </dd> </dl> </div> </div> </div> |
此時再運行頁面，效果如下所示：
通過定義的col樣式，顯示分欄布局是不是非常方便呢？
好的，現在我們看看小屏幕窗口下的顯示效果：
看到小屏幕的效果后，心情真的太糟糕了，內容都擠在一塊了，我們希望的效果是像其他手機應用一樣，水平方向上應該只有一個欄位，且所有欄位變成垂直方向上按順序顯示。
但是為什么不能自動換行呢？我們回頭看看，是不是設置了哪個屬性。
在樣式表中找了一個遍，壓根沒設置什么屬性， 那CSS3中是不是有什么屬性可以改變顯示的方向呢。
如果你看過我 CSS3 的彈性盒模型教程，相信你對 box-orient屬性有映像。
box-orient屬性的作用：用來控制盒子內元素的顯示方向。
box-orient的語法： box-orient: horizontal | vertical | inline-axis | block-axis | inherit。
如果沒有顯式的設置box-orient屬性值，它默認使用水平方向(horizontal)顯示。
根據這些解釋，所以當在小屏幕下顯示時，應該設置 box-orient:vertical。然而另一個問題來了：我們怎么知道當前頁面是在大屏幕還是小屏幕上顯示的呢？
這里我要先告訴大家，CSS3給我們提供了 媒體查詢（Media Query），這里我先直接使用，后面我會寫一篇關于CSS3媒體查詢詳細使用的教程，如果有興趣可以去閱讀一下。
@media screen and (max-width:9999px) { /*如果瀏覽器窗口寬度小于設置的值，將直接應用此樣式*/ .row{ -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal; } }
@media screen and (max-width:960px) { /*如果瀏覽器窗口寬度小于設置的值，將直接應用此樣式*/ .row{ -webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical; } } |
運用了媒體查詢之后，我們限定，當瀏覽器窗口的寬度小于960px的時候，在垂直方向上顯示子元素。好了，運行一下修改后的頁面吧：
瀏覽器窗口寬度大于960px時 | 瀏覽器窗口寬度小于或等于960px時 |
|  |
已經達到我們想要的結果了。使用媒體查詢的時候得注意一下，值小的要放在下面，不然內容會被大的給覆蓋掉，大家可以調換 max-width:9999px 和 max-width:960px 這兩個樣式的順序。
現在又有一個需求，如果我希望【精彩分類】顯示在推薦博文上面怎么做呢？ 我們發現 CSS3有個新增的屬性 box-ordinal-group屬性，使用它可以輕易的定義在同一個容器中的元素顯示順序。
我們從頁面代碼中可以知道，【精彩分類】和【推薦博文】的直接父元素不是同一個，所以從box-ordinal-group的定義中可以知道，直接調換它兩的順序是不行的，但是我們可以調換它們父節點的位置。分別給他們父節點定義 .main-col和.sidebar-col樣式，以及給他們應用樣式如下：
@media screen and (max-width:960px) { /*如果瀏覽器窗口寬度小于設置的值，將直接應用此樣式*/
.side-col{ /*小屏幕時，sidebar顯示在前*/ -webkit-box-ordinal-group:1; } .main-col{ -webkit-box-ordinal-group:2; }
.row{ -webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical; } } |
再次運行頁面，查看效果，順序是不是已經調換了：
Q：有人可能會問，那如果我想讓【精彩分類】那一塊區域顯示在【推薦博文】的左側，怎么實現呢？
A：這個很簡單，只要通過 CSS3新增加屬性box-direction:reverse就可以輕松實現，這里我就不做演示了，大家可以自己動手實現一下。
Q：大蝦，請問我在手機上看，怎么有些標題自動換行了，很影響顯示效果，這個怎么處理啊？
A：如果你不想讓自己的標題換行，那么你可以在你的標題包含元素上應用CSS樣式屬性text-overflow:ellipsis 。這兩個屬性要配合 white-space:no-wrap和overflow:hidden 來使用，具體大家可以參考我的另一篇博文《CSS3新增屬性text-overflow(省略符)實戰開發詳解》。
相信你通過本次《CSS3響應式WEB界面的設計》實戰的學習，你一定對類似bootstrp等前端布局框架有一個更深刻的了解了。
歡迎大家加入互聯網技術交流群：62329335
個人申明：所分享博文，絕對原創，并力爭每一個知識點都通過實戰演示來進行驗證。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
