HTML佈局

大多的網頁佈局要配合css來完成;css用於對元素進行定位或為頁面創建背景以及色彩豐富的外觀。由於這裡我們涉及HTML的基礎知識，我們就用現有的知識來進行佈局。

網頁版面可以透過< table>元素，或是< div>元素實現。先來個簡單的< table>佈局網頁我們在上一章中學習了表格，那麼下面我們就來將一個網頁的一個板塊用沒有邊框的表格來佈局（添加背景顏色和佈置文本內容）

<html>
<body bgcolor="gray">
<table width="1000">
    <tr>
        <td colspan="2" style="background-color: royalblue">
            <h1 align="center">php中文网</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>

QQ截图20161011093509.png

下面我們再使用< div>元素進行佈局（盡量達到上面的頁面效果）：一般的div元素結構就如下圖（思路也是用table的思路）：

QQ截图20161011093554.png

這裡是具體實作內容：

<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中文网</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塊對應就很好理解，這裡的邏輯表達的很清晰，就不再贅述。直接來看看效果截圖吧

QQ截图20161011093718.png

繼續學習

新建檔案

<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中文网</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>

重置程式碼

自動運行

提交

預覽 Clear