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

Web网页导航菜单的制作

最近初学Html/Css,今天学习了一个简单的静态导航条的制作。属于很简单，很基础的东西。

思路：导航菜单–>书籍的目录，条目性结构–>用无需列表构建导航菜单

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

<ul>
<li><a href="#">首 页</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.效果