九宫格效果一

一个简单的html布局，具体可看上传文件，代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>九宫格效果</title>
<style type="text/css">
*{ 
margin:0;
padding: 0;
list-style: none;
}
a,img{ 
border: 0;
}
.box{ 
width: 570px;
height: auto;
margin:10% 30%;
overflow: hidden;
background-color: #EED2EE;
}
.box ul{ 
width: 570px;
height: 330px;
float: left;
overflow: hidden;
position: relative;
}
.box li{
width: 180px;
height: 100px;
position: relative;
float: left;
border-right: 10px  solid #fff;
border-bottom:10px solid #fff; 
}
.box li img{ 
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.box li img .default{ 


}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="E:\GitHub\PASS\images\1.png" width="180" height="100" class="default" />
</li>
<li>
<img src="E:\GitHub\PASS\images\2.png" width="180" height="100" class="default" />
</li>
<li>
<img src="E:\GitHub\PASS\images\3.png" width="180" height="100" class="default" />
</li>
<li>
<img src="E:\GitHub\PASS\images\calculus_1.jpg" width="180" height="100" class="default" />
</li>
<li>
<img src="images/zzsc05.jpg" width="180" height="100" class="default" />
</li>
<li>
<img src="images/zzsc06.jpg" width="180" height="100" class="default" />
</li>
<li>
<img src="images/zzsc07.jpg" width="180" height="100" class="default" />
</li>
<li>
<img src="images/zzsc08.jpg" width="180" height="100" class="default" />
</li>
<li>
<img src="images/zzsc09.jpg" width="180" height="100" class="default" />
</li>
</ul>
</div>
</body>
</html>