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上面缩略图底部标题布局代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容