首页 > 代码库 > 九宫格
九宫格
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nine Grid</title>
<style>
ul {
width: 165px;
padding: 30px;
}
ul li{
float: left;
list-style: none;
position: relative;
}
li a {
display: block;
width: 50px;
height: 50px;
border: 5px solid blue;
margin-left: -5px;
margin-top: -5px;
}
a:hover {
position: relative;
border-color: red;
z-index: 100;
}
.fn-clear:after{
visibility: hidden;
display: block;
content: ‘ ‘;
clear: both;
}
.fn-clear{
*zoom: 1;
}
</style>
</head>
<script>
function changeWidth() {
var items = document.getElementsByTagName("aaa");
var globHeight = document.documentElement.clientWidth;
var ulObject = document.getElementById("ulId");
//ulObject.style.width="500px";
//.style.width=globHeight
var aHeight = (globHeight/3)-5;
for(var i=0;i<items.length;i++){
items[i].style.width=aHeight;
}
}
changeWidth();
//alert(document.documentElement.clientHeight);
</script>
<body>
<div id=‘imageMenu‘ style="width:100%">
<ul class="fn-clear" id=‘ulId‘>
<li><a name=‘aaa‘ href="" class="1"></a></li>
<li><a href="" class="1"></a></li>
<li><a href="" class="1"></a></li>
<li><a href="" class="1"></a></li>
<li><a href="" class="1"></a></li>
<li><a href="" class="1"></a></li>
<li><a href="" class="1"></a></li>
<li><a href="" class="1"></a></li>
<li><a href="" class="1"></a></li>
</ul>
</div>
</body>
</html>
九宫格