|
|
@@ -16,13 +16,18 @@
|
|
|
li {
|
|
|
list-style: none;
|
|
|
}
|
|
|
-
|
|
|
+ ::-webkit-scrollbar{
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
/* 头部区域 开始 */
|
|
|
.top-fixed{
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
+ z-index: 100;
|
|
|
}
|
|
|
.fixed-content .top-fixed header {
|
|
|
height: 1rem;
|
|
|
@@ -165,9 +170,50 @@
|
|
|
}
|
|
|
/* 底部导航区域 结束 */
|
|
|
.scroll-content{
|
|
|
- height: 500vh;
|
|
|
- background-color: blue;
|
|
|
+ padding-top: 2rem;
|
|
|
+ }
|
|
|
+ /* 最受好评电影区域 开始 */
|
|
|
+ .scroll-content .movie-item img{
|
|
|
+ width: 85px;
|
|
|
+ height: 115px;
|
|
|
+ }
|
|
|
+ .scroll-content .like-movie{
|
|
|
+ padding: 12px 15px;
|
|
|
+ }
|
|
|
+ .scroll-content .like-movie .title{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .scroll-content .movie-item{
|
|
|
+ width: 85px;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .scroll-content .movie-item .rate{
|
|
|
+ color: #faaf00;
|
|
|
+ font-size: 11px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ position: absolute;
|
|
|
+ top: 80px;
|
|
|
+ left: 0;
|
|
|
+ background-image: linear-gradient(rgba(77, 77, 77, 0), #000);
|
|
|
+ }
|
|
|
+ .scroll-content .movie-item p{
|
|
|
+ font-size: 13px;
|
|
|
+ color: #222;
|
|
|
+ }
|
|
|
+ .scroll-content .scroll-list{
|
|
|
+ display: flex;
|
|
|
}
|
|
|
+ .scroll-content .scroll-box{
|
|
|
+ width: 100%;
|
|
|
+ overflow: scroll;
|
|
|
+ }
|
|
|
+ /* 最受好评电影区域 结束 */
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -234,7 +280,113 @@
|
|
|
</footer>
|
|
|
</div>
|
|
|
<!-- 滚动区域 内容区域 -->
|
|
|
- <div class="scroll-content"></div>
|
|
|
+ <div class="scroll-content">
|
|
|
+ <!-- 最受好评电影 -->
|
|
|
+ <div class="like-movie">
|
|
|
+ <p class="title">最受好评电影</p>
|
|
|
+ <!-- 滚动容器 可见区域-->
|
|
|
+ <div class="scroll-box">
|
|
|
+ <!-- 滚动列表 可滚动区域-->
|
|
|
+ <div class="scroll-list">
|
|
|
+ <!-- 每一个电影容器 -->
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 复制影片 -->
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+ <div class="movie-item">
|
|
|
+ <img src="./img/dy.jpg" alt="dy">
|
|
|
+ <!-- 评分 -->
|
|
|
+ <div class="rate">
|
|
|
+ <span>观众评分9.7</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <p>浪浪山小妖怪</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="movie-list"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<script src="./js/rem.js"></script>
|
|
|
<script>
|
