<CSS基础>导航栏制作教程

来源：互联网发布：苹果52g网络编辑：程序博客网时间：2024/05/21 16:57

最近开始巩固前端知识，所以作为一个渣渣还是来写写博客吧。

这是是写一个横向菜单，比较简单，如图所示，

点击时：

开始写内容，首先是基本包含内容：

<pre name="code" class="html"><span style="white-space:pre"></span><body><div id="div1"><ul><li><a href="http://www.swu.edu.cn">首页</a></li><li><a href="http://www.swu.edu.cn">热点</a></li><li><a href="http://www.swu.edu.cn">订阅中心</a></li><li><a href="http://www.swu.edu.cn">手机客户端</a></li><li><a href="http://www.swu.edu.cn">鲜果</a></li></ul></div></body>

CSS样式:

<span style="white-space:pre"></span><pre name="code" class="css">*{padding:0;margin:0;}

*内容是为了避免不同浏览器的不同自带格式。

#div1{width:960px;height:35px;background:#999;margin:0 auto;margin-top:30px;}

设置div1格式，即导航栏看到的外部样式，margin:0 auto为居中显示，

margin-top:30px为距离顶部30px

#div1 ul{list-style:none;}

将列表自带样式去除

#div1 ul li{float:left;color:#000;line-height:35px;text-align:center;margin-right:1px;}

line-height设置为和菜单栏一样大小，可将文字垂直居中.

text-align:center则设置文字水平居中。

li为块状元素，都是一行一行的显示，于是我们设置为float:left

a{color:#FFF;text-decoration:none;font-size:12px;height:35px;display:block;padding:0 10px;}

a:hover{<span style="white-space:pre"></span>text-decoration:underline;<span style="white-space:pre"></span>color:#333;<span style="white-space:pre"></span>background-color:#900;<span style="white-space:pre"></span>}

为a设置样式，以及点击a时的状态，

0 0