2021-03-23 06:10:11
最近初学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.效果。
原文链接：https://blog.csdn.net/at_wangwei/article/details/51330797
上一篇：php __sleep方法啥意思
下一篇：没有了
