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