|
進(jìn)入了WEB2.0時(shí)代后,網(wǎng)頁設(shè)計(jì)師們,為了讓頁面外觀與結(jié)構(gòu)分離,就要用CSS樣式來規(guī)范布局.用CSS樣式規(guī)范布局使代碼更簡潔,更結(jié)構(gòu)化,便站點(diǎn)訪問和維護(hù)更加容易.在這里我們來看一下,怎么用CSS來布局的.
現(xiàn)今網(wǎng)絡(luò)上比較流行的頁面布局是內(nèi)容區(qū)水平三列的樣式,下面的html代碼簡單的表現(xiàn)了這種樣式:
<html>
<head> <title>CSS樣式頁</title> <style type="text/css"> <!-- body{ text-align:center; margin: 0px; font-family: "宋體"; font-size:12px; } #top,{ margin:1px; border: 1px solid #000000; width:980px; } #content{ width:980px; margin:1px; } #left{ background: #F1F1F1; margin:5px 0px; width: 222px; float: left; } #mid{ background: #DFF7FF; margin: 5px; padding: 0px; float: left; width: 548px; } #right{ background: #FFEBCC; margin-top:5px; width: 200px; float: right; } #bottom{ background: #6891D2; margin:5px 1px;; width:980px; border: 1px solid #000000; } h2.title{ padding:2px; background: Red; font-family: "宋體"; font-size:16px; color:#ffffff; } --> </style> </head> <body> <div id="top">這里是頁首</div> <div id="content"> <!--這里是內(nèi)容區(qū)--> <div id="left"> <!--這里是內(nèi)容區(qū)左側(cè)--> <h2 class="title">CSS</h2> </div> <div id="mid"><!--這里是內(nèi)容區(qū)中間部份--></div> <div id="right"><!---這里是內(nèi)容區(qū)右側(cè)--></div> </div> <div id="bottom">這里是頁尾</div> </body> </html> |
|
|
