标签:
最近初学Html/Css,今天学习了一个简单的静态导航条的制作。属于很简单,很基础的东西。
思路:导航菜单–>书籍的目录,条目性结构–>用无需列表构建导航菜单
<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>
效果如下(浏览器中显示会有下划线,我们在第二步中进行去除):
基本的样式清除: *{margin:0;padding:0}
无序列表圆点去除:li{list-style-type: none;}
下划线去除: a{text-decoration:none}
同时,在此基础上进行一些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 不会影响总体宽度
标签:
原文地址:http://blog.csdn.net/at_wangwei/article/details/51330797