双倍边距bug

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <style> *{margin: 0; padding: 0;}
li{width: 59px;
height: 87px;
float: left;
margin: 20px;
background: #333333;
position: relative;
list-style: none; }

/**display:inline;zoom:1   *vertical:top margin: 20px;改成 margin:0 20px;如果给ul浮动就没事了 双倍边距bug的条件 浮动 外编剧 块状元素 解决双倍边距bug
#div1{width: 594px; margin: 50px; border-top:1px solid #333;} #div1 ul li div{
width: 232px;
height: 143px;
background: #666666 url("img/tip.png") no-repeat;
position: absolute;
top: -150px;
left: 20px;
display: none; }
</style> <script> window.onload=function(){
var aLi= document.getElementsByTagName("li")
for(var i=0; i<aLi.length;i++){
aLi[i].onmouseover=function(){
this.getElementsByTagName("div")[0].style.display="block"; }
aLi[i].onmouseout=function(){
this.getElementsByTagName("div")[0].style.display="none"; }
}
} </script>
</head>
<body>
<h1>最新上线</h1>
<div style="1px solid #000;" id="div1"> <ul class="ul1">
<li><img src="img/1.png" ><div></div></li>
<li><img src="img/2.png"><div></div></li>
<li><img src="img/3.png"><div></div></li>
<li><img src="img/4.png" ><div></div></li>
<li><img src="img/5.png" ><div></div></li>
<li><img src="img/6.png" ><div></div></li>
</ul>
<ul class="ul1">
<li><img src="img/7.png"><div></div></li>
<li><img src="img/8.png"><div></div></li>
<li><img src="img/9.png"><div></div></li>
<li><img src="img/10.png"><div></div></li>
<li><img src="img/11.png"><div></div></li>
<li><img src="img/12.png"><div></div></li>
</ul> </div> </body>
</html>

  

上一篇:java线程池的原理及实现


下一篇:Swift: 下标(Subscripts)