css上面缩略图底部标题布局代码实例
分类：实例代码
这是比较常见的布局结构，那就是上面缩略图，下面是关于缩略图的标题。
在产品网站或者图片网站比较常见，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #ddd;
}
ul {
width: 800px;
height: 800px;
margin: 0 auto;
}
li {
list-style-type: none;
margin: 20px;
display: inline-block;
}
img {
width: 200px;
height: 200px;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
vertical-align: top;
}
span {
display: block;
width: 200px;
background-color: #fff;
color: #000;
text-align: center;
padding: 10px 0;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
}
</style>
</head>
<body>
<ul>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
<li>
<img src="ant.jpg">
<span>00</span>
</li>
</ul>
</body>
</html>
css上面缩略图底部标题布局代码实例，这样的场景在实际项目中还是用的比较多的，关于css上面缩略图底部标题布局代码实例就介绍到这了。
css上面缩略图底部标题布局代码实例属于前端实例代码，有关更多实例代码大家可以查看。