學習網頁編程（一）

 

    給定一個網頁，首先要分析網頁的布局，一般情況下一個網頁可以概括的分為四部分:

    1. header(標題列)，

    2.  nav（導覽列），

    3. content（內容），

    4. footer（頁尾）

給定一個網頁的結構圖如下:

  以上結構用html實現如下：

<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>

 

具體的樣式用CSS實現，這樣會使得html代碼簡潔清晰。

CSS實現代碼

<style type="text/css">
    html, body
    {
        height: 100%;
        margin: 0;
    }

    #header
    {
        width: 96%;
        height: 40px;
        background: #efdfed;
        font-weight: bold;
        font-size: 16px;
        padding: 15px 0 0 50px;
        margin: 0px 2px;
        color: Red;
    }

    #nav
    {
        width: 96%;
        height: 30px;
        background: #efdfed;
        font-weight: bold;
        font-size: 16px;
        padding: 12px 0 0 50px;
        margin: 5px 2px;
        color: Red;
    }

    #content
    {
        width: 96%;
        height: 42%;
        background: #efdfed;
        font-size: 16px;
        font-weight: bold;
        padding: 17% 0 0 50px;
        margin: 5px 2px;
        color: Red;
    }

    #footer
    {
        width: 96%;
        height: 30px;
        background: #efdfed;
        font-weight: bold;
        font-size: 16px;
        padding: 15px 0 0 50px;
        margin: 5px 2px;
        color: Red;
    }
</style>

 

最後實現的如下