07-简易版新浪导航栏(盒子模型)
Posted 做个机灵鬼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了07-简易版新浪导航栏(盒子模型)相关的知识，希望对你有一定的参考价值。
1.布局一个大盒子
2.设置盒子的大小,边框,行内距,内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>新浪导航栏</title>
<style>
/* 布局一个大盒子 */
.nav {
/* 设置边框 */
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
height: 41px;
background-color: #fcfcfc;
/* 为了字体居中,设置行高和盒子高度一样 */
line-height: 41px;
}
.nav a {
text-decoration: none;
/* 行内元素没有高,转变成行内块元素 */
display: inline-block;
/* 这里行内距设置左右就可以了,但是复合书写必须给上下行内距设置一个值 */
padding: 0 20px;
height: 41px;
font-size: 14px;
color: #4c4c4c;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设置首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">
<select>
<option>登陆</option>
<option>QQ登陆</option>
<option>手机号码登陆</option>
<option>微信登陆</option>
</select></a
>
<a href="#">微博</a>
</div>
</body>
</html>
以上是关于07-简易版新浪导航栏(盒子模型)的主要内容，如果未能解决你的问题，请参考以下文章
Web开发·期末不挂之第五章·CSS盒子模型(盒子模型各属性&行级元素和块级元素&导航栏的实现)