Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
W260426
8
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

admin

fengchuanyu 3 өдөр өмнө
parent
b9347e1751
commit
2baaddd339
5 өөрчлөгдсөн 192 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 1 0
      7_移动端/1_rem与em.html
  2. 1 0
      7_移动端/4_等比缩放.html
  3. 40 0
      7_移动端/6_移动端事件.html
  4. 108 0
      7_移动端/css/index.css
  5. 42 0
      7_移动端/练习题2_猫眼电影.html

+ 1 - 0
7_移动端/1_rem与em.html
Файл харах 

@@ -19,6 +19,7 @@
 
             font-size: 20px;
 
         }
 
         #div2{
 
+            /* em单位 她是父元素的字体大小的倍数 父元素的font-size */
 
             width: 10em;
 
             height: 10em;
 
             background-color: blue;

+ 1 - 0
7_移动端/4_等比缩放.html
Файл харах 

@@ -26,6 +26,7 @@
 
             background-image: url(./img/img1.jpg);
 
             background-size: cover;
 
             width: 100%;
 
+            /* padding 使用百分比 相较于父元素的宽度 */
 
             padding-top:62.5%;
 
         }
 
     </style>

+ 40 - 0
7_移动端/6_移动端事件.html
Файл харах 

@@ -0,0 +1,40 @@
 
+<!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: 100px;
 
+            background-color: red;
 
+        }  
+        </style> 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        // 获取盒子
 
+        var box = document.getElementById("box");
 
+        // 鼠标点击事件可以在移动端使用 但是会有延迟时间 300ms 不建议在移动端使用
 
+        box.onclick = function(){
 
+            console.log("点击了盒子");
 
+        }
 
+        // 触摸开始事件 当手指触摸到盒子时 触发 没有延迟时间 建议在移动端使用移动端专属事件（只能应用于移动端）
 
+        box.ontouchstart = function(){
 
+            console.log("触摸开始");
 
+        }
 
+
 
+        // 触摸移动事件 当手指在盒子上移动时 触发 没有延迟时间 建议在移动端使用移动端专属事件（只能应用于移动端）
 
+        box.ontouchmove = function(){
 
+            console.log("触摸移动");
 
+        }
 
+        // 触摸结束事件 当手指从盒子上移开时 触发 没有延迟时间 建议在移动端使用移动端专属事件（只能应用于移动端）
 
+        box.ontouchend = function(){
 
+            console.log("触摸结束");
 
+        }
 
+        
+    </script>
 
+</body>
 
+</html>

+ 108 - 0
7_移动端/css/index.css
Файл харах 

@@ -0,0 +1,108 @@
 
+/* css reset 重置样式 */
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+li {
 
+    list-style: none;
 
+}
 
+
 
+h1 {
 
+    font-weight: normal;
 
+}
 
+
 
+/* 头部区域 */
 
+header {
 
+    height: 1rem;
 
+    background-color: #e54847;
 
+    position: relative;
 
+}
 
+
 
+header h1 {
 
+    text-align: center;
 
+    font-size: 0.35rem;
 
+    line-height: 1rem;
 
+    color: #fff;
 
+}
 
+
 
+header .menu {
 
+    position: absolute;
 
+    height: 1rem;
 
+    line-height: 1rem;
 
+    right: 20px;
 
+    top: 0;
 
+    color: #fff;
 
+    font-size: 0.35rem;
 
+}
 
+
 
+/* 导航栏区域 */
 
+nav {
 
+    height: .9rem;
 
+    border-bottom: 1px solid #e6e6e6;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    font-size: 0.3rem;
 
+    line-height: .9rem;
 
+    padding: 0 20px;
 
+}
 
+
 
+nav .address {
 
+    position: relative;
 
+}
 
+
 
+nav .address .city {
 
+    font-size: 0.25rem;
 
+    color: #666;
 
+}
 
+
 
+nav .address::after {
 
+    content: "";
 
+    display: block;
 
+    width: 0;
 
+    height: 0;
 
+    border-top: .1rem solid #ddd;
 
+    border-right: .1rem solid transparent;
 
+    border-left: .1rem solid transparent;
 
+    /* border-bottom:.1rem solid transparent; */
 
+    position: absolute;
 
+    top: 50%;
 
+    right: -15px;
 
+    transform: translateY(-50%);
 
+}
 
+
 
+nav .nav ul {
 
+    display: flex;
 
+}
 
+
 
+nav .nav {
 
+    position: relative;
 
+}
 
+
 
+nav .nav .under-line {
 
+    width: 6vw;
 
+    height: 4px;
 
+    background-color: #e54847;
 
+    position: absolute;
 
+    bottom: 4px;
 
+    left: 3vw;
 
+    border-radius: 2px;
 
+}
 
+
 
+nav .nav li {
 
+    font-size: 0.3rem;
 
+    width: 10vw;
 
+    text-align: center;
 
+    color: #666;
 
+    font-weight: 700;
 
+    margin: 0 1.3vw;
 
+}
 
+
 
+/* nav .nav.wait .under-line{  
+    left: 13vw;
 
+} */
 
+nav .search i.iconfont {
 
+    color: #e54847;
 
+    font-weight: 700;
 
+    font-size: 0.3rem;
 
+}

+ 42 - 0
7_移动端/练习题2_猫眼电影.html
Файл харах 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>猫眼电影</title>
 
+    <!-- 引入css文件 -->
 
+    <link rel="stylesheet" href="./css/index.css"> 
+    <!-- 引入图标字体 -->
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5209207_ek9b4zr8zlh.css">
 
+    <!-- 引入rem js -->
 
+    <script src="./js/rem.js"></script> 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <!-- 头部区域 -->
 
+        <header>
 
+            <h1>猫眼电影</h1>
 
+            <div class="menu">
 
+                <i class="iconfont icon-menu"></i>
 
+            </div>
 
+        </header>
 
+        <!-- 导航区域 -->
 
+        <nav>
 
+            <div class="address">
 
+                <span class="city">哈尔滨</span>
 
+            </div>
 
+            <div class="nav wait">
 
+                <ul>
 
+                    <li data-nav="hot">热映</li>
 
+                    <li data-nav="cinema">影院</li>
 
+                    <li data-nav="wait">待映</li>
 
+                </ul>
 
+                <div class="under-line"></div>
 
+            </div>
 
+            <div class="search">
 
+                <i class="iconfont icon-search"></i>
 
+            </div>
 
+        </nav> 
+    </div>
 
+</body>
 
+</html>