lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!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>
        * {
            margin: 0;
            padding: 0;
        }
        h3 {
            width: 100%;
            height: 50px;
            font-size: 24px;
            font-weight: bold;
            line-height: 50px;
            text-align: center;
            background: #ccc;
            margin-bottom: 10px;
        }
        #imgBox {
            width: 100%;
            height: 300px;
            background: url('./images/3.jpg') no-repeat;
            background-position: center;
        }
        #main {
            width: 100%;
            margin: 10px auto;
        }
        .sideBar {
            width: 100%;
            height: 200px;
            background: #0f0;
        }

        .container {
            width: 100%;
            height: 200px;
            background: plum;
        }
        @media screen and (min-width:480px) {
        #imgBox {
            width: 100%;
            height: 500px;
            background: url('./images/1.jpg') no-repeat;
            background-position: center;
        }
        #main {
            width: 100%;
            margin: 10px auto;
            overflow: hidden;
        }
        .sideBar {
            width: 65vw;
            height: 200px;
            background: #0f0;
            float: left;
        }

        .container {
            width: 30vw;
            height: 200px;
            background: plum;
            float: right;
        }

        }
        @media screen and (min-width:960px) {
        #imgBox {
            width: 100%;
            height: 600px;
            background: url('./images/2.jpg') no-repeat;
            background-position: center;
            background-size: cover;
        }
        #main {
            width: 100%;
            margin: 25px auto;
            overflow: hidden;
        }
        .sideBar {
            width: 65vw;
            height: 200px;
            background: #ff0;
            float: left;
        }

        .container {
            width: 30vw;
            height: 200px;
            background: plum;
            float: right;
        }

        }
    </style>
</head>
<body>
    <h3>页眉</h3>
    <h3>导航</h3>
    <div id="imgBox"></div>
    <div id="main">
        <div class="sideBar"></div>
        <div class="container"></div>
    </div>
    <h3>页尾</h3>
</body>
</html>