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

fix:20

e 1 year ago
parent
69ade8ed51
commit
1b06538fdd
8 changed files with 232 additions and 0 deletions
Split View Show Diff Stats
  1. 81 0
      day20/css/6.小海豹.css
  2. 85 0
      day20/css/7.小海豹demo.css
  3. 21 0
      day20/html/6.小海豹.html
  4. 20 0
      day20/html/7.小海豹demo.html
  5. 25 0
      day20/html/padding-top.html
  6. BIN
      day20/img/1.jpg
  7. BIN
      day20/img/2.jpg
  8. BIN
      day20/img/3.jpg

+ 81 - 0
day20/css/6.小海豹.css
View File 

@@ -0,0 +1,81 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+h3 {
 
+    width: 960px;
 
+    height: 50px;
 
+    background: #ccc;
 
+    color: #000;
 
+    text-align: center;
 
+    line-height: 50px;
 
+    margin-bottom: 10px;
 
+}
 
+#img1 {
 
+    width: 960px;
 
+    margin: 24px auto 38px;
 
+    display: block;
 
+}
 
+#img2,#img3 {
 
+    display: none;
 
+}
 
+.main {
 
+    width: 960px;
 
+    margin: 10px auto;
 
+    overflow: hidden;
 
+}
 
+
 
+.left {
 
+    width: 630px;
 
+    height: 300px;
 
+    background: #f00;
 
+    float: left;
 
+}
 
+.right {
 
+    width: 320px;
 
+    height: 300px;
 
+    background: #00f;
 
+    float: right;
 
+}
 
+@media screen and (max-width:480px) {
 
+    #img1,#img2 {
 
+        display: none;
 
+    }
 
+    #img3 {
 
+        width: 100%;
 
+        display: block;
 
+    }
 
+    .main {
 
+        width: 100%;
 
+    }
 
+    .left {
 
+        width: 100%;
 
+    }
 
+    .right {
 
+        width: 100%;
 
+    }
 
+    h3 {
 
+        width: 100%;
 
+    }
 
+}
 
+@media screen and (min-width:960px) {
 
+    #img1,#img3 {
 
+        display: none;
 
+    }
 
+    #img2 {
 
+        width: 100%;
 
+        display: block;
 
+    }
 
+    .main {
 
+        width: 100%;
 
+    }
 
+    .left {
 
+        width: 63%;
 
+    }
 
+    .right {
 
+        width: 32%;
 
+    }
 
+    h3 {
 
+        width: 100%;
 
+    }
 
+}

+ 85 - 0
day20/css/7.小海豹demo.css
View File 

@@ -0,0 +1,85 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+h3 {
 
+    width: 960px;
 
+    height: 50px;
 
+    background: #ccc;
 
+    color: #000;
 
+    text-align: center;
 
+    line-height: 50px;
 
+    margin-bottom: 10px;
 
+}
 
+.main {
 
+    width: 960px;
 
+    margin: 10px auto;
 
+    overflow: hidden;
 
+}
 
+
 
+.left {
 
+    width: 630px;
 
+    height: 300px;
 
+    background: #f00;
 
+    float: left;
 
+}
 
+.right {
 
+    width: 320px;
 
+    height: 300px;
 
+    background: #00f;
 
+    float: right;
 
+}
 
+
 
+#imgBox {
 
+    width: 960px;
 
+    height: 500px;
 
+    background: url("../img/1.jpg");
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+}
 
+
 
+@media screen and (max-width:480px) {
 
+    #imgBox {
 
+        width: 100%;
 
+        height: 0px;
 
+        padding-top: 58%;
 
+        background: url(../img/3.jpg);
 
+        background-repeat: no-repeat;
 
+        background-size: contain;
 
+    }
 
+    h3 {
 
+        width: 100%;
 
+    }
 
+    .main {
 
+        width: 100%;
 
+    }
 
+    .left {
 
+        width: 100%;
 
+    }
 
+    .right {
 
+        width: 100%;
 
+    }
 
+}
 
+@media screen and (min-width:960px) {
 
+    #imgBox {
 
+        width: 100%;
 
+        height: 0px;
 
+        padding-top: 58%;
 
+        background: url(../img/2.jpg);
 
+        background-repeat: no-repeat;
 
+        background-size: contain;
 
+    }
 
+    h3 {
 
+        width: 100%;
 
+    }
 
+    .main {
 
+        width: 100%;
 
+    }
 
+    .left {
 
+        width: 63%;
 
+    }
 
+    .right {
 
+        width: 34%;
 
+    }
 
+}

+ 21 - 0
day20/html/6.小海豹.html
View File 

@@ -0,0 +1,21 @@
 
+<!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/6.小海豹.css">
 
+</head>
 
+<body>
 
+    <h3>页眉</h3>
 
+    <h3>导航</h3>
 
+    <img id="img1" src="../img/1.jpg" alt="">
 
+    <img id="img2" src="../img/2.jpg" alt="">
 
+    <img id="img3" src="../img/3.jpg" alt="">
 
+    <div class="main">
 
+        <div class="left"></div>
 
+        <div class="right"></div>
 
+    </div>
 
+    <h3>页尾</h3>
 
+</body>
 
+</html>

+ 20 - 0
day20/html/7.小海豹demo.html
View File 

@@ -0,0 +1,20 @@
 
+<!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/7.小海豹demo.css">
 
+</head>
 
+<body>
 
+    
+    <h3>页眉</h3>
 
+    <h3>导航</h3>
 
+    <div id="imgBox"></div>
 
+    <div class="main">
 
+        <div class="left"></div>
 
+        <div class="right"></div>
 
+    </div>
 
+    <h3>页尾</h3>
 
+</body>
 
+</html>

+ 25 - 0
day20/html/padding-top.html
View File 

@@ -0,0 +1,25 @@
 
+<!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;
 
+        }
 
+        #box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+        }
 
+        /* 
+            padding-top 百分比相当于视口的宽度
 
+        */
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+</body>
 
+</html>

BIN
day20/img/1.jpg
View File


BIN
day20/img/2.jpg
View File


BIN
day20/img/3.jpg
View File