5.仿新浪网首页导航条

最新推荐文章于 2021-11-30 15:06:34 发布

neilro

最新推荐文章于 2021-11-30 15:06:34 发布

阅读量487

点赞数

分类专栏： Div+Css 文章标签：导航

本文链接：https://blog.csdn.net/neilro/article/details/79079097

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

效果：

把鼠标放在导航条上背景会变色（hover效果）

这个例子重点在于内外边距的理解和运用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新浪首页</title>
		<style type="text/css">
			.nav{
				height:40px;
				background:#eee;
				border-top:3px solid orange;
				border-bottom:1px solid #aaa;
			}
			.nav-con{
				width:1000px;
				height:40px;
				margin:0 auto;
			}
			a:link{
				font:12px 微软雅黑;
				line-height: 40px;
				color:#333;
				display: inline-block;
				text-decoration: none;
				padding: 0 12px;/*每个行内块元素左右距离12像素*/
			}
			a:hover{
				background:#999;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<div class="nav-con">
				<a href="#">设为首页</a>
				<a href="#">手机新浪网</a>
				<a href="#">移动客户端</a>
			</div>
		</div>
	</body>
</html>