my-blog
/
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>韦小金作品展示集</title>
        <style>
            body{
                text-align:center;
                background-color: #f3f5f8;
                background-size: 100% 100%;
            }
            .display-header{
                max-width: 900px;
                margin-right: auto;
                margin-left: auto;
            }
            .display-box{
                max-width: 900px;
                margin-right: auto;
                margin-left: auto;
            }
            .display-box ul{
                float:left;
                list-style: none;
            }
            .display-box .display-item{
                width:30%;
                max-width:300px;
                float:left ;
                padding:10px;
            }
            .display-box .display-item img{
                width: 100%;
                border-radius: 5px;
                box-shadow: 2px 2px 20px 0px #18182652;
                -webkit-box-shadow: 2px 2px 20px 0px #18182652;
                -moz-box-shadow: 2px 2px 20px 0px #18182652;
                -o-box-shadow: 2px 2px 20px 0px #18182652;
            }
        </style>
    </head>
    <body>
        <article>
            <header class="display-header">
                <h1>韦小金作品展示</h1>
                <p>自由的身心定能使我成为一个一直朝前行走的行者</p>
            </header>

            <div class="display-box">
                <ul>
                    <li class="display-item"><img src="./01_display/chaoxing.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/zhaoping.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/meiyueshiren.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/hanfu.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/weidianying.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/qiushou.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/paotui.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/shouhui3.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/xuanchuang.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/dianying.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/shouhui.jpg" alt=""></li>
                    <li class="display-item"><img src="./01_display/shouhui2.jpg" alt=""></li>
                </ul>
            </div>

        </article>

    </body>
</html>