3-4课后习题
来源：3-4 编程练习
慕用2429104
2019-08-23 16:25:03
老师帮忙看一下，我总感觉可以将这些代码简化，希望老师给一些建议
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
width:800px;
margin:0 auto;
background-color:bisque;
}
.top{
padding:15px;
margin-bottom:-15px;
overflow: hidden;
zoom:1;
}
.bottom{
padding:15px;
overflow: hidden;
zoom:1;
}
.left{
float:left;
margin:0 10px;
}
.middle{
float:left;
}
.right{
float:left;
margin:0 10px;
}
.left1{
float:left;
margin:0 10px;
}
.middle1{
float:left;
}
.right1{
float:left;
margin:0 10px;
}
p{
border:2px solid gainsboro;
}
</style>
</head>
<body>
<div class="content">
<div class="top">
<div class="left">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习！</p>
</div>
<div class="middle">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习！</p>
</div>
<div class="right">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习！</p>
</div>
</div>
<div class="bottom">
<div class="left1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习！</p>
</div>
<div class="middle1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习！</p>
</div>
<div class="right1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习！</p>
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，
1、运行同学提供的代码，可以看出距离是不相等的。练习效果图上的距离都是相等的。
建议：调整一下间距
2、图片与图片下方的文字之间有间隙。原因是img标签是内联元素，有默认的间隙。
建议：将img标签设置为块元素。
代码参考：
页面效果：
祝学习愉快~
0
相似问题