3-2编程练习，老师帮忙看看哪些需要改的？

来源：3-2 编程练习

momobai

2017-08-27 22:06:34

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{padding: 0;margin: 0;}
.container{
width: 795px;
height: 380px;
border: 1px dashed lightgrey;

float: left;}
.content1,.content2,.content3{
width: 240px;
height:165px;
border: 1px solid lightgrey;
margin: 10px;
float: left;}
.content4,.content5,.content6{
width: 240px;
height:165px;
border: 1px solid lightgrey;
float: left;
margin: 10px;}
p{padding-left: 5px;}

</style>
</head>
<body>
<div class="container">
<div class="content1">
<div class="img1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
</div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content2">
<div class="img2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
</div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content3">
<div class="img3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
</div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content4">
<div class="img4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
</div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content5">
<div class="img5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
</div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content6">
<div class="img6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
</div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>

写回答

1回答

好帮手慕糖

2017-08-28

你好，整体的效果实现不错，但是代码还可以在修改下：（1）content1 - content6的样式是相同的，这里可以设置相同的类。

（2）整体的宽度可以在调整下；一个小盒子的宽度是：240+10*2 +2*1 = 262；一行有三个，那么大盒子的宽度可设置为：786px;

（3）大盒子的高度可以不用设置，由子元素撑起了即可；修改代码可参考如下:

.container{
        width: 786px;
        border: 1px dashed lightgrey;
        float: left;
}
.content1{
    width: 240px;
    height:165px;
    border: 1px solid lightgrey;
    margin: 10px;
    float: left;
}

祝学习愉快~

homobai

h 非常感谢老师

h017-08-28

共1条回复

0 学习 · 36712 问题

查看课程

相似问题

3-2编程练习的问题

回答 3

3-2编程练习帮忙看看哪里还需改进

回答 1

帮忙看一下，3-2练习题哪里错了？

回答 3

3-2的练习，麻烦老师帮忙看下有哪些地方要修改

回答 1

3-2编程练习

回答 1

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