CSS京东图片列表

沈宫新

2020-04-20

CSS京东图片列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /*设置背景颜色*/
      body{
          background-color:antiquewhite;
      }
      /*消除 ul 本身的样式*/
     *{
         padding:0;
         margin:0;
     }
      /*设置 ul 的宽度和高度*/
      .img-list{
         width:190px;
         height:470px;
         overflow:hidden;
      }
      /*ul的高度470px,每一张图片的高度z50px，多余的20px集中在最下面的图片的下面*/
      .img-list li:not(:last-child){
          margin-bottom:9px;
      }
    </style>
</head>
<body>
    <ul class="img-list">
        <li>
                <a href="javascript:;">
                    <img src="./img/搜狗截图20年04月20日1016_1.png" >
                </a>
        </li>

        <li>
            <a href="javascript:;">
                <img src="./img/搜狗截图20年04月20日1016_2.png" >
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img src="./img/搜狗截图20年04月20日1017_3.png" >
            </a>
        </li>
    </ul>
</body>
</html>

沈宫新

0 关注 0 粉丝 0 动态

关注关注

安科网

CSS京东图片列表

沈宫新

沈宫新

沈宫新