F-8">
<title>img</title>
<link rel="stylesheet" type="text/css" href="hh.css">
</head>
<body>
<div class="oop">
<div class="img">
<a href="http://movie.com">
<img src=http://photocdn.sohu.com/pvrs/background/e2/52/a806ae6a55975b360e9914ce67a3b547d82f.jpg>
<div class="desc"><a href="http://movie.com">科幻电影</a></div>
</div>
<div class="img">
<a href="http://.com">
<img src=http://p3.ifengimg.com/a/2017_20/c88ff0f527ccba0_size101_w600_h333.jpg>
<div class="desc"><a href="http://jianshu.com">电视节目</a></div>
</div>
<div class="img">
<a href="http://school.com">
<img src="http://www.jmsjs.com/files/1207/gaozhizhaosheng/%B6%E0%B2%CA%D0%A3%D4%B0/%B6%E0%B2%CA%D0%A3%D4%B0/20%B9%FA%C6%EC%BB%A4%CE%C0%B6%D3_%B5%F7%D5%FB%B4%F3%D0%A1.jpg">
<div class="desc"><a href="http://jianshu.com">校园风采</a></div>
</div>
<div class="img">
<a href="http://cartoon.com">
<img src="http://p2.so.qhimgs1.com/t019a5fd71bd7e4398e.jpg"></a>
<div class="desc"><a href="http://jianshu.com">动漫图片</a></div>
</div>
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;
padding: 5px;
}
div.img:hover{
border: 1px solid #111111;
}