<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="layout content">
<h1>风景列表</h1>
<ul class="container">
<li class="h-card">
<img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
<div class="detail text-center">
<p>风景如画</p>
</div>
<li class="h-card">
<img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
<div class="detail text-center">
<p>风景如画</p>
</div>
</li>
<li class="h-card">
<img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
<div class="detail text-center">
<p>风景如画</p>
</div>
</li>
<li class="h-card">
<img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
<div class="detail text-center">
<p>风景如画</p>
</div>
</li>
<li class="h-card">
<img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
<div class="detail text-center">
<p>风景如画</p>
</div>
</li>
<li class="h-card">
<img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
<div class="detail text-center">
<p>风景如画</p>
</div>
</li>
</ul>
</div>
</body>
</html>
ul,li{
margin:0;
padding:0;
}
.layout{
width:800px;
margin:0 auto;
}
.content h1{
color: #666;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.container .h-card{
float: left;
margin-left: 10px;
margin-top: 30px;
list-style: none;
}
.h-card {
width: 260px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)!important;
}
.container:after {
content: '';
display: block;
clear: both;
}
.container {
margin-left: -10px;
}
.h-card>img {
width: 100%;
opacity: 0.75;
}
.h-card .detail {
padding: 1px 16px;
}
.h-card .text-center {
text-align: center;
}
