图片列表

作者: 蔚来天空 | 来源:发表于2018-09-12 23:31 被阅读0次

08.HTML列表
2018-08-15
06.CSS列表
Flutter Hero/FadeTransition动画
MarkDown语法（有图片对比更易学）
图片列表
图片列表
图片列表
ul
MarkDown语法

运用：盒模型、浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片列表</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0
        }
        .box{
            width: 960px;
            height: 269px;
            border: 1px solid black;
            margin: 100px auto;

        }
        .box1{
            display: inline-block;
            width: 100px;
            height: 50px;
            font:18px '雅黑' #000;
            border-bottom: 2px solid red;
            margin-left: 20px;
            text-align: center;
            line-height: 50px;

        }
        .box2{
            width: 920px;
            height: 219px;
            border-top: solid 1px black;
            margin:0 auto;
        }
        .p1{
            margin-top:20px;
        }
        .p2{
            margin-left: 24px;
            margin-right: 24px;
        }
        .p4{
            margin-left: 24px;
            margin-right: 24px;
        }
        
        .p6{
            margin-top: 30px;
        }
        .p7{
            margin-left: 24px;
            margin-right: 24px;
        }
        .p9{
            margin-left: 24px;
            margin-right: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
        <span>图片展示</span>
        </div>
        <div class="box2">
            <img class = 'p1' src="goods.jpg" alt="">
            <img class = 'p2' src="goods.jpg" alt="">
            <img class = 'p3' src="goods.jpg" alt="">
            <img class = 'p4' src="goods.jpg" alt="">
            <img class = 'p5' src="goods.jpg" alt="">

            <img class = 'p6' src="goods.jpg" alt="">
            <img class = 'p7' src="goods.jpg" alt="">
            <img class = 'p8' src="goods.jpg" alt="">
            <img class = 'p9' src="goods.jpg" alt="">
            <img class = 'p10' src="goods.jpg" alt="">
        </div>
    </div>
</body>
</html>

图片列表.png