3-2编程练习
来源：3-2 编程练习
叶松舍
2017-08-25 13:36:05
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{
margin:0;
padding:0;
}
.text1{
width:2000px;
height:auto;
border:1px solid #000;
overflow:hidden;
}
.img1,.img2,.img3{
margin-right:20px;
float:left;
}
p{
text-align:center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="text1">
<div class="img1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="img2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="img3"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="kong"></div>
</div>
<div class="text1">
<div class="img1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="img2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="img3"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>
老师这样可以么？
1回答
-
与效果图不一致：
1、内容有乱码，给head标签中添加<meta charset="utf-8">。
2、父元素的宽度太宽了，按照效果图去设置，将父元素的宽度，以及图片的margin值再改一下。
祝学习愉快！
0
相似问题