3-2编程练习
来源：3-2 编程练习
微风吻雨
2017-11-02 16:03:06
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{
padding:0px;
margin:0px;
}
.content{
width:636px;
height:auto;
border:1px solid #ccc;
padding:10px;
margin:10px;
overflow:hidden;
zoom:1;
}
.li{
width:200px;
border:1px solid #ccc;
height:auto;
margin-bottom:10px;
float:left;
margin:5px;
}
img{
width:100%;
}
.text{
text-align:center;
height:20px;
line-height:20px;
margin:3px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="content">
<div class="li">
<div class="img"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/></div>
<div class="text">欢迎来到慕课网！</div>
</div>
<div class="li">
<div class="img"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/></div>
<div class="text">欢迎来到慕课网！</div>
</div>
<div class="li">
<div class="img"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/></div>
<div class="text">欢迎来到慕课网！</div>
</div>
<div class="li">
<div class="img"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/></div>
<div class="text">欢迎来到慕课网！</div>
</div>
<div class="li">
<div class="img"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/></div>
<div class="text">欢迎来到慕课网！</div>
</div>
<div class="li">
<div class="img"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/></div>
<div class="text">欢迎来到慕课网！</div>
</div>
</div>
</body>
</html>
注：希望老师帮我看看 有没有什么需要优化和不对的地方，谢谢
1回答
-
樱桃小胖子
2017-11-02
效果实现的很好，但是html中没有设置编码声明，导致页面预览出现乱码，建议设置变编码声明<meta charset="utf-8">，祝学习愉快！
0
相似问题