中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

示例代碼：浮動的虛假列

另外一個應(yīng)用是創(chuàng)建一個不需要圖片或者額外嵌套容器的等高列（小志注：這里展示的是三列等高的效果）。

這個HTML結(jié)構(gòu)非常簡單。我曾經(jīng)依賴于CSS2.1選擇器使用特定類名在每一個子元素的div標(biāo)簽上，但I(xiàn)E6不支持。假如不需要IE6的支持的話，并不需要指定類名。
[Copy to clipboard]View Code XML1
<div id="faux">
 <div class="main">[content]</div>
 <div class="supp1">[content]</div>
 <div class="supp2">[content]</div>
</div>

對這個擁有百分比的容器再次設(shè)置相對定位以及正值的z-index。應(yīng)用overflow:hidden;主要是為了包含其子元素浮動后的容器（小志注：也就是清除浮動的一種方式），以及隱藏溢出的偽元素。背景顏色將作為其中一列的背景色。
Copy to clipboard]View Code CSS1
 #faux {
 position:relative;
 z-index:1;
 width:80%;
 margin:0 auto;
 overflow:hidden;
 background:#ffaf00;
}

通過定義子元素的div標(biāo)簽為相對定位之后，還可以控制單獨(dú)列的位置。
Copy to clipboard]View Code CSS1
 #faux div {
 position:relative;
 float:left;
 width:30%;
}
 
#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}

另外百分百高度的兩列被建立于定位的位置和定位屬性的偽元素，同時設(shè)置了背景色。這些背景可以用（重復(fù)的）圖片代替，如果有需要的話。
Copy to clipboard]View Code CSS1
 #faux:before,
#faux:after {
 content:"";
 position:absolute;
 z-index:-1;
 top:0;
 left:33.333%;
 width:100%;
 height:100%;
 background:#f9b6ff;
}
 
#faux:after {
 left:66.667%;
 background:#79daff;
}

出處：小志博客
責(zé)任編輯：bluehearts

上一頁 css2.1實現(xiàn)多重背景和邊框效果 [2] 下一頁 css2.1實現(xiàn)多重背景和邊框效果 [4]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。