標籤：style class blog java color get
<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
