麻烦老师看看有什么需要改进的地方
来源：4-7 编程练习
慕桂英2021900
2019-07-17 19:41:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
div,h3,ul{
margin: 0px ;/*外边距为0*/
padding: 0px;/*内边距为0*/
list-style: none;/*清除列表样式*/
}
.course{
width: 122px;/*最外层容器宽度*/
}
h3{/*总宽度为100+20+2=122*/
border:1px solid #999999;/*标题边框*/
background: #cccccc;/*标题背景颜色*/
width: 100px;/*标题内容宽度*/
padding: 5px 10px;/*标题内边距上下为5像素左右为10像素*/
text-align: center;/*居中显示*/
font:bold 20px "宋体";/*标题字体加粗大小20像素*/
}
ul{
border-left:1px solid #999999;
border-right:1px solid #999999;
border-bottom:1px solid #999999;/*设置ul的左右和下边框*/
width: 120px
}
ul li{
text-align: center;/*内容居中*/
background: white;/*背景颜色为白色*/
padding: 5px 10px;/*标题内边距上下为5像素左右为10像素*/
width: 100px;/*内容宽度*/
line-height: 30px;/*内容行高*/
display: none;/*默认不显示*/
}
.d1:hover li{
display: block;/*当鼠标悬浮在标题上时显示隐藏内容*/
}
</style>
</head>
<body>
<div class="course">
<div class="d1">
<h3>家电</h3>
<ul>
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="d1">
<h3>洗护</h3>
<ul>
<li>洗发露</li>
<li>沐浴露</li>
<li>消毒液</li>
</ul>
</div>
<div class="d1">
<h3>衣物</h3>
<ul>
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
同学你好，整个内容在页面上是水平居中显示的哦。
建议：给外层盒子设置margin:0 auto;来实现。
代码参考：
祝学习愉快~
1
相似问题