Home Explore Help
Sign In
lovecoding
/
VIP26
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix:day5

e 1 year ago
parent
1071632a78
commit
6ae0511b46
4 changed files with 182 additions and 0 deletions
Split View Show Diff Stats
  1. 89 0
      day5/css/index.css
  2. 41 0
      day5/html/index.html
  3. BIN
      day5/images/banner.png
  4. 52 0
      day5/复习.html

+ 89 - 0
day5/css/index.css
View File 

@@ -0,0 +1,89 @@
 
+/* 通配符选择器 设置全局 */
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    text-decoration: none;
 
+    list-style: none;
 
+    box-sizing: border-box;
 
+}
 
+/* 头部样式 */
 
+.head {
 
+    width: 1000px;
 
+    height: 50px;
 
+    background: #00f;
 
+    margin: 0 auto;
 
+}
 
+/* 主体样式 */
 
+.main {
 
+    width: 100%;
 
+}
 
+.nav {
 
+    width: 100%;
 
+    background: #00f;
 
+}
 
+.navMain {
 
+    width: 1000px;
 
+    height: 40px;
 
+    background: #f00;
 
+    margin: 0 auto;
 
+}
 
+.banner {
 
+    width: 100%;
 
+    height: 474px;
 
+    background: url('../images/banner.png') no-repeat;
 
+    background-size: cover;
 
+}
 
+.activity {
 
+    width: 100%;
 
+    height: 328px;
 
+    background: #00f;
 
+    margin-top: 15px;
 
+}
 
+.activityMain {
 
+    width: 1000px;
 
+    height: 100%;
 
+    margin: 0 auto;
 
+    background: #ff0;
 
+}
 
+.list {
 
+    width: 100%;
 
+    height: 300px;
 
+    background: #0ff;
 
+    margin-top: 90px;
 
+}
 
+.listMain {
 
+    width: 1000px;
 
+    height: 100%;
 
+    margin: 0 auto;
 
+    background: #0f0;
 
+}
 
+.features {
 
+    width: 100%;
 
+    height: 360px;
 
+    background: #f0f;
 
+    margin-top: 40px;
 
+}
 
+.featuresTop {
 
+    width: 100%;
 
+    height: 100px;
 
+    background: #00f;
 
+}
 
+.featuresBottom {
 
+    width: 1000px;
 
+    height: 260px;
 
+    background: #0f0;
 
+    margin: 0 auto;
 
+}
 
+/* 页尾内容 */
 
+.footer {
 
+    width: 100%;
 
+    height: 337px;
 
+    background: #00f;
 
+    margin-top: 89px;
 
+}
 
+.footerMain {
 
+    width: 1000px;
 
+    height: 100%;
 
+    background: #ff0;
 
+    margin: 0 auto;
 
+}

+ 41 - 0
day5/html/index.html
View File 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/index.css">
 
+</head>
 
+<body>
 
+    <div>
 
+        <!-- 头部内容 -->
 
+        <div class="head"></div>
 
+        <!-- 主体内容 -->
 
+        <div class="main">
 
+            <!-- 导航栏 -->
 
+            <div class="nav">
 
+                <div class="navMain"></div>
 
+            </div>
 
+            <!-- 广告图 -->
 
+            <div class="banner"></div>
 
+            <!-- 广告活动 -->
 
+            <div class="activity">
 
+                <div class="activityMain"></div>
 
+            </div>
 
+            <!-- 景点列表 -->
 
+            <div class="list">
 
+                <div class="listMain"></div>
 
+            </div>
 
+            <!-- 旅游特色 -->
 
+            <div class="features">
 
+                <div class="featuresTop"></div>
 
+                <div class="featuresBottom"></div>
 
+            </div>
 
+        </div>
 
+        <!-- 页尾内容 -->
 
+        <div class="footer">
 
+            <div class="footerMain"></div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

BIN
day5/images/banner.png
View File


+ 52 - 0
day5/复习.html
View File 

@@ -0,0 +1,52 @@
 
+<!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>
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 2px solid #000; 
+            padding: 20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        盒模型：
 
+            1.标准盒模型 box-sizing:content-box;
 
+            2.怪异盒模型（IE盒模型）box-sizing:border-box;
 
+     -->
 
+     <!-- 
+        margin:外边距 复合属性 
+        padding:内边距
 
+      -->
 
+      <!-- 
+        浮动:float
 
+        1.溢出隐藏法 overflow:hidden|auto;
 
+        2.额外标签法 clear:both|left|right|none;
 
+        3.伪元素清浮动 .clearfix::after{
 
+            content:"",
 
+            clear:both,
 
+            display:block;
 
+        }
 
+       -->
 
+       <!-- 
+        display:block;将元素转成块元素
 
+        display:inline；将元素转成行内元素
 
+        display:inline-block;将元素转成行内块元素
 
+        -->
 
+        <!-- 
+            选择器的优先级
 
+            ！important 正无穷
 
+            内联（行内） 1,0,0,0
 
+            id选择器  0,1,0,0
 
+            类选择器 = 伪类选择器 = 属性选择器 0,0,1,0
 
+            标签选择器 = 伪元素选择器 0,0,0,1 
+            通配符选择器 * 0,0,0,0
 
+         -->
 
+     <div></div>
 
+</body>
 
+</html>