Web网页简单的静态导航菜单的制作

Web网页导航菜单的制作

最近初学Html/Css,今天学习了一个简单的静态导航条的制作。属于很简单，很基础的东西。
思路：导航菜单–>书籍的目录，条目性结构–>用无需列表构建导航菜单

1. 首先在html代码中建立ul：

    <ul>
        <li><a href="#">首&nbsp;页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>

效果如下(浏览器中显示会有下划线，我们在第二步中进行去除)：

• 首 页
• 新闻快讯
• 产品展示
• 售后服务
• 联系我们

2. 这是我们有了基本目录，我们建立CSS文件，引入到html中，然后进行样式清除，既将本来的样式抹掉，并建新样式：

• 基本的样式清除： *{margin:0;padding:0}

• 无序列表圆点去除：li{list-style-type: none;}

• 下划线去除： a{text-decoration:none}

同时，在此基础上进行一些CSS的自定义。

• a:hvoer是一个CSS伪类，用于鼠标移到a的时候的样式
  最终CSS代码：

   *{margin: 0;padding: 0;font-size: 20px};

   ul{width:100px}

li{list-style-type: none;}

   a{text-decoration:none;display:block;height: 30px;line-height: 30px;width: 100px;background-color: #ccc;margin-bottom: 1px;text-indent: 10px}

   a:hover{background-color: #f60;color: #fff};

需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block}

文本缩进标签 text-indent 不会影响总体宽度

3.效果