桌面带单简单版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
margin: 32% auto;
}
.box:after{
content: '';
display: block;
height: 0;
}
ul{
position: absolute;
}
li{
float: left;
list-style: none;
padding: 10px;
width: 130px;
}
li a{
text-align: center;
display: inline;
float: left;
position: relative;
}
li a:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
li a:after{
content: attr(title);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#" title="网络"><img src="img/11.png"></a></li>
<li><a href="#" title="垃圾桶"><img src="img/3 (1).png"></a></li>
<li><a href="#" title="设置"><img src="img/4.png"></a></li>
<li><a href="#" title="文件夹"><img src="img/5.png"></a></li>
</ul>
</div>
</body>
</html>
相关知识：1.添加阴影box-shadow:0 2px 5px rgba(0,0,0,.3);
2.旋转一定的角度transform:rotate(5deg);
3.li:nth-child(3n)/li:nth-child(even)
