检查代码，看看是否有优化的地方，再看看我CSS注释的地方理解的对不对

来源：2-14 编程练习

weixin_慕的地5241954

2019-08-16 00:06:22

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin: 0;padding: 0;
}
.content{
width: 1020px;
height: 385px;
position: absolute; /*设置绝对定位脱离常规流后，才能使大盒子实现垂直水平居中，这里有点忘记了*/
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -500px;
text-align: center;/*这个是使盒子中文本内容水平居中的属性，文本内容包括图片和文字，有点忘记了*/
font-size: 0; /*这个是去除图片间缝隙的属性，跟上一条一起使用，因为图片属于行内元素，浏览器自带空格属性，否则会出现小的空白，很重要的细节*/
}
.con1{
width: 1020px;
height: 245px;
background: lightblue;
}
.con2{
width: 1020px;
height: 140px;
background: pink;
}
.con1 img{
display: inline-block;
margin-left: 100px;
margin-top: 15px;
float: left;/*使用float属性配合父元素的position: absolute属性来进行定位，方便文字或图片的排版，非常好用，不舍之容易出现排版错乱*/ 
}
.con2 img{
display: inline-block;
margin-left: 100px;
margin-top: 40px;
float: left; /*使用float属性配合父元素的position: absolute属性来进行定位，方便文字或图片的排版，非常好用，不舍之容易出现排版错乱*/      
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="content">
<div class="con1">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" alt="CSS3"/>
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" alt="HTML"/>
</div>
<div class="con2">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" alt="慕课网"/>
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" alt="慕课网"/>
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" alt="慕课网"/>
</div>
</div>
</body>
</html>

写回答

1回答