css布局實(shí)例:網(wǎng)頁(yè)布局的方法_Web標(biāo)準(zhǔn)教程
許多網(wǎng)頁(yè)設(shè)計(jì)師都喜歡,將兩個(gè)或者多個(gè)容器等高的并排放置,并在里面展示每個(gè)容器的內(nèi)容,就象經(jīng)典表格布局中的單元格控制幾個(gè)欄目的位置,也喜歡容器的內(nèi)容居中或頂部對(duì)齊顯示。
但是你又不喜歡用table來(lái)實(shí)現(xiàn)他,那怎么辦呢?實(shí)現(xiàn)的方法很多,有根據(jù)視覺(jué)錯(cuò)覺(jué)實(shí)現(xiàn)的,有用JS控制使高度相等的,還有采用容器溢出部分隱藏和列的負(fù)底邊界和正的內(nèi)補(bǔ)丁相結(jié)合的方法來(lái)解決列高度相同的問(wèn)題。
其實(shí)有個(gè)簡(jiǎn)單的方法,使用display:table, display:table-row and display:table-cell 就可以實(shí)現(xiàn),而且高度小的容器會(huì)自適應(yīng)那些高度相對(duì)較高的,但是IE不支持這個(gè)屬性,我們先不用去責(zé)備IE,相信以后會(huì)有所改善的。這里我制作了一個(gè)模型。
先看看xhtml的結(jié)構(gòu):
<div class="equal">
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
很簡(jiǎn)單不用解釋就能看懂,但是這里給出一個(gè)table的結(jié)構(gòu),是不是很相似
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
下來(lái)是css:
equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {
}
解釋:1.dispaly:table;讓層.equal作為塊級(jí)元素的表格table顯示,也就是將他作為一個(gè)表格
2.border-collapse:separate;邊框獨(dú)立,就像表格沒(méi)有合并單元格以前
3.display:table-row;將.row作為表格行tr顯示
4.display:table-cell;將.row的下級(jí)div作為表格單元格td顯示
5.然后定義寬度
這里還使用了 border-spacing:10px;來(lái)區(qū)別幾個(gè)盒子,正如上面所陳述的,IE下不能正常顯示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1經(jīng)過(guò)測(cè)試均可以完美顯示.
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ):開(kāi)始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- Web標(biāo)準(zhǔn)建站常見(jiàn)錯(cuò)誤和校驗(yàn)方法
- Css:制作一個(gè)更漂亮一些的多選列表框
- 20個(gè)“標(biāo)準(zhǔn)的”配色方案
- CSS網(wǎng)頁(yè)布局中ID與Class的理解
- 使用DIV之后,什么時(shí)候使用TABLE
- 瀏覽器Internet Explorer簡(jiǎn)介(IE)
- 關(guān)于CSS控制DIV水平居中問(wèn)題
- 用DIV CSS編寫(xiě)出的網(wǎng)頁(yè)中的圓角矩形
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- 推薦: CSS樣式表設(shè)計(jì)經(jīng)驗(yàn)之10種技巧
- 相關(guān)鏈接:
- 教程說(shuō)明:
Web標(biāo)準(zhǔn)教程-css布局實(shí)例:網(wǎng)頁(yè)布局的方法。