CSS_照片墙例子 相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style type="text/css">
body{
background-color: #066
}
ul{
/*border: 1px solid red;*/
width: 780px;
margin: 20px auto;
/*去掉前边的符号*/
list-style-type: none;
}
li{
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
float: left;
background-color: #fff;
}
p{
text-align: center;
font-family: "微软雅黑","文泉驿正黑","黑体"
}
/*鼠标悬停时，让li向右上方偏移2px，从而实现抖动的效果*/
li:HOVER {
position: relative;
left:2px;
top:-2px;
}
</style>
</head>
<body>
<ul>
<li>
<img alt="" src="../images/01.jpg">
<p>西天取经师徒</p>
</li>
<li>
<img alt="" src="../images/02.jpg">
<p>大唐高僧唐三藏</p>
</li>
<li>
<img alt="" src="../images/03.jpg">
<p>花果山齐天大圣</p>
</li>
<li>
<img alt="" src="../images/04.jpg">
<p>高老庄天蓬元帅</p>
</li>
<li>
<img alt="" src="../images/05.jpg">
<p>流沙河卷帘大将</p>
</li>
<li>
<img alt="" src="../images/06.jpg">
<p>西海八部天龙</p>
</li>
</ul>
</body>
</html>
