[分享]css做网站导航的页面

CSS做网站导航

/* 导航栏样式 */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}





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

<p>CSS做网站导航的页面相比传统的HTML做导航，具有更好的灵活性和美观性。下面是一个简单的实现：</p>

		<p>HTML结构：</p>
		<p><div class="navbar"> ————导航栏的整体，使用CSS设置背景颜色和宽度</p>
		<p><a> ————导航栏中的导航元素，使用CSS设置样式</p>
		<p class="active">class="active" ————用于设置当前页面在导航栏中的状态</p>

		<p>CSS样式：</p>
		<p>.navbar {} ————设置导航栏的基本样式</p>
		<p>.navbar a {} ————设置导航元素的基本样式</p>
		<p>.navbar a:hover {} ————设置导航元素的鼠标悬浮状态的样式</p>
		<p>.active {} ————设置当前页面在导航栏中的样式</p>