图片列表
2018-09-12 本文已影响0人
蔚来天空
运用：盒模型、浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表</title>
<style type="text/css">
*{
margin: 0;
padding: 0
}
.box{
width: 960px;
height: 269px;
border: 1px solid black;
margin: 100px auto;
}
.box1{
display: inline-block;
width: 100px;
height: 50px;
font:18px '雅黑' #000;
border-bottom: 2px solid red;
margin-left: 20px;
text-align: center;
line-height: 50px;
}
.box2{
width: 920px;
height: 219px;
border-top: solid 1px black;
margin:0 auto;
}
.p1{
margin-top:20px;
}
.p2{
margin-left: 24px;
margin-right: 24px;
}
.p4{
margin-left: 24px;
margin-right: 24px;
}
.p6{
margin-top: 30px;
}
.p7{
margin-left: 24px;
margin-right: 24px;
}
.p9{
margin-left: 24px;
margin-right: 24px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<span>图片展示</span>
</div>
<div class="box2">
<img class = 'p1' src="goods.jpg" alt="">
<img class = 'p2' src="goods.jpg" alt="">
<img class = 'p3' src="goods.jpg" alt="">
<img class = 'p4' src="goods.jpg" alt="">
<img class = 'p5' src="goods.jpg" alt="">
<img class = 'p6' src="goods.jpg" alt="">
<img class = 'p7' src="goods.jpg" alt="">
<img class = 'p8' src="goods.jpg" alt="">
<img class = 'p9' src="goods.jpg" alt="">
<img class = 'p10' src="goods.jpg" alt="">
</div>
</div>
</body>
</html>
图片列表.png
