5.仿新浪网首页导航条
程序员文章站
2022-07-13 15:59:18
...
效果：
把鼠标放在导航条上背景会变色（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>