九宫格效果一

最新推荐文章于 2019-04-20 22:58:57 发布

JhonPang

最新推荐文章于 2019-04-20 22:58:57 发布

阅读量476

点赞数

文章标签：代码

本文链接：https://blog.csdn.net/codingdoubleb/article/details/50300939

版权

一个简单的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>