4-5代码问题

首页课程实战体系课手记专栏慕课教程

4-5代码问题

来源：4-7 编程练习

athena_nan

2018-01-13 17:16:37

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>display属性</title>

<style type="text/css">

/*样式补充*/

*{margin:0px;

font-family:"微软雅黑";}

.big{width:150px;

margin:0 auto;

}

.big div{border:1px black solid;}

ul{display:none;

border-top:1px black solid;}

ul li{list-style:none;

text-align:left;

padding:5px;

font-size:14px;}

h3{background-color:#ececec;

text-align:center;}

h3: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>

1、去掉页面基本样式是padding和margin吗?

2、去掉基本样式是设置*去掉好还是body,div,p等这么写好呢？

3、UL下的li对齐上面字应该怎么设置呢？

4、是否可以再优化一下代码，谢谢。

写回答

1回答

怎么都被占用了呢

怎么都被占用了呢

2018-01-14

清除基本样式，建议使用*号，设置所有元素的margin为0，padding为0。

其次li内文字的居中可使用text-align:center;设置，

最后我帮你完善了一下代码，请参考：

0

0 学习 · 36712 问题

相似问题

4-5编程练习

回答 1

4-5编程问题

回答 1

4-5编程练习，麻烦老师帮忙检查

回答 4

4-5练习中的hover问题

回答 4

4-5编程练习，问题请看代码中的注释

回答 7

打开慕课网App查看更多内容