标签：eee jpeg body html htm 选择器 sheet blog image
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>omg</title> <link rel="stylesheet" type="text/css" href="../static/css/202.css"> </head> <body> <div > <div class="img" > <a href=""> <img src="http://file26.mafengwo.net/M00/7E/E5/wKgB4lIuf3SAYD0bABI2F295q_Q73.jpeg"></a> <div class="desc"><a href="">丹东风景</a></div> </div> <div class="img"> <a href=""> <img src="http://file25.mafengwo.net/M00/FB/10/wKgB4lNwQ1eAXFr1AALE2JpaC-E02.jpeg"> <div class="desc"><a href="">毛里求斯风景</a></div> </div> <div class="img"> <a href=""> <img src="http://img1.qunarzz.com/travel/d2/201212/01/49eae9eeea2afb89ddb12cfb.jpg_r_480x360x95_ed9e0971.jpg"></a> <div class="desc"><a href="">九龙潭风景</a></div> </div> <div class="img" > <a href=""> <img src="http://file20.mafengwo.net/M00/87/12/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"></a> <div class="desc"><a href="">香港风景</a></div> </div> </div> <div class="clearfloat"> <img src="http://file26.mafengwo.net/M00/7E/E5/wKgB4lIuf3SAYD0bABI2F295q_Q73.jpeg"> <img src="http://file25.mafengwo.net/M00/FB/10/wKgB4lNwQ1eAXFr1AALE2JpaC-E02.jpeg"> <img src="http://img1.qunarzz.com/travel/d2/201212/01/49eae9eeea2afb89ddb12cfb.jpg_r_480x360x95_ed9e0971.jpg"> <img src="http://file20.mafengwo.net/M00/87/12/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"> </div> </body> </html>
img{
width:300px;
}
div.img{
border:1px solid #cccccc;
width:180px;
height:150px;
float:left;
margia:5px;
}
div.img img{
width:100%;
height:80%;
}
div.desc{
text-align:center;
padding:5px;
}
div.img:hover{
border:1px solid #777777;
}
.cleater float{
clear:both;
}
标签：eee jpeg body html htm 选择器 sheet blog image
原文地址：http://www.cnblogs.com/caoxinwen092/p/7698759.html
