博客静态网页

博客静态网页的设计：

第一步需要网页整体布局分析设计；

根据需要把页面分成几个板块，上面是一张头部图片，紧接着是导航菜单等等，根据需要设计。

HTML代码：

<div id="box">   
    <div id="banner"></div>  <!-- 头部：横幅的图片区域 banner  -->
    <div id="menu“></div> <!-- 头部：导航栏区域 menu -->
    <div id="main"> <!-- 中间主要的部分 main -->
          <div id="left"> </div>
          <div id="right"></div>
    </div>  
    <div id="footer"></div> <!-- 最下面尾部的区域：footer -->
</div>
CSS代码：

@charset "utf-8";
#box{
    width:1024px;/* 设置id是box的div，高度为1014px */
    height:1300px;
    margin:0 auto;/*居中*/
    background-color:#C00;
}

第二步导航与Banner的实现；

HTML代码：

<img src="images/bg.jpg" alt="这是我的图片" />

第三步左侧列表的实现；

第四步主题内容与脚注的实现；

最后一步就是发布。

 

转载于:https://my.oschina.net/u/4090689/blog/3021612