html部分
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>公会驻地</title>
<link rel="stylesheet" type="text/css" href="css练习.css">
</head>
<div id="movieList" class="mainBox">
<ul>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
<li id="1" class="movieInfo">
<a target="_blank" href="img_fjords.jpg"><div class="img">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">电影的名字</div>
</div></a>
</li>
</ul>
</div>
</body>
</html>
CSS部分
@charset "UTF-8";
/* CSS Document */
/*统一设置连接的样式*/
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:none;} /* mouse over link */
a:active {text-decoration:none;} /* selected link */
/*设置主box的宽度*/
.mainBox {
width:100%;
background-color:red;
}
/*去掉列表小点，并设置相对宽度*/
.mainBox ul {
list-style-type:none;
width:100%;
}
/*设置每个列表元素横铺，宽度按是ul的四分之一*/
.mainBox li {
float:left;
width:33.3%;
margin-bottom:10px;
margin-top:10px;
}
/*设置整个li背景样式*/
div.img {
width: 90%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius:8px;
margin-left:5%;
}
/*鼠标放到li上时的变化*/
div.img:hover {
transform:scale(1.03,1.03);
-moz-transform:scale(1.03,1.03);
-webkit-transform:scale(1.03,1.03);
}
/*鼠标放到li上时的变化*/
div.img:active {
transform:scale(1.03,1.03);
-moz-transform:scale(1.03,1.03);
-webkit-transform:scale(1.03,1.03);
}
/*设置li中图片的样式*/
div.img img {
width:100%;
height:auto;
border-top-left-radius:8px;
border-top-right-radius:8px;
}
/*li中文字的样式*/
div.desc {
padding:10px;
text-align:center;
color:#000;
}
*{
padding:0;
margin:0;
}