HTML佈局
大多的網(wǎng)頁佈局要配合css來完成;css用於對(duì)元素進(jìn)行定位或?yàn)轫撁鎰?chuàng)建背景以及色彩豐富的外觀。由於這裡我們涉及HTML的基礎(chǔ)知識(shí)，我們就用現(xiàn)有的知識(shí)來進(jìn)行佈局。
網(wǎng)頁版面可以透過< table>元素，或是< div>元素實(shí)現(xiàn)。 先來個(gè)簡(jiǎn)單的< table>佈局網(wǎng)頁我們?cè)谏弦徽轮袑W(xué)習(xí)了表格，那麼下面我們就來將一個(gè)網(wǎng)頁的一個(gè)板塊用沒有邊框的表格來佈局（添加背景顏色和佈置文本內(nèi)容）
<html> <body bgcolor="gray"> <table width="1000"> <tr> <td colspan="2" style="background-color: royalblue"> <h1 align="center">php中文網(wǎng)</h1> </td> </tr> <tr valign="top"> <td style="background-color: darkorange;width:300px"> <dl> <dt>list of book</dt> <dd> <ol> <li>hadoop</li> <li>linux</li> <li>c</li> </ol> </dd> </dl> </td> <td style="background-color: forestgreen;height:500px;width:700px;"> <h1 style="font-size: 20px;text-align: center">the summary of the book</h1> i will lead you to travel in the season of linux </td> </tr> <tr> <td colspan="2" style="background-color: powderblue;text-align:center;height: 100px"> good good study day day up</td> </tr> </table> </body> </html>
下面我們?cè)偈褂?lt; div>元素進(jìn)行佈局（盡量達(dá)到上面的頁面效果）： 一般的div元素結(jié)構(gòu)就如下圖（思路也是用table的思路） ：
這裡是具體實(shí)作內(nèi)容：
<html>
<head>
<style>
div#container{width:1000px}
div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>php中文網(wǎng)</h1>
</div>
<div id="sidebar">
<dl>
<dt>list of book</dt>
<dd>
<ol>
<li>hadoop</li>
<li>linux</li>
<li>c</li>
</ol>
</dd>
</dl>
</div>
<div id="mainbody">
<h1>the summary of the book</h1>
<p>i will lead you to travel in the season of linux</p>
</div>
<div id="footer">good good study day day up</div>
</div>
</body>
</html>#只要將上面的style裡的div定義和下面的div塊對(duì)應(yīng)就很好理解，這裡的邏輯表達(dá)的很清晰，就不再贅述。直接來看看效果截圖吧
