machinecat520
/
zj-Exercise


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片的列表</title>
    <link rel="stylesheet" href="css/reset.css">
    <!-- 
        想通过外边距控制元素的位置时，最好通过块元素，不要通过行内元素或行内块来调整
     -->
    <style>
        /* 设置body的背景颜色 */
        body{
            background-color: antiquewhite;
        }
        /* 设置外部ul的样式 */
        .img-list {
            /* 设置ul的宽度 */
            width: 190px;
            /* 设置ul的高度 */
            height: 470px;
            /* 裁剪溢出的内容 */
            overflow: hidden;
            /* 使ul在页面中居中（实际实例中不需要这么写） */
            margin: 50px auto;
            background-color: #f4f4f4;
        }
        /* 设置li的位置 */
        .img-list li{
            margin-bottom: 9px;
        }

        /* 设置图片的大小 */
        .img-list img{
            width: 100%;
        }

    </style>
</head>

<body>

    <!-- <div>
        <a href="javascript:;"><img src="images/练习图片1-1.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/练习图2-2.webp" alt=""></a>
        <a href="javascript:;"><img src="images/练习图片3-1.jpg" alt=""></a>
    </div> -->

    <ul class="img-list">
        <li>
            <a href="javascript:;">
                <img src="images/01.png" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/02.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/03.jpg" alt="">
            </a>
        </li>
    </ul>

</body>

</html>