4-7编程练习题疑惑，求解答
来源：4-7 编程练习
沉木岩
2019-07-30 19:18:26
<!DOCTYPE html>
<html>
<head>
<title>盒子模型练习题</title>
<style type="text/css">
body,div,h3,ul{margin:0px;padding:0px;font-family:"宋体";}
.big{width:156px;height:124px;margin:20px 0 0 100px;}
h3{
background-color:rgb(237,237,237);
width:156px;
font-family:"宋体";
font-weight:bold;
text-align:center;
border:1px rgb(123,123,123) solid;
line-height:40px;
font-size:12px;
}
ul{
display:none;
border:1px rgb(123,123,123) solid;
}
li{
text-align:center;
padding:5px 0 5px 0;
}
.div1:hover ul{display:block;}
.div2:hover ul{display:block;}
.div3:hover ul{display:block;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3>衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
麻烦老师有时间帮忙解答一下，hover鼠标弹出的列表是要设置一个单独的边框吗？
为什么我这个边框总对不齐？
为什么边框衔接的地方会比左右边框很粗？
这道练习题在理解上有什么技巧吗？有可能我没有完全理解这道题，一直以为标题下面是设置border-bottom，用border-bottom倒腾了一个下午~~
<li>标签前面的样式怎么去掉呢？为什么display:none无法将它消除。
感谢辛勤可爱的老师和慕课网的web学友！
2回答
-
好帮手慕言
2019-07-31
同学你好，
1、因为.big元素的宽度是156px，h3元素的总宽度为158px（宽度156px+左右两边的边框），
ul没有设置宽度，所以宽度是继承父级的（加上ul设置的边框，总宽度为156px），所以总有2个像素之差。
建议：将.big元素的宽度设置为158px。
代码参考：
2、因为是2px的边框。h3元素的下边框和下一个h3元素的上边框，所以看起来会比左右两边的边框粗。
这个是没有关系的，同学可以仔细看一下练习里面的图示，也是这样的。并不影响效果哦
如果在鼠标移入时，想要边框变为1px，可以给ul元素不设置上下的边框哦
代码参考：
3、没有什么技巧的，多练习就可以啦，练习多了下次看到这种题就会知道怎么做了，加油~
4、li元素前面的小点可以设置list-style: none;，就会消失不见了呦。
代码参考：
如遇到问题不知如何解决，可以在问答区提问，老师或者其他小伙伴会帮助同学解决哒。祝学习愉快~
1 -
好帮手慕嘟嘟
2019-07-31
同学你好，
hover鼠标弹出的列表是要设置一个单独的边框呢~
1, 边框对不齐，是因为没有给ul设置宽度哦，应该让ul的宽度和h3的宽度相同，这样就可以对齐啦~
2, 如下图所示，因为边框衔接的地方是①的下边框和②的上边框重合的，所以会变粗。
解决方法是：
清除所有h3的下边框，并且给最后一个h3单独设置下边框。如图：
3, 因为编程是灵活的，效果可以有多种实现方式，你的这种思路是可以的，
老师的思路是：默认情况下只显示标题，因为给每一个标题设置边框，就会有重合的边框，遇到重合的边框，就要清除重合边框中的其中一条，在清除之后如果发现有一个标题缺少边框，那么单独设置就可以。
鼠标进入的时候ul显示边框也会有重合的地方，做法相同只要去掉重合边框中的其中一条就可以。如图：
4, 清除li的默认样式：
如果还有疑惑,可以在问答区再次提问,我们会继续为你解答的.
如果我的回答帮助了你请采纳,祝学习愉快~
1
相似问题