CSS 制作菜单栏

来源:互联网 发布:移动通信网络优化 编辑:程序博客网 时间:2024/05/18 09:16

1、如何用ul制作一行菜单

 

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>

样式:

<style type="text/css">

      ul{
 float:left;margin:auto;padding:auto;width:800px;list-style-type:none;
}
ul li{
 display:inline;
}
ul li a{
 float:left;padding-left:10px;padding-right:10px;color:#00FF00;background-color:#6600FF;text-decoration:none;border-right:1px solid white
}

a.hover{
 background-color:#CC0099;
}

 

</style>

 

关键点:display:inline----使得li能连接在一起,以前一直设置li float:left,太麻烦了。