Ana Sayfa Keşfet Yardım
Giriş Yap
lovecoding
/
Web1020
10
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

admin

fengchuanyu 4 ay önce
ebeveyn
f4e74a14d8
işleme
f4df166648
5 değiştirilmiş dosya ile 144 ekleme ve 0 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 18 0
      10_移动端/1_viewport.html
  2. 31 0
      10_移动端/2_rem&em.html
  3. 31 0
      10_移动端/3_弹性布局.html
  4. 0 0
      9_HTML5/练习3_历史管理hash.html
  5. 64 0
      9_HTML5/练习4_历史管理histor.html

+ 18 - 0
10_移动端/1_viewport.html
Dosyayı Görüntüle 

@@ -0,0 +1,18 @@
 
+<!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: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 31 - 0
10_移动端/2_rem&em.html
Dosyayı Görüntüle 

@@ -0,0 +1,31 @@
 
+<!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>
 
+        html{
 
+            font-size: 20px;
 
+        }
 
+        .box{
 
+            font-size: 30px;
 
+        }
 
+        .div1{
 
+            /* rem 单位是相对于html的font-size   相当于 rem乘html的font-size */
 
+            /* width: 10rem;
 
+            height: 10rem; */
 
+
 
+            /* em 单位是相对于父元素的font-size */
 
+            height: 10em;
 
+            width: 10em;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 31 - 0
10_移动端/3_弹性布局.html
Dosyayı Görüntüle 

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

+ 0 - 0
9_HTML5/练习题3_历史管理hash.html → 9_HTML5/练习3_历史管理hash.html
Dosyayı Görüntüle


+ 64 - 0
9_HTML5/练习4_历史管理histor.html
Dosyayı Görüntüle 

@@ -0,0 +1,64 @@
 
+<!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 div {
 
+            width: 200px;
 
+            height: 120px;
 
+            background-color: #aaa;
 
+            color: #fff;
 
+            font-size: 40px;
 
+            font-weight: bolder;
 
+            text-align: center;
 
+            line-height: 120px;
 
+        }
 
+
 
+        .box {
 
+            display: flex;
 
+        }
 
+
 
+        .box .active {
 
+            background-color: #111;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="box">
 
+        <div data-val="first" class="tab-btn active">first</div>
 
+        <div data-val="second" class="tab-btn">second</div>
 
+        <div data-val="third" class="tab-btn">third</div>
 
+    </div>
 
+    <script>
 
+        var tabBtns = document.querySelectorAll('.tab-btn');
 
+
 
+        tabBtns.forEach((item)=>{
 
+            item.onclick = function(){
 
+                tabBtns.forEach((item)=>{
 
+                    item.classList.remove("active");
 
+                });
 
+                this.classList.add("active");
 
+                let thisVal = this.dataset.val;
 
+                window.history.pushState(thisVal,"");
 
+            }
 
+        })
 
+
 
+        window.onpopstate = function(){
 
+            let thisState = window.history.state;
 
+            tabBtns.forEach((item)=>{
 
+                if(item.dataset.val == thisState){
 
+                    tabBtns.forEach((item)=>{
 
+                        item.classList.remove("active");
 
+                    });
 
+                    item.classList.add("active");
 
+                }
 
+            });
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>