<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片列表</title>
<link rel="stylesheet" href="css/圖片列表.css">
</head>
<body>
<div class="box1">
<div class="box2">
<h1>圖片展示</h1>
</div>
</div>
<div class="box3">
<ul class="box4">
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
<li><img src="img/goods.jpg" alt="1"></li>
</ul>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
.box1{
width: 960px;
height: 50px;
border: 1px solid rgb(209,209,209) ;
border-bottom: none;
margin: 0 auto;
}
.box2{
width: 920px;
height: 50px;
margin: auto;
border-bottom: 1px solid rgb(209,209,209) ;
}
h1{
width: 100px;
height: 18px;
color: #000;
font: bold 18px "微軟雅黑";
text-align: center;
padding: 16px 15px;
line-height: 12px;
border-bottom: 1px solid red ;
}
.box3{
height: 220px;
width: 960px;
border: 1px solid rgb(209,209,209);
border-top: none;
margin: 0 auto;
}
.box4{
list-style: none;
}
.box4 img{
float: left;
display: inline-block;
width: 160px;
height: 68px;
margin: 20px 10px 12.5px 20px;
}
.box3:before,
.box3:after{
content: "";
display: table;
clear: both;
}
效果圖：
image.png
