盒子模型编程练习麻烦老师批改下~谢谢
来源：4-7 编程练习
DemiMurphy
2019-07-10 23:18:48
你好，以下是正确的题目中效果图片，另外，第二张图片是我写成的效果图，麻烦老师帮我皮改一下代码，这里有几个问题：
为什么中间两条行线特别深，如何设置才与外框边线一致？
为什么<h3>标题字体的颜色我没法更改为黑色？我知道加了标签会显示蓝色，但是如何设置跟效果图一致？
为什么鼠标滑过标题时显示的内容还是带有列表的圆点格式？如何去掉？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
*{margin: 0px;padding:0px;font-family: "微软雅黑";}
.big{width: 220px;margin: 0 auto;text-align: center;}
h3{width: 100%px;height: 30px; background:#E8E8E8;border:1px #B8B8B8 solid;
margin: 0 auto;}
.elec{display: none;;}
.wash{display: none;}
.clothes{display: none;}
a{text-decoration: none;}
.div1:hover .elec{display: inline;}
.div2:hover .wash{display: inline;}
.div3:hover .clothes{display: inline;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<a href="#"><h3>家电</h3></a>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<a href="#"><h3>洗护</h3></a>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<a href="#"><h3>衣物</h3></a>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕夭夭
2019-07-11
你好同学，解答如下
1.中间的边框看起来深，是因为上下两个标题的边框叠加起来的效果，实际上颜色是一样的，只是有一点粗。效果图也是这样的，不用修改哦。
2.标题的颜色变为蓝色是因为嵌套a标签。a标签会有默认的字体颜色，所以要给文字重新设置颜色应该给a标签设置覆盖掉它自己默认的就行, 即如下：
但是标题一般是不用设置链接效果的，建议同学直接把a标签去掉更好，这样h3默认的字体颜色就是黑色，不用再设置颜色了：
标题的宽度后面设置了两个单位，导致样式无效
要把后面的px去掉哦。
3.li的圆点是默认的样式，如下清除
4.其他代码还需要优化的如下
另外，边框可以加在整体的容器上，这样下拉菜单外围也有一个边框效果，然后给标题单独加上边框和下边框效果更好看一点。当然了，边框不需要和效果图一模一样，这里主要是练习下拉菜单显示和隐藏的效果哦
祝学习愉快，望采纳。
0
相似问题