页面头部制作

编写头部html。

<div class="top">
    <div class="top-content">
        <ul>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">加入收藏</a></li>
            <li><a href="#">设为首页</a></li>
        </ul>
    </div><!--top-content结束-->
</div><!--top结束-->

css样式

1. 设置top基本宽高和背景。

   .top {
       width: 100%;
       height: 27px;
       background: url("../images/top_bg.jpg") repeat-x;
   }

2. 设置top-content宽度为1000px并水平居中

   .top-content {
       width: 1000px;
       margin: 0 auto;
   }

   div居中方式：设置width属性，设定margin属性为 margin: 0 auto;

3. 设置列表项目符号

   list-style-image: url("../images/li_bg.gif");

4. 设置列表水平排布

    float: right;

   通过浮动可以使列表水平排布

5. 增加列表之间间距

   width: 100px;

   通过设置宽的方式，可以增加列表间距

6. 设置列表垂直居中

   line-height: 27px;

   设置line-height为容器元素的高，li元素的容器元素top高为27px，故line-height: 27px;

7. 改变超链接样式

   • 改变标签初始颜色，和访问后的颜色

     .top-content a:link,.top-content a:visited{
         color: #8E8E8E;
     }

     link为初始状态；visited为访问之后的状态

   • 去除标签的下划线

     text-decoration:none;

   • 设置标签的鼠标经过的颜色和按下时的颜色

     .top-content a:hover, .top-content a:active {
         color: #FF9999;
     }

     hover为鼠标经过时的状态；active为鼠标按下时的状态