4-11 编程练习
来源：4-12 编程练习
RobinZang
2019-09-19 12:11:38
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div0{
margin:20px 20px 20px 20px;
width: 840px;
background-color: #ffffff;
/*border:solid;*/
float: left;
}
.div1{
margin:20px 20px 20px 20px;
float: left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div0">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好！
整体完成不错，但是有一些小细节可以优化一下：
给div0和div1添加边框
添加边框后，由于每个小区域增大，需要适当增大div0的宽度
可以使每个小区域的文字水平居中会更美观。
综合以上，老师对同学的css做了一些修改：
<style> #div0{ margin:20px 20px 20px 20px; /* width: 840px; */ width: 850px;/* 增大宽度 */ background-color: #ffffff; /*border:solid;*/ border:1px dashed grey;/* 设置边框 */ float: left; } .div1{ margin:20px 20px 20px 20px; float: left; /* 设置边框，并使文字水平居中 */ border:1px solid grey; text-align: center; } </style>如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
0
相似问题