fengchuanyu il y a 8 mois
Parent
commit
c598efa8c4

+ 31 - 0
8_移动端/8_页面滚动.html

@@ -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>
+        .div1{
+            width: 300px;
+            height: 100px;
+            border:5px solid green;
+            overflow:scroll;
+        }
+        .div2{
+            width: 1000px;
+            height: 100px;
+            background-image: linear-gradient( to right,red,blue);
+        }
+        ::-webkit-scrollbar{
+          display: none;
+          width: 0;
+          height: 0;  
+        }
+    </style>
+</head>
+<body>
+    <div class="div1">
+        <div class="div2"></div>
+    </div>
+</body>
+</html>

BIN
8_移动端/img/move.jpg


+ 133 - 25
8_移动端/练习题4_猫眼电影移动端.html

@@ -20,6 +20,10 @@
         li {
             list-style: none;
         }
+        p{
+            margin: 0;
+        }
+
 
         .container {
             font-size: .36rem;
@@ -202,6 +206,57 @@
             padding-top: 1.6rem;
             padding-bottom: 1rem;
         }
+        .center-content .love-move{
+            padding: 12px 15px;
+        }
+        .center-content .love-move .move-box{
+            width: 85px;
+            height: 115px;
+        }
+        .center-content .love-move img{
+            width: 100%;
+            height: 100%;
+        }
+        .center-content .love-move .cc-title{
+            font-size: 14px;
+            color: #333;
+            margin-bottom: 12px;
+        }
+        .center-content .love-move .move-box{
+            position: relative;
+            margin-bottom: 6px;
+        }
+        .center-content .love-move .rating-content{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 35px;
+            width: 100%;
+            font-size: 11px;
+            color: #faaf00;
+            background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
+        }
+        .center-content .rating-content span{
+            position: absolute;
+            left: 4px;
+            bottom: 2px;
+        }
+        .center-content .love-move .move-title{
+            font-size: 13px;
+            color: #222;
+        }
+        .center-content .love-move ul{
+            display: flex;
+            overflow: scroll;
+        }
+        .center-content .love-move li{
+            margin-right: 10px;
+        }
+        ::-webkit-scrollbar{
+            display: none;
+            width: 0;
+            height: 0;
+        }
     </style>
 </head>
 
@@ -240,31 +295,84 @@
             </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 class="love-move">
+                <p class="cc-title">最受好评电影</p>
+                <ul>
+                    <li>
+                        <div class="move-box">
+                            <img src="./img/move.jpg" alt="move">
+                            <div class="rating-content">
+                                <span>观众评分 8.9</span>
+                            </div>
+                        </div>
+                        <p class="move-title"> 神偷奶爸4</p>
+                    </li>
+                    <li>
+                        <div class="move-box">
+                            <img src="./img/move.jpg" alt="move">
+                            <div class="rating-content">
+                                <span>观众评分 8.9</span>
+                            </div>
+                        </div>
+                        <p class="move-title"> 神偷奶爸4</p>
+                    </li>
+                    <li>
+                        <div class="move-box">
+                            <img src="./img/move.jpg" alt="move">
+                            <div class="rating-content">
+                                <span>观众评分 8.9</span>
+                            </div>
+                        </div>
+                        <p class="move-title"> 神偷奶爸4</p>
+                    </li>
+                    <li>
+                        <div class="move-box">
+                            <img src="./img/move.jpg" alt="move">
+                            <div class="rating-content">
+                                <span>观众评分 8.9</span>
+                            </div>
+                        </div>
+                        <p class="move-title"> 神偷奶爸4</p>
+                    </li>
+                    <li>
+                        <div class="move-box">
+                            <img src="./img/move.jpg" alt="move">
+                            <div class="rating-content">
+                                <span>观众评分 8.9</span>
+                            </div>
+                        </div>
+                        <p class="move-title"> 神偷奶爸4</p>
+                    </li>
+                    <li>
+                        <div class="move-box">
+                            <img src="./img/move.jpg" alt="move">
+                            <div class="rating-content">
+                                <span>观众评分 8.9</span>
+                            </div>
+                        </div>
+                        <p class="move-title"> 神偷奶爸4</p>
+                    </li>
+                    <li>
+                        <div class="move-box">
+                            <img src="./img/move.jpg" alt="move">
+                            <div class="rating-content">
+                                <span>观众评分 8.9</span>
+                            </div>
+                        </div>
+                        <p class="move-title"> 神偷奶爸4</p>
+                    </li>
+                    <li>
+                        <div class="move-box">
+                            <img src="./img/move.jpg" alt="move">
+                            <div class="rating-content">
+                                <span>观众评分 8.9</span>
+                            </div>
+                        </div>
+                        <p class="move-title"> 神偷奶爸4</p>
+                    </li>
+                </ul>    
+            </div>
+            <div class="move-list"></div>
         </div>
         <div class="bottom-nav">
             <ul>