CSS---案例--新浪微博导航
程序员文章站
2024-01-27 17:13:52
...
新浪导航的核心是字数不一样多，故不方便给宽度，因而用padding 撑开盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪</title>
<style>
.nav{
height: 41px;
background-color: #FCFCFC;
border-top: 3px solid #FF8500;
border-bottom: 1px solid #EDEEF0;
}
.nav a{
display: inline-block;
height: 41px;
padding:0 20px;
line-height: 41px;
background-color:#cccccc;
color: black;
text-decoration: none;
font-size: 12px;
}
.nav a:hover{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
下一篇： Web学习历程（六）