标签：utf-8 图片文字 hover 实例 文件 == images pad load
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电影</title> <link rel="stylesheet" type="text/css" href="../static/css/aa.css"> </head> <body> <div class="img"> <a href="http://www.360kan.com/m/haTkZBH4QXf1Sh.html"><img src="http://p9.qhimg.com/d/dy_7e49149397944084925287b00b6d7720.jpg"alt=""></a> <div class="desc"><a href="http://www.360kan.com/m/haTkZBH4QXf1Sh.html">神偷奶爸3</a></div> </div> <div class="img"><a href="http://www.360kan.com/m/hKPiZRH4QHP7Tx.html"><img src="http://n.sinaimg.cn/ent/transform/20170825/N2u_-fykiuex6343198.jpg"alt=""></a> <div class="desc"><a href="http://www.360kan.com/m/hKPiZRH4QHP7Tx.html">战狼2</a></div> </div> <div class="img"> <a href="http://www.360kan.com/m/hqPnaRH3S0H2Sx.html"><img src="http://ent.chinadaily.com.cn/img/attachement/jpg/site1/20170217/64006a47a4491a109ee53e.jpg" alt=""></a> <div class="desc"><a href="http://www.360kan.com/m/hqPnaRH3S0H2Sx.html">功夫瑜伽</a></div> </div> </div> <div class="aaa"> <a href="http://www.360kan.com/m/hqXnaRH4QXf0Sx.html"><img src="http://img.67.com/upload/images/2017/05/15/enhuMTQ5NDgwNzM2Ng==_2.jpg" alt=""></a> <a href="http://www.360kan.com/m/f6LnYRH4QXr4UR.html"><img src="http://n.sinaimg.cn/ent/transform/20170904/XOqx-fykpysa3179399.jpg" alt=""></a> </div> </body> </html>
aa.css:
img {
width: 300px;
}
div.img{
border: 1px solid #cccccc;
width: 180px;
float: left;
margin: 5px;
}
div.img img{
width: 100%;
height: auto;
}
div.desc{
text-align: center;
psdding:5px;
}
div.img:hover{
border: 1px solid #777777;
}
div.aaa{
clear: both;
}
标签：utf-8 图片文字 hover 实例 文件 == images pad load
原文地址：http://www.cnblogs.com/qisq/p/7698809.html
