|
|
@@ -0,0 +1,87 @@
|
|
|
+<!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>
|
e
