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

    1. header(标题栏)，

    2.  nav（导航栏），

    3. content（内容），

    4. footer（页脚）

给定一个网页的结构图如下:

  以上结构用html实现如下：

     
      header
     
 
     
      nav
     
 
     
      content
     
 
     
      footer
     

 

具体的样式用CSS实现，这样会使得html代码简洁清晰。

CSS实现代码

 

最后实现的效果图如下