CSS实例:图片导航块
实例:图片文字用div等元素布局形成HTML文件;新建相应CSS文件,并link到html文件中;CSS文件中定义样式
1.div.img:border,margin,width,float
2.div.img img:width,height
3.div.desc:text-align,padding
4.div.img:hover:border
5.div.clearfloat:clear
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> <link rel="stylesheet" type="text/css" href="mianban.css"> </head> <body> <div class="recommend" > <div class="img"> <a href="https://idol001.com/star/vixx.html"><img src="http://p0.so.qhimgs1.com/bdr/_240_/t0120772a79781fb26c.jpg"></a> <div class="desc"><a href="https://idol001.com/star/vixx.html">VIXX</a></div> </div> <div class="img"> <a href="https://idol001.com/star/exo.html"><img src="https://img.idol001.com/middle/2017/08/29/bad8989725e684c9443b5df4146eec031503936213.jpg"></a> <div class="desc"><a href="https://idol001.com/star/exo.html">EXO</a></div> </div> <div class="img"> <a href="https://idol001.com/star/got7.html"><img src="https://img.idol001.com/middle/2017/09/20/bd0ea260ae9adae8f092cf12ece0a24a1505887163.jpg"></a> <div class="desc"><a href="https://idol001.com/star/got7.html">GOT7</a></div> </div> <div class="img"> <a href="https://idol001.com/star/seventeen.html"><img src="http://tvax3.sinaimg.cn/crop.22.22.55.55.180/0061utS2ly8fhf3ew2plyj302s02smx0.jpg"></a> <div class="desc"><a href="https://idol001.com/star/seventeen.html">SEVENTEEN</a></div> </div> </div> <br> <div class="clearfolat"> <img src="http://p0.so.qhimgs1.com/bdr/_240_/t0120772a79781fb26c.jpg"><br> <img src="https://img.idol001.com/middle/2017/08/29/bad8989725e684c9443b5df4146eec031503936213.jpg"><br> <img src="https://img.idol001.com/middle/2017/09/20/bd0ea260ae9adae8f092cf12ece0a24a1505887163.jpg"><br> <img src="http://tvax3.sinaimg.cn/crop.22.22.55.55.180/0061utS2ly8fhf3ew2plyj302s02smx0.jpg"> </div> </body> </html>
CSS代码:
img{ width: 250px; } div.img{ border: 1px solid #cccccc; width: 180px; float: left; margin: 5px; } div.img img{ width: 100%; height: auto; } div.desc{ text-align: center; padding: 5px; } div.img:hover{ border: 1px solid #fa8072; } div.clearfolat{ clear: both; }
运行结果为: