admin

7_移动端/css/index.css

@@ -125,6 +125,11 @@ nav .search i.iconfont {
 .scroll-content{
     height: calc(100vh - 2.9rem);
     background-color: #f5f5f5;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+.scroll-content::-webkit-scrollbar{
+    display: none;
 }
 .scroll-content .scroll-movie{
     padding: 12px 15px;
@@ -157,7 +162,7 @@ nav .search i.iconfont {
 .scroll-content .scroll-movie .scroll-item:last-child{
     /* margin-right: 15px; */
 }
-.scroll-content .movie-img img{
+.scroll-content .scroll-movie .movie-img img{
     width: 85px;
     height: 115px;
 }
@@ -168,7 +173,7 @@ nav .search i.iconfont {
     bottom: 0;
     width: 100%;
     height: 35px;
-    background: linear-gradient(-180deg,rgba(77,77,77,0),#000);
+    background: linear-gradient(180deg,rgba(77,77,77,0),#000);
     color: #faaf00;
     font-size: 11px;
     font-weight: 600;
@@ -180,7 +185,63 @@ nav .search i.iconfont {
     font-size:13px;
     color: #222;
 }
-
+/* 列表区域 */
+.list-movie{
+    background-color: #fff;
+    margin-top: 15px;
+}
+.list-movie .movie-list-item{
+    padding:12px 0 12px 14px;
+    display: flex;
+}
+.list-movie .movie-img{
+    height: 90px;
+    width: 64px;
+}
+.list-movie .movie-img img{
+    height: 90px;
+    width: 64px;
+}
+.list-movie .movie-info{
+    /* flex:1; 占满剩余空间 他是一个缩写 flex-grow:1; flex-shrink:0; flex-basis:0; (flex-basis表示初始宽度) */
+    flex:1;
+    display: flex;
+    justify-content: space-between;
+    margin-left: 10px;
+    border-bottom: 1px solid #e6e6e6;
+    padding-bottom: 10px;
+}
+.list-movie .movie-text h2{
+    font-size: 17px;
+    color: #333;
+    font-weight: 700;
+    margin-bottom: 7px;
+}
+.list-movie .movie-text p{
+    font-size: 13px;
+    color: #666;
+    margin-top: 3px;
+}
+.list-movie .movie-btn{
+    display: flex;
+    align-items: center;
+    width: 100px;
+    justify-content: center;
+} 
+.list-movie .movie-btn .btn{
+    font-size: 12px;
+    font-weight: 500;
+    width: 54px;
+    height: 28px;
+    background-color: #F03D37;
+    box-shadow: 0 2px 2px 0 rgba(240, 61, 55, 0.15);
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
+    border-radius: 14px;
+    text-align: center;
+    line-height: 28px;
+}
 /* 底部导航栏 */
 footer{
     background-color: #fff;

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

@@ -118,7 +118,206 @@
             </div> 
             <!-- 列表区域 -->
             <div class="list-movie">
-                
+                <ul>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="movie-list-item">
+                        <div class="movie-img">
+                            <img src="./img/movie.jpg" alt="movie">
+                        </div>
+                        <div class="movie-info">
+                            <div class="movie-text">
+                                <h2>八仙!</h2>
+                                <p>观众评分<span class="rate-num">9.7</span></p>
+                                <p>主演: 李绍哲,陈浩,立冬</p>
+                                <p>今天75家影院放映705场</p>
+                            </div>
+                            <div class="movie-btn">
+                                <div class="btn">
+                                    <span>购票</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
             </div>
         </div> 
         <!-- footer区域 -->