css制作好的导航条

CSS是网页设计中非常重要的一部分，它可以用来美化我们的网页，其中导航条是网页中比较重要的一部分，下面我们来学习如何用CSS制作一个好看的导航条。

/* CSS代码 */
nav {
    background-color: #333;
    overflow: hidden;
}
nav a {
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
nav a:hover {
    background-color: #ddd;
    color: black;
}
.active {
    background-color: #4CAF50;
    color: white;
}

首先我们需要在HTML文件中添加一个导航栏的结构，例如：

首页
    新闻
    关于我们
    联系我们

接着我们就可以用CSS对导航栏进行美化了。我们先给导航栏一个背景颜色，并设置它的溢出隐藏。然后我们对导航栏中的每一个链接都进行样式的设置，如设为浮动，颜色为白色，左右内边距为16px，上下内边距为14px等等。最后我们对活动链接也就是网页当前所在页面的链接，单独设置了一个active样式，设置其背景和字体颜色。当鼠标放在链接上时也会有hover样式的变化。

通过这些简单的CSS样式设置，我们就制作出了一个简洁美观的导航栏。