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

add

fengchuanyu 8 月之前
父节点
6710b2cdde
当前提交
ea6bbc6113
共有 3 个文件被更改，包括 184 次插入 和 3 次删除
合并视图 显示文件统计
  1. 20 0
      6_css3/8_渐变色.html
  2. 59 0
      8_移动端/css/iconfont.css
  3. 105 3
      8_移动端/练习题4_猫眼电影移动端.html

+ 20 - 0
6_css3/8_渐变色.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: 200px;
 
+            height: 200px;
 
+            /* background-image: linear-gradient(to right bottom,red,blue); */
 
+            background-image: linear-gradient(30deg,red,blue);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <a href="https://www.runoob.com/css3/css3-gradients.html">文档</a>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 59 - 0
8_移动端/css/iconfont.css
查看文件 

@@ -0,0 +1,59 @@
 
+@font-face {
 
+    font-family: "iconfont"; /* Project id 4628991 */
 
+    src: url('http://at.alicdn.com/t/c/font_4628991_tyg2om5842o.woff2?t=1723769290987') format('woff2'),
 
+         url('http://at.alicdn.com/t/c/font_4628991_tyg2om5842o.woff?t=1723769290987') format('woff'),
 
+         url('http://at.alicdn.com/t/c/font_4628991_tyg2om5842o.ttf?t=1723769290987') format('truetype');
 
+  }
 
+  
+  .iconfont {
 
+    font-family: "iconfont" !important;
 
+    font-size: 16px;
 
+    font-style: normal;
 
+    -webkit-font-smoothing: antialiased;
 
+    -moz-osx-font-smoothing: grayscale;
 
+  }
 
+  
+  .icon-yonghu:before {
 
+    content: "\e61b";
 
+  }
 
+  
+  .icon-shipin-:before {
 
+    content: "\e603";
 
+  }
 
+  
+  .icon-dianying:before {
 
+    content: "\e8ae";
 
+  }
 
+  
+  .icon-yanchu:before {
 
+    content: "\e602";
 
+  }
 
+  
+  .icon-phone:before {
 
+    content: "\e63b";
 
+  }
 
+  
+  .icon-editor2:before {
 
+    content: "\e62e";
 
+  }
 
+  
+  .icon-user:before {
 
+    content: "\e7ae";
 
+  }
 
+  
+  .icon-kefu:before {
 
+    content: "\ec2e";
 
+  }
 
+  
+  .icon-arrow:before {
 
+    content: "\e601";
 
+  }
 
+  
+  .icon-search:before {
 
+    content: "\e739";
 
+  }
 
+  
+  .icon-cart:before {
 
+    content: "\e600";
 
+  }
 
+

+ 105 - 3
8_移动端/练习题4_猫眼电影移动端.html
查看文件 

@@ -6,6 +6,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <title>Document</title>
 
     <script src="./rem.js"></script>
 
     <script src="./rem.js"></script>
 
+    <link rel="stylesheet" href="./css/iconfont.css">
 
     <style>
 
     <style>
 
         body {
 
         body {
 
             margin: 0;
 
             margin: 0;
 
@@ -25,6 +26,12 @@
 
         }
 
         }
 
 
 
         /* 头部  */
 
         /* 头部  */
 
+        .top-head{
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100vw;
 
+        }
 
         .top-head header {
 
         .top-head header {
 
             background-color: #e54847;
 
             background-color: #e54847;
 
             height: 0.7rem;
 
             height: 0.7rem;
 
@@ -80,6 +87,7 @@
 
             justify-content: space-between;
 
             justify-content: space-between;
 
             padding: 0 .2rem;
 
             padding: 0 .2rem;
 
             align-items: center;
 
             align-items: center;
 
+            background-color: #fff;
 
         }
 
         }
 
 
 
         .top-head .nav-center {
 
         .top-head .nav-center {
 
@@ -158,6 +166,42 @@
 
             border-bottom: 5px solid transparent;
 
             border-bottom: 5px solid transparent;
 
             transform: translate(3px, 3px);
 
             transform: translate(3px, 3px);
 
         }
 
         }
 
+        /* 底部导航 */
 
+        .bottom-nav{
 
+            height: 1rem;
 
+            width: 100vw;
 
+            border-top: .01rem solid #d8d8d8;
 
+            position: fixed;
 
+            bottom: 0;
 
+            left: 0;
 
+            background-color: #fff;
 
+        }
 
+        .bottom-nav ul{
 
+            display: flex;
 
+        }
 
+        .bottom-nav ul li{
 
+            flex-grow: 1;
 
+            height: 1rem;
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: #696969;
 
+        }
 
+        .bottom-nav ul .active{
 
+            color: #f03d37;
 
+        }
 
+        .bottom-nav ul li span{
 
+            font-size: .2rem;
 
+        }
 
+        .bottom-nav li i{
 
+            font-size: .5rem;
 
+        }
 
+        /* 中间内容区域 */
 
+        .center-content{
 
+            padding-top: 1.6rem;
 
+            padding-bottom: 1rem;
 
+        }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 
 
@@ -195,8 +239,53 @@
 
                 </div>
 
                 </div>
 
             </nav>
 
             </nav>
 
         </div>
 
         </div>
 
-        <div class="center-content"></div>
 
-        <div class="bottom-nav"></div>
 
+        <div class="center-content">
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+            <p>这是一段文字</p>
 
+        </div>
 
+        <div class="bottom-nav">
 
+            <ul>
 
+                <li class="active">
 
+                    <i class="iconfont icon-dianying"></i>
 
+                    <span>电影/影院</span>
 
+                </li>
 
+                <li>
 
+                    <i class="iconfont icon-shipin-"></i>
 
+                    <span>视频</span>
 
+                </li>
 
+                <li>
 
+                    <i class="iconfont icon-yanchu"></i>
 
+                    <span>演出</span>
 
+                </li>
 
+                <li>
 
+                    <i class="iconfont icon-yonghu"></i>
 
+                    <span>我的</span>
 
+                </li>
 
+            </ul>
 
+        </div>
 
     </div>
 
     </div>
 
     <script>
 
     <script>
 
         let listBtn = document.querySelector("#list-btn");
 
         let listBtn = document.querySelector("#list-btn");
 
@@ -244,7 +333,20 @@
 
                 navList[0].classList.add("active");
 
                 navList[0].classList.add("active");
 
             }
 
             }
 
         }
 
         }
 
-    </script>
 
+
 
+        /**
 
+         * 底部导航点击事件
 
+        */
 
+        let bottomNavLi = document.querySelector(".bottom-nav").querySelectorAll("li");
 
+        for(let i=0;i<bottomNavLi.length;i++){
 
+            bottomNavLi[i].ontouchstart = function(){
 
+                for(let j=0;j<bottomNavLi.length;j++){
 
+                    bottomNavLi[j].classList.remove("active");
 
+                }
 
+                this.classList.add("active");
 
+            }
 
+        }
 
+   </script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>