CSS布局實例:margin優(yōu)化的一種思路_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
margin是我們在進行CSS布局中非經(jīng)常用的屬性之一,但假如運用不得當(dāng),往往會產(chǎn)生過多的垃圾代碼,讓我們的編碼體積不斷增加。今天我們介紹一種編碼優(yōu)化的小實例,通過此例希望大家能意識到代碼優(yōu)化的途徑是多種多樣的,也算是一個拋磚引玉的引子吧。
看XHTML代碼:
看下面的CSS代碼:(未優(yōu)化)
看下面的經(jīng)過優(yōu)化的CSS代碼:
我們來分析一下優(yōu)化的思路:首先#main{margin:5px 0px 5px 0px;}是沒有必要的,他無非定義的就是整個頁面的上、下外邊距(在一定場合下卻需要這樣書寫)。我們同樣可以通過定義#body1的上邊距和#body2的下邊距來設(shè)置,所以才有了#body1{margin-top:17px ;}和#body2{margin:20px 0px ;}(這里定義的是#body2的上下邊距為20px,左右邊距為0px,也是縮寫的一種方式。)同理,于是我們可以省略了#body1的下邊距,在#content層在定義上邊距,另外大家還需要先弄清楚層的嵌套關(guān)系,否則輕易讓你思路非常不清楚。
看XHTML代碼:
示例代碼 [m.dounai2.com]
<div id="main">
<div id="body1">
<div id="content1">
</div>
</div>
<div id="body2">
</div>
<div>
<div id="body1">
<div id="content1">
</div>
</div>
<div id="body2">
</div>
<div>
看下面的CSS代碼:(未優(yōu)化)
示例代碼 [m.dounai2.com]
#main {
margin:5px 0px 5px 0px;
}
#body1 {
margin:12px 0px 10px 0px;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:10px 0px 15px 0px;
}
margin:5px 0px 5px 0px;
}
#body1 {
margin:12px 0px 10px 0px;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:10px 0px 15px 0px;
}
看下面的經(jīng)過優(yōu)化的CSS代碼:
示例代碼 [m.dounai2.com]
#main {}
#body1 {
margin-top:17px ;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:20px 0px ;
}
#body1 {
margin-top:17px ;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:20px 0px ;
}
我們來分析一下優(yōu)化的思路:首先#main{margin:5px 0px 5px 0px;}是沒有必要的,他無非定義的就是整個頁面的上、下外邊距(在一定場合下卻需要這樣書寫)。我們同樣可以通過定義#body1的上邊距和#body2的下邊距來設(shè)置,所以才有了#body1{margin-top:17px ;}和#body2{margin:20px 0px ;}(這里定義的是#body2的上下邊距為20px,左右邊距為0px,也是縮寫的一種方式。)同理,于是我們可以省略了#body1的下邊距,在#content層在定義上邊距,另外大家還需要先弄清楚層的嵌套關(guān)系,否則輕易讓你思路非常不清楚。
相關(guān)DIV+CSS實例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例:很實用的圖文混排CSS列表-富有語義
- DivCSS實例:CSS菜單Flash效果用圖片模擬實現(xiàn)
- DivCSS布局實例用dldtdd來制作列表
DIV+CSS實例Rss訂閱Div+Css教程搜索
DIV+CSS實例推薦
- css圓角之有序列表dl、無序列表ul如何實現(xiàn)?
- 用css網(wǎng)站布局之十步實錄!(九)
- DivCSS實例:符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用
- CSS基本條狀圖表的實現(xiàn)方法是什么?
- 用css網(wǎng)站布局之十步實錄!(四)
- Web標(biāo)準(zhǔn)實戰(zhàn)CSS網(wǎng)頁布局Google首頁
- CSS布局教程:用DIV CSS實現(xiàn)國內(nèi)經(jīng)典式三行兩列布局
- DIVCSS布局實例:DIV CSS新聞列表制作
- HowCSSLayoutWorks-如何進行CSS布局
- CSS布局實例:CSS標(biāo)簽切換代碼實例教程
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實例-CSS布局實例:margin優(yōu)化的一種思路。