# 页面头部制作

## 编写头部html。

```markup
<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基本宽高和背景。

   ```css
   .top {
       width: 100%;
       height: 27px;
       background: url("../images/top_bg.jpg") repeat-x;
   }
   ```
2. 设置top-content宽度为1000px并水平居中

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

   > div居中方式：设置width属性，设定margin属性为 margin: 0 auto;
3. 设置列表项目符号

   ```css
   list-style-image: url("../images/li_bg.gif");
   ```
4. 设置列表水平排布

   ```css
    float: right;
   ```

   > 通过浮动可以使列表水平排布
5. 增加列表之间间距

   ```css
   width: 100px;
   ```

   > 通过设置宽的方式，可以增加列表间距
6. 设置列表垂直居中

   ```css
   line-height: 27px;
   ```

   > 设置line-height为容器元素的高，li元素的容器元素top高为27px，故line-height: 27px;
7. 改变超链接样式
   * 改变标签初始颜色，和访问后的颜色

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

     > link为初始状态；visited为访问之后的状态
   * 去除标签的下划线

     ```css
     text-decoration:none;
     ```
   * 设置标签的鼠标经过的颜色和按下时的颜色

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

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