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