导航条

最新推荐文章于 2022-06-28 11:15:00 发布

原创最新推荐文章于 2022-06-28 11:15:00 发布 · 496 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#导航条 #无序类表

h5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用CSS和HTML实现的简单一级导航条设计方法，通过无序列表和浮动属性创建了水平布局，同时利用伪类:hover实现了鼠标悬停效果。

用无序列表编写的简单一级导航条

<!-- 声明部分 -->
<!doctype html>
<html>
<head><!-- 头部 -->
<meta charset="utf-8">
<title>列表应用</title><!-- 标题 -->
<style type="text/css">
*{
	margin:0px;
	padding:0px;
}**//清除默认样式**
.nav{
	list-style-type:none;<!--去掉类表项目符号-->
	background-color:#6FF;<!--给导航条设置背景颜色-->
	width:500px;<!--给导航条设置宽度-->
	overflow:hidden;<!--解决高度塌陷-->
     margin:100px auto;<!--设置导航条水平居中-->
}
.nav li{
	float:left;<!--向左浮动-->
}

.nav li a{
	display:block;<!--将内联元素转换成块级元素-->
	width:100px;<!--设置宽度-->
	text-align:center;<!--让文本居中-->
	text-decoration:none;<!--去除下划线-->
}
.nav li a:hover{
	background-color:#C00;<!--鼠标移入时变成红色-->
}
</style>


</head>

<body>
<ul class="nav">
<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>
</body><!-- 主体 -->
</html>
效果如下图

导航条