九宫格

<!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>

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>

posted on 2014-10-08 10:46 Seven、阅读(173) 评论(0) 编辑收藏举报