css怎样做导航按钮

在网站开发中，导航按钮是非常重要的元素之一。而用CSS来制作导航按钮，可以达到简单、美观、易用的效果。下面就让我们来看一下具体怎样做：
首先，我们需要一个ul列表用作导航按钮的容器，如下所示：

<ul id="nav"><li><a href="">首页</a></li><li><a href="">新闻</a></li><li><a href="">文化</a></li><li><a href="">联系</a></li></ul>

其中，每个导航按钮都是一个li元素，其内部则是一个 a 元素，用于设置导航链接文本和事件。
接下来，我们需要为导航按钮设置CSS属性。我们可以使用border属性来定义导航按钮边框样式，background-color属性定义背景颜色，padding属性定义按钮内边距，color属性定义文字颜色，font-size属性定义文字大小，text-decoration属性定义文字下划线等。具体代码如下：

#nav {list-style: none;display: inline-block;margin: 0;padding: 0;}#nav li {float: left;margin: 0;padding: 0;}#nav li a {display: block;padding: 8px 12px;text-decoration: none;font-size: 14px;color: #ffffff;background-color: #333333;border: 1px solid #333333;border-radius: 3px;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li a:hover {background-color: #ffffff;color: #333333;border-color: #cccccc;}

其中，我们用了list-style设置ul列表的样式为无序的列表形式，用display:inline-block实现水平排列按钮，用transition属性设置按钮hover状态时的过渡样式。
这样，我们就完成了一个简单的导航按钮。当然，根据实际需求可以进行更复杂的样式设定，如加入CSS3的阴影效果、渐变效果等等。不过，基本的思路就是这样啦。

上一篇：javascript世界诞生记

下一篇：css怎么选取后代元素

---