css图片对齐排版思路

最新推荐文章于 2021-08-30 20:26:02 发布

weixin_33963594

最新推荐文章于 2021-08-30 20:26:02 发布

阅读量787

点赞数

文章标签： python

原文链接：https://my.oschina.net/LiyuhaoDev/blog/64497

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<style>
ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#imgList {
  width: 560px;
  overflow:hidden;
  zoom: 1;
  border: 1px solid #333;
  margin: auto;
  padding: 0 0 10px 10px;
}

#imgList li {
  float: left;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  margin: 10px 10px 0 0;
}

#imgList li img {
  float: left;
  cursor: crosshair;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

#imgList li.current img {
  opacity: 1;
  filter: alpha(opacity=100);
}
</style>
<script>
window.onload = function() {
  var oLi = document.getElementsByTagName("li");
  for (var i = 0; i < oLi.length; i++) {
    oLi[i].onmouseover = function() {
      this.className = "current";
    }
    oLi[i].onmouseout = function() {
      this.className = "";
    }
  }
}
</script>
</head>
<body>
  <div id="imgList">
    <ul>
      <li><img src="1.jpg"/></li>
      <li><img src="2.jpg"/></li>
      <li><img src="3.jpg"/></li>
      <li><img src="4.jpg"/></li>
      <li><img src="5.jpg"/></li>
      <li><img src="6.jpg"/></li>
      <li><img src="7.jpg"/></li>
      <li><img src="8.jpg"/></li>
      <li><img src="9.jpg"/></li>
      <li><img src="10.jpg"/></li>
    <ul>
  </div>
</body>
</html>

其中 margin 和 padding 的设计思路值得借鉴：

#imgList {
  width: 560px;
  overflow:hidden;
  zoom: 1;
  border: 1px solid #333;
  margin: auto;
  padding: 0 0 10px 10px;
}

#imgList li {
  float: left;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  margin: 10px 10px 0 0;
}

转载于:https://my.oschina.net/LiyuhaoDev/blog/64497