3-2编程练习 查看 ，谢谢
来源：3-2 编程练习
Jackchenxiaoliang
2018-03-15 21:16:12
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
.big{
width:1026px;
height:434px;
border:1px dotted #000;
overflow:hidden;
}
.one{
width:300px;
height:175px;
border:1px solid #000;
float:left;
margin:20px;
text-align:center
}
.two{
width:300px;
height:175px;
border:1px solid #000;
float:left;
margin:20px;
text-align:center
}
.three{
width:300px;
height:175px;
border:1px solid #000;
float:left;
margin:20px;
text-align:center
}
.four{
width:300px;
height:175px;
border:1px solid #000;
float:left;
margin:20px;
text-align:center
}
.five{
width:300px;
height:175px;
border:1px solid #000;
margin:20px;
float:left;
text-align:center
}
.six{
width:300px;
height:175px;
border:1px solid #000;
margin:20px;
float:left;
text-align:center
}
</style>
<!-- 此处编写样式 -->
</head>
<body>
<div class="big">
<div class="one">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" width="300px" height="150px"/>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="two">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" width="300px" height="150px"/>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="three">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" width="300px" height="150px"/>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="four">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" width="300px" height="150px"/>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="five">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" width="300px" height="150px"/>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="six">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" width="300px" height="150px"/>
<div>欢迎来到慕课网学习新知识</div>
</div>
</div>
<!-- 此处写代码 -->
</body>
</html>
3回答
-
加上这一行，实现居中显示会更好。
祝学习愉快！
1h018-03-16 -
HPloveZHY
2018-04-07
.one .two .three .four .five .six 统一设置为一个class就可以了 ，可以简化代码
1h018-04-08 -
爱你一生的我
2018-03-31
同学代码可以简化下哦
.one,.two,.three,.four,.five,.six{
width:300px;
height:175px;
border:1px solid #000;
float:left;
margin:20px;
text-align:center
}
1h018-03-31
相似问题