lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!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;
            list-style: none;
            text-decoration: none;
            box-sizing: border-box;
        }
        #box {
            display: flex;
            flex-direction: column;
        }
        #header {
            width: 100%;
            height: 58px;
            background: #00f;
        }
        #header .container {
            width: 1200px;
            height: 100%;
            background: #0f0;
            margin: 0 auto;
            display: flex;
        }
        #header .container .logo {
            width: 138px;
            height: 40px;
            background: #ff0;
            background: url('./images/1.png');
            margin-top: 18px;
        }
        #header .container .nav {
            width: 514px;
            height: 100%;
            background: plum;
        }
        #header .container .nav ul {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        #header .container .nav ul li {
            /* flex: 1; */
        }
        #main {
            width: 100%;
            flex: 1;
            background: #f00;
        }
        #footer {
            width: 100%;
            height: 647px;
            background: #ff0;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="header">
            <div class="container">
                <div class="logo"></div>
                <div class="nav">
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="main">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>