Página inicial Explorar Ajuda
Entrar
lovecoding
/
VIP20
6
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

new

zsydgithub 2 anos atrás
pai
840885d297
commit
6f8ecbf1c1
9 arquivos alterados com 317 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 23 0
      9_移动端/1_test.html
  2. 47 0
      9_移动端/2_移动端常用的单位.html
  3. 28 0
      9_移动端/3_media.html
  4. 96 0
      9_移动端/4_小海豹.html
  5. 88 0
      9_移动端/5_小海豹2.html
  6. 35 0
      9_移动端/6_padding-top.html
  7. BIN
      9_移动端/img/1.jpg
  8. BIN
      9_移动端/img/2.jpg
  9. BIN
      9_移动端/img/3.jpg

+ 23 - 0
9_移动端/1_test.html
Ver arquivo 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 47 - 0
9_移动端/2_移动端常用的单位.html
Ver arquivo 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    html{
 
+      font-size: 50px;
 
+    }
 
+    #div1{
 
+      height: 200px;
 
+      width: 3rem;
 
+      background: red;
 
+      font-size: 100px;
 
+    }
 
+    /* rem  相对于根元素html的字体大小 */
 
+    /* em   相对于父元素的字体大小 */
 
+    #div2{
 
+      /* width: 2em;
 
+      height: 100px; */
 
+      background: yellow;
 
+      /* width: 50vw;
 
+      height: 50vw; */
 
+      width: 50%;
 
+      height: 50%;
 
+    }
 
+    #div3{
 
+      width: 100%;
 
+      height: calc(100vh - 100px);
 
+      background: blue;
 
+    }
 
+    /* vw vh 相对于设备 或者  视口 */
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+  <div id="div3"></div>
 
+</body>
 
+</html>

+ 28 - 0
9_移动端/3_media.html
Ver arquivo 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      background: red;
 
+      height: 200px;
 
+    }
 
+    @media screen and (max-width:800px){
 
+      #div1{
 
+        background: green;
 
+      }
 
+    }
 
+    @media screen and (max-width:400px) {
 
+        #div1{
 
+          background: pink;
 
+        }
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 96 - 0
9_移动端/4_小海豹.html
Ver arquivo 

@@ -0,0 +1,96 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    h3{
 
+      width: 980px;
 
+      height: 50px;
 
+      background: #cccccc;
 
+      text-align: center;
 
+      line-height: 50px;
 
+      margin: 0 auto 10px;
 
+    }
 
+    #content{
 
+      width: 980px;
 
+      margin: 10px auto;
 
+      overflow: hidden;
 
+    }
 
+    #img1{
 
+      width: 980px;
 
+      margin: 0 auto;
 
+      display: block;
 
+    }
 
+    #img2,#img3{
 
+      display: none;
 
+    }
 
+    #left{
 
+      width: 630px;
 
+      height: 300px;
 
+      background: red;
 
+      float: left;
 
+    }
 
+    #right{
 
+      width: 340px;
 
+      height: 300px;
 
+      background: blue;
 
+      float: right;
 
+    }
 
+    @media screen and (max-width: 960px) {
 
+      #img1,#img3{
 
+        display: none;
 
+      }
 
+      h3{
 
+        width: 100%;
 
+      }
 
+      #img2{
 
+        display: block;
 
+        width: 100%;
 
+      }
 
+      #content{
 
+        width: 100%;
 
+      }
 
+      #left{
 
+        width: 65%;
 
+      }
 
+      #right{
 
+        width: 34%;
 
+      }
 
+    }
 
+    @media screen and (max-width: 480px) {
 
+      #img1,#img2{
 
+        display: none;
 
+      }
 
+      #img3{
 
+        display: block;
 
+        width: 100%;
 
+      }
 
+      #left{
 
+        width: 100%;
 
+      }
 
+      #right{
 
+        width: 100%;
 
+      }
 
+    }
 
+  </style>
 
+</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 id="content">
 
+    <div id="left"></div>
 
+    <div id="right"></div>
 
+  </div>
 
+  <h3>页尾</h3>
 
+</body>
 
+</html>

+ 88 - 0
9_移动端/5_小海豹2.html
Ver arquivo 

@@ -0,0 +1,88 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    h3{
 
+      width: 980px;
 
+      height: 50px;
 
+      background: #cccccc;
 
+      text-align: center;
 
+      line-height: 50px;
 
+      margin: 0 auto 10px;
 
+    }
 
+    #content{
 
+      width: 980px;
 
+      margin: 10px auto;
 
+      overflow: hidden;
 
+    }
 
+    #left{
 
+      width: 630px;
 
+      height: 300px;
 
+      background: red;
 
+      float: left;
 
+    }
 
+    #right{
 
+      width: 340px;
 
+      height: 300px;
 
+      background: blue;
 
+      float: right;
 
+    }
 
+    #imgBox{
 
+      width: 980px;
 
+      height: 550px;
 
+      background: url(img/1.jpg) 0 0 no-repeat;
 
+      background-size: 100% 100%;
 
+      margin: 0 auto;
 
+    }
 
+    @media screen and (max-width: 960px) {
 
+      h3{
 
+        width: 100%;
 
+      }
 
+      #content{
 
+        width: 100%;
 
+      }
 
+      #left{
 
+        width: 65%;
 
+      }
 
+      #right{
 
+        width: 34%;
 
+      }
 
+      #imgBox{
 
+        width: 100%;
 
+        background-image: url(img/2.jpg);
 
+        padding-top: 56%;
 
+        height: 0;
 
+      }
 
+    }
 
+    @media screen and (max-width: 480px) {
 
+      #left{
 
+        width: 100%;
 
+      }
 
+      #right{
 
+        width: 100%;
 
+      }
 
+      #imgBox{
 
+        background-image: url(img/3.jpg);
 
+      }
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <h3>页眉</h3>
 
+  <h3>导航</h3>
 
+  <div id="imgBox"></div>
 
+  <div id="content">
 
+    <div id="left"></div>
 
+    <div id="right"></div>
 
+  </div>
 
+  <h3>页尾</h3>
 
+</body>
 
+</html>

+ 35 - 0
9_移动端/6_padding-top.html
Ver arquivo 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      background: red;
 
+      /* width: 50%;
 
+      height: 100px; */
 
+      /* width: 50vw;
 
+      height: 50vw; */
 
+
 
+      width: 100%;
 
+      /* height: 50px; */
 
+      padding-top: 50%;
 
+
 
+      /* padding-top  百分比  相对于 父元素的宽度 */
 
+      /* 
+      960宽度      540高度
 
+      100%         56%
 
+      */
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

BIN
9_移动端/img/1.jpg
Ver arquivo


BIN
9_移动端/img/2.jpg
Ver arquivo


BIN
9_移动端/img/3.jpg
Ver arquivo