图片列表 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/reset.css">
        <style type="text/css">
        /* 为body设置背景颜色 */
            body{
                background-color: #bfa;
            }
            
            /* 设置外部ul的样式 */
            .img-list{
                width: 190px;
                height: 470px;
                overflow: hidden;
                margin: 50px auto;
                background-color: #F4F4F4;
            }
            
            /* 设置li的位置 */
            .img-list li:not(:last-child){
                margin-bottom: 9px;
            }
            
            /* 设置图片的大小 */
            .img-list img{
                width: 100%;
            }
        </style>
    </head>
    <body>
        <ul class="img-list">
            <li>
                <a href="#">
                    <img src="img/1.jpg" >
                </a>
            </li>
            
            <li>
                <a href="#">
                    <img src="img/2.jpg" >
                </a>
            </li>
            
            <li>
                <a href="#">
                    <img src="img/3.jpg" >
                </a>
            </li>
        </ul>
    </body>
</html>

 

posted @ 2022-05-17 21:01  氯丙嗪  阅读(8)  评论(0)  编辑  收藏  举报