DIV+CSS程式設計中各瀏覽器相容問題
阿新 • • 發佈：2018-11-28
程式碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> body{ margin:0px; padding:0px; } .contain { width:980px; height:120px; padding:0px; margin:10px; background-position:center; background:URL("adv.png") no-repeat top; position:relative; } ul{ height:105px; width:925px; margin:0px; list-style:none; padding:0px; } li{ float:left; width:295px; height:105px; margin-left:10px; position: relative; padding:0px; } li div{ height:100px; width:290px; cursor:pointer; float:left; margin:0px; padding:0px; } .adv{ width:110px; height:26px; position: absolute; left:1px; top:87px; background:URL("adv2.jpg"); margin:0px; padding:0px; } .adv:hover{ background:URL("adv1.png"); } </style> </head> <body> <center> <div class="contain"> <ul> <li><a href="javascript:alert('1');"><div> <div class="adv" style="left:81px;"></div> </div></a></li> <li><a href="javascript:alert('2');"><div> <div class="adv" style="left:99px;"></div> </div></a></li> <li><a href="javascript:alert('3');"><div> <div class="adv" style="left:108px;"></div> </div></a></li> </ul> </div> </center> </body> </html>
效果圖：
標籤包裹問題一定要注意postion：relative；樣式