(017)layout_横向图文列表 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>li_image_word.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../common/reset.css">
    <style type="text/css">
        #layout ul {list-style-type: none;}
        img {border:0;}
        a {color:#05a; text-decoration:none;}
        a:hover {color:#f00;}
        #layout {width:500px; border:2px solid #ccc; padding:3px; overflow:auto; zoom:1; margin-left:20px;}
        #layout ul li {width:72px; display:inline; float:left; text-align:center; margin:20px 0 0 20px;}
        #layout ul li a {display:block;}
        #layout ul li a img {padding:1px; border:1px solid #e1e1e1; margin-bottom:2px;}
        #layout ul li a:hover img {padding:0px; border:2px solid #f98510;}
    </style>
    <script type="text/javascript">
        /*
        window.onload = function() {
            var layoutNode = document.getElementById("layout");
            var ulNode = layoutNode.getElementsByTagName("ul")[0];
            var liNodes = ulNode.getElementsByTagName("li");
            for(var i = 0; i < liNodes.length; i++) 
            {
                var aNode = liNodes[i].getElementsByTagName("a")[0];
                aNode.onclick = function() {
                    var imgNode = this.getElementsByTagName("img")[0];
                    imgNode.style.borderWidth = "3px";
                    imgNode.style.borderColor = "#f98510";
                };
            }
        };
        */
    </script>
  </head>
  
  <body>
          <div id="layout">
              <ul>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
                  <li><a href="#"><img src="../image/pic.jpg" width="68" height="54" />三亚</a></li>
              </ul>
          </div>
  </body>
</html>

-------------------------------------------------------

IE6的双倍边距bug
这又是IE6一个著名的bug，也是我们经常遇到的。如上例，当浮动后设置左侧外边距时后，最左侧将显示为双倍边距，比如设置为20，而在IE6下却显示40px，解决这个问题只需应用一个样式

文章出处：标准之路(http://www.aa25.cn)

posted @ 2015-01-30 15:35  雪中飞雁  阅读(98)  评论(0)    收藏  举报