纯CSS制作网页导航栏

最新推荐文章于 2025-06-15 15:38:18 发布

原创最新推荐文章于 2025-06-15 15:38:18 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

这里就直接上CSS的代码了

.index_tab{
	width:70%;
	height:10%;
	align:center;
	margin:0 auto;
}


ul,li
{
	margin:0;
	padding:0;
	list-style:none; /*li样式中前面的图标，这里无图标*/  
}

/*导航栏样式*/  
.index_tab ul{width:950px;float:left;height:51px;display:inline;}
.index_tab ul li{width:100px;height:36px;margin:4px 2px; line-height:36px; text-align:center;float:left;display:inline;}
.index_tab ul li a{width:100px;height:36px; float:left;text-decoration:none;}
.index_tab ul li a:hover{ text-decoration:underline;background-color:blue;}

颜色不是很好看，可以再调整

HTML代码：

	<div class="index_tab" id = "index">
		<ul>
			<li><a href="#">机构简介</a></li>
    		<li><a href="#">办学宗旨</a></li>
        	<li><a href="#">教师介绍</a></li>
       	 	<li><a href="#">学生风采</a></li>
       		<li><a href="#">报名培训</a></li>
        	<li><a href="#">培训材料</a></li>
        	<li><a href="#">详情咨询</a></li>
   		 </ul>	
	</div>