lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!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>
        .container {
            max-width: 980px;
            margin: 0 auto;
        }

        header,
        nav,
        footer {
            background-color: #999;
            color: white;
            font-size: 35px;
            font-weight: bold;
            text-align: center;
            height: 50px;
            line-height: 50px;
            margin-bottom: 20px;
        }

        .img-content img {
            width: 100%;
        }

        .img-content img:nth-child(2),
        .img-content img:nth-child(3) {
            display: none;
        }

        .content {
            display: flex;
            margin: 20px 0;
        }

        .content article {
            width: 0;
            flex-grow: 3;
            background-color: red;
            margin-right: 20px;
        }

        .content aside {
            width: 0;
            flex-grow: 2;
            background-color: blue;
        }

        @media screen and (max-width: 960px) {

            .img-content img:nth-child(1),
            .img-content img:nth-child(3) {
                display: none;
            }

            .img-content img:nth-child(2) {
                display: block;
            }
        }

        @media screen and (max-width: 480px) {

            .img-content img:nth-child(1),
            .img-content img:nth-child(2) {
                display: none;
            }

            .img-content img:nth-child(3) {
                display: block;
            }
            .content{
                display: block;
            }
            .content article{
                width: 100%;
                margin-bottom: 20px;
            }
            .content aside{
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>头部</header>
        <nav>导航</nav>
        <div class="img-content">
            <img src="./img/1.jpg" alt="980">
            <img src="./img/2.jpg" alt="960">
            <img src="./img/3.jpg" alt="480">
        </div>
        <div class="content">
            <article>IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 或者其他的HTML5 elements.IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用
                或者其他的HTML5 elements.</article>
            <aside>IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 或者其他的HTML5 elements.IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用
                或者其他的HTML5 elements.</aside>
        </div>
        <footer>底部</footer>
    </div>
</body>

</html>