css+html导航栏实例

最新推荐文章于 2024-06-06 15:17:50 发布

yayun0516

最新推荐文章于 2024-06-06 15:17:50 发布

阅读量5.3k

点赞数 4

分类专栏： css 文章标签：导航栏 css html 伪类 ul

本文链接：https://blog.csdn.net/yayun0516/article/details/41478699

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>导航菜单的制作</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>	
</head>

<body>
	<div id="banner">
		<ul>
			<li><a href="http://www.baidu.com" target="-blank">home</a></li>
			<li> <a href="">link</a></li>
			<li> <a href="">product</a></li>
			<li> <a href="">phone</a></li>
			<li> <a href="">cat</a></li>
			<li> <a href="">about</a></li>
		</ul>
	</div>
	
</body>
</html>

.css代码如下：

#banner{width:750px;margin:0 auto}
#banner{
	
	height:30px;
	background:#ab0;
	
	
}
ul{
	list-style:none/*去掉前面的点*/
}
ul li{
	float:left;/*水平显示*/
	width:100px;
	text-align:center;
	border-right:2px solid #aba;
	padding-top:5px;
	height:25px;
}
a{
	text-decoration:none;
}
a:link{color:green;}
a:visited{color:red;}
a:hover{color:yellow;}

效果如下：