首页 发现 帮助
登录
lovecoding
/
Web1020
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

admin

fengchuanyu 2 月之前
父节点
f4df166648
当前提交
bfd4f9ebfa
共有 11 个文件被更改，包括 204 次插入 和 0 次删除
合并视图 显示文件统计
  1. 49 0
      10_移动端/4_媒体查询.html
  2. 20 0
      10_移动端/5_max&min.html
  3. 24 0
      10_移动端/6_等比缩放.html
  4. 3 0
      10_移动端/css/a.css
  5. 3 0
      10_移动端/css/b.css
  6. 二进制
      10_移动端/img/1.jpg
  7. 二进制
      10_移动端/img/2.jpg
  8. 二进制
      10_移动端/img/3.jpg
  9. 33 0
      10_移动端/练习1_两列布局.html
  10. 36 0
      10_移动端/练习2_两列布局.html
  11. 36 0
      10_移动端/练习3_两列布局.html

+ 49 - 0
10_移动端/4_媒体查询.html
查看文件 

@@ -0,0 +1,49 @@
 
+<!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" media="screen and (min-width:500px)"  href="./css/a.css">
 
+    <style>
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+        }
 
+        /* @media screen and (min-width:500px){
 
+            .box{
 
+                width: 400px;
 
+                height: 400px;
 
+            }
 
+        } */
 
+        /* @media screen and (max-width:500px) {
 
+            .box{
 
+                background-color: blue;
 
+            }
 
+        } */
 
+
 
+        /* @media screen and (min-width:500px) and (max-width:800px){
 
+            .box{
 
+                background-color: blue;
 
+            }
 
+        } */
 
+
 
+        /* 监听屏幕为横屏时 */
 
+        /* @media screen and (orientation: landscape){
 
+            .box{
 
+                background-color: blue;
 
+            }
 
+        } */
 
+        /* 监听屏幕为竖屏 */
 
+        /* @media screen and (orientation: portrait){
 
+            .box{
 
+                background-color: blue;
 
+            }
 
+        } */
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 20 - 0
10_移动端/5_max&min.html
查看文件 

@@ -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>
 
+    <style>
 
+        .box{
 
+            /* width: 400px; */
 
+            max-width: 400px;
 
+            min-width: 200px;
 
+            height: 400px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 24 - 0
10_移动端/6_等比缩放.html
查看文件 

@@ -0,0 +1,24 @@
 
+<!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>
 
+        .div1{
 
+            max-width: 800px;
 
+        }
 
+        .box{
 
+            width: 100%;
 
+            background-color: red;
 
+            padding-top: 50%;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="div1">
 
+        <div class="box"></div>
 
+    </div>
 
+    
+</body>
 
+</html>

+ 3 - 0
10_移动端/css/a.css
查看文件 

@@ -0,0 +1,3 @@
 
+.box{
 
+    background-color: green !important;
 
+}

+ 3 - 0
10_移动端/css/b.css
查看文件 

@@ -0,0 +1,3 @@
 
+.box{
 
+    background-color: blue !important;
 
+}

二进制
10_移动端/img/1.jpg
查看文件


二进制
10_移动端/img/2.jpg
查看文件


二进制
10_移动端/img/3.jpg
查看文件


+ 33 - 0
10_移动端/练习1_两列布局.html
查看文件 

@@ -0,0 +1,33 @@
 
+<!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>
 
+        body{
 
+            margin: 0;
 
+        }
 
+        .box{
 
+            display: flex;
 
+        }
 
+        .div1{
 
+            width: 200px;
 
+            height: 100px;
 
+            background-color: blue;
 
+        }
 
+        .div2{
 
+            /* width: 100%; */
 
+            flex-grow: 1;
 
+            height: 100px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+        <div class="div2"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 36 - 0
10_移动端/练习2_两列布局.html
查看文件 

@@ -0,0 +1,36 @@
 
+<!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>
 
+        body{
 
+            margin: 0;
 
+        }
 
+        
+        .div1{
 
+            width: 200px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+        }
 
+        .div2{
 
+            position: absolute;
 
+            top: 0;
 
+            left: 200px;
 
+            width: calc(100% - 200px);
 
+            height: 100px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+        <div class="div2"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 36 - 0
10_移动端/练习3_两列布局.html
查看文件 

@@ -0,0 +1,36 @@
 
+<!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>
 
+        body{
 
+            margin: 0;
 
+        }
 
+        .box{
 
+            margin-left: 200px;
 
+        }
 
+        .div1{
 
+            width: 200px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            float: left;
 
+            transform: translateX(-200px);
 
+        }
 
+        .div2{
 
+            float: left;
 
+            width: 100%;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin-left: -200px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+        <div class="div2"></div>
 
+    </div>
 
+</body>
 
+</html>