添加样式

whutglc · Jan 1, 2019 · 4d5e78a · 4d5e78a
1 parent 7b68f3c
commit 4d5e78a
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git a/原生js实现路由/css/main.css b/原生js实现路由/css/main.css
@@ -0,0 +1,52 @@
+
+* {
+    padding: 0;
+    margin: 0;
+}
+a {
+    text-decoration: none;
+    color: #ffffff;
+}
+.header {
+    width: 100%;
+    height: 100px;
+    background-color: rgb(198, 195, 212);
+    text-align: center;
+    line-height: 100px;
+    color: #865a5a;
+}
+.section_left {
+    width: 16%;
+    height: 500px;
+    float: left;
+    background-color: rgb(173, 145, 145);
+}
+.section_left ul li {
+    list-style: none;
+    width: 100%;
+    height: 50px;
+    border-bottom: 1px solid #ffffff;
+    text-align: center;
+    line-height: 50px;
+}
+.sidebar_right {
+    width: 78%;
+    float: right;
+    height: 470px;
+    background-color: rgb(105, 90, 90);
+    margin-right: 3%;
+    margin-top: 15px;
+    text-align: center;
+    line-height: 470px;
+    border-radius: 10px;
+    color: #e6cdcd;
+}
+.footer {
+    width: 100%;
+    height:100px;
+    background-color: rgb(190, 195, 216);
+    clear: both;
+    text-align: center;
+    line-height: 100px;
+    color: #925959;
+}
diff --git a/原生js实现路由/index.html b/原生js实现路由/index.html
@@ -8,7 +8,34 @@
     <link rel="stylesheet" href="./css/main.css">
 </head>
 <body>
-
+    <header class="header">
+        <h1>我是头部</h1>
+    </header>
+    <!-- 左侧导航栏 -->
+    <section class="section_left">
+        <ul>
+            <li>
+                <a href="#/">这是默认菜单</a>
+            </li>
+            <li>
+                <a href="#/html">HTML学习</a>
+            </li>
+            <li>
+                <a href="#/css">CSS学习</a>
+            </li>
+            <li>
+                <a href="#/javascript">Javascript学习</a>
+            </li>
+        </ul>
+    </section>
+    <!-- 右侧内容显示区域 -->
+    <sidebar class="sidebar_right">
+        <h1>我是默认内容</h1>
+    </sidebar>
+    <!-- 底部 -->
+    <footer class="footer">
+        <h1>我是底部</h1>
+    </footer>
 </body>
 <script src="./js/main.js"></script>
 </html>