HTML——制作⼀个图⽚列表总结：
1）html有很多默认样式，然⽽实际应⽤中并不需要，因此要在制作样式之前清除掉默认样式。
2）注意清除margin-top塌陷
3）使⽤float：left后要使⽤clear：both清除其影响
4）注意要兼容IE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图⽚列表布局</title>
<style type="text/css">
body,ul,h3{
/*清除默认格式中的margin 和 padding*/
margin:0;
padding:0;
}
ul{
/*清除ul默认格式中的.*/
list-style: none;
}
/*清除margin-top塌陷*/
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
/*清除浮动*/
.clearfix:after{
clear:both;
}
/*兼容IE*/
.clearfix{
zoom:1;
}
.
pic_list_con{
width:958px;
border:1px solid #ddd;
/*多出来的ul要剪掉*/
overflow:hidden;
}
.pic_list_con h3{
width:918px;
height:50px;
border-bottom: 1px solid #ddd;
/*是h3居中，不是h3中的⽂字居中哦！*/
margin:0 auto;
}
.pic_list_con h3 span{
/*内联元素转为内联块元素，⽀持全部样式*/
display:inline-block;
height:50px;
border-bottom: 2px solid red;
font: 18px/50px 'Microsoft YaHei UI';
padding:0 15px;
}
.pic_list_con ul{
width: 950px;
margin:20px 0 13px 20px;
}
.pic_list_con ul li{
width:160px;
height:68px;
/*多个div在⼀个页⾯上，默认情况是：⼀⾏⼀个div，但是只要在div的css中使⽤
float：left，可以使⼀⾏有多个div，这样可以把⽹页划分成很多块，
但是使⽤该属性会影响后⾯的元素，所有如果后⾯的div不想再被影响，
可以使⽤clear:both；
可以理解为清除float:left和float:right的影响，返回到默认状态。*/
float:left;
margin:0 29px 25px 0;
}
</style>
</head>
<body>
<div class="pic_list_con">
html制作一个网页<h3><span>图⽚展⽰</span></h3>
<ul class="clearfix">
<li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li>
<li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li>
<li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li>
<li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li>
<li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li>
<li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品图⽚"></a></li> </ul>
</div>
</body>
</html>
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。