为了账号安全,请及时绑定邮箱和手机立即绑定

head{height:50px;padding-top:20px;}为什么height会变成70px

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
*{
           margin: 0;
padding: 0;
font-size: 14px;
}
       a{
           text-decoration: none;
color: #333;
}
       .head{
           height: 50px;
padding-top: 20px;
border-bottom: 10px solid #f60;      
}
       .head ul{
           list-style-type: none;
height: 30px;
padding-left:50px;
/*border-bottom: 10px solid #f60;*/
}
       .head ul li{
           float: left;
}
       .head ul li a{
           display: block;
background: url("bg.png");
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
margin-left: 1px;
}
       .head ul li a:hover{
           background-position: 0 -30px;
color: #fff;
font-weight:bold;
font-size: 15px;
}
   </style>
</head>
<body>
   <div class="head">
       <ul>
           <li><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
           <li><a href="#">音乐专题</a></li>
           <li><a href="#">娱乐专题</a></li>
           <li><a href="#">新闻专题</a></li>
           <li><a href="#">游戏专题</a></li>
       </ul>
   </div>

</body>
</html>

正在回答

4 回答

因为高度是根据你的全部加起来定义的

0 回复 有任何疑惑可以回复我~

要明白 <div class="c"></div>

.c a

.c>a 的区别

0 回复 有任何疑惑可以回复我~

网页基本布局结构有padding,border(一般不用),margin,几个,是一层叠一层的,你设置height为50px之后,又设置padding-top:20px; 所以页面整体下移了20像素,就变成了70px。

hover 作用是设置链接的被鼠标移动到上面的属性,在前面如果不加 ,head ul li a: 的话,是应用到所有超链接的,而且会被子级元素的属性覆盖掉,前面加那些意思就是我设置head头部 无序列表的行 里面的超链接的属性,那他就只会应用到这里,不会影响别的链接的效果了。

建议你看一下CSS基础再尝试着做一个站。这些东西在教程上都有哒~

2 回复 有任何疑惑可以回复我~
#1

6Milliliter 提问者

非常感谢!
2015-12-02 回复 有任何疑惑可以回复我~

还有为什么hover前面必须设置成.head ul li a:hover{},backgeound-position属性才能起作用

0 回复 有任何疑惑可以回复我~
#1

慕課君

不明白,background-position,属性是用来干什么的。 hover标签是作用在a标签上的,而前面的标签是它的父级,说明这个是head 里ul里的li标签里的 a标签。 但你head里怎么可能用无序列表,很奇怪,而且你的background也写错了。另外 直接写 a:hover也是可以的,但它选择的是body里所有a标签都是使用hover样式,加上那个路径就是单单改变某一个a标签或某一类a标签的样式。这样你明白吧
2015-12-11 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123848    人
  • 解答问题       838    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

head{height:50px;padding-top:20px;}为什么height会变成70px

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号