admin

7_移动端/css/index.css

@@ -121,6 +121,66 @@ nav .search i.iconfont {
     font-weight: 700;
     font-size: 0.3rem;
 }
+/* 滚动区域 */
+.scroll-content{
+    height: calc(100vh - 2.9rem);
+    background-color: #f5f5f5;
+}
+.scroll-content .scroll-movie{
+    padding: 12px 15px;
+    background-color: #fff;
+    width: 100%;
+    box-sizing: border-box;
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+.scroll-content .scroll-movie::-webkit-scrollbar{
+    display: none;
+}
+.scroll-content .scroll-movie ul{
+    /* display:flex;
+    padding:0 15px; */
+    white-space: nowrap;
+    font-size: 0;
+
+}
+.scroll-content .movie-img{
+    position: relative;
+    width: 85px;
+    height: 115px;
+    margin-bottom: 6px;
+}
+.scroll-content .scroll-movie .scroll-item{
+    display: inline-block;
+    margin-right: 15px;
+}
+.scroll-content .scroll-movie .scroll-item:last-child{
+    /* margin-right: 15px; */
+}
+.scroll-content .movie-img img{
+    width: 85px;
+    height: 115px;
+}
+.scroll-content .movie-rate{
+    font-size:11px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 35px;
+    background: linear-gradient(-180deg,rgba(77,77,77,0),#000);
+    color: #faaf00;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 50px;
+    overflow: hidden;
+    text-align: center;
+}
+.scroll-content .movie-title{
+    font-size:13px;
+    color: #222;
+}
+
 /* 底部导航栏 */
 footer{
     background-color: #fff;

7_移动端/练习题2_猫眼电影.html

@@ -39,6 +39,88 @@
                 <i class="iconfont icon-search"></i>
             </div>
         </nav>
+        <!-- 滚动区域 -->
+        <div class="scroll-content">
+            <!-- 横向滚动区域 -->
+            <div class="scroll-movie">
+                <ul>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                    <li class="scroll-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                            <div class="movie-rate">观众评分9.7</div>
+                        </div>
+                        <div class="movie-title">八仙!</div>
+                    </li>
+                </ul>
+            </div> 
+            <!-- 列表区域 -->
+            <div class="list-movie">
+                
+            </div>
+        </div> 
         <!-- footer区域 -->
         <footer>
             <ul>