学习网页编程（一）

 

    给定一个网页，首先要分析网页的布局，一般情况下一个网页可以概括的分为四部分:

    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>

 

最后实现的效果图如下