HTML+CSS+JS电影网页设计 DW个人网页制作 Hbuilder制作简单的电影网页在线电影网页设计与制作 web前端大作业

一、制作介绍

网页作品代码简单html+css制作，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

技术方面主要应用了学生网页课程中的: DIV+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

文章目录

一、制作介绍
二、网页展示(部分展示)
三、代码实现
- html
- css

二、网页展示(部分展示)

在这里插入图片描述

三、代码实现

代码说明：以下仅展示部分代码供参考~

html

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>叮当电影 - 搜罗全网好电影title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
head>
<body>
<header class="header">
    <div class="container">
        
        <a href="index.html" class="logo">a>
        
        <div class="nav">
            <ul class="navbar">
                <li><a href="index.html" class="active">首页a>li>
                <li><a href="movie.html">购票a>li>
                <li><a href="javascript:;">影院a>li>
                <li><a href="javascript:;">社区a>li>
            ul>
        div>
        
        <div class="headcart">
            <i class="cart-icon">i>
            <b class="card-num">b>
            <div class="card-tip">div>
        div>
        
        <div class="user">
            <div class="userout">
                <a href="login.html" class="login cur">登录a>
                <a href="register.html" class="register cur">注册a>
            div>
            <div class="userin">
                <a href="javascript:;" class="menu-item-user">
                    <img class="user-face" src="./imgs/userface.jpg" alt="userface">
                    <span class="user-name">span>
                a>
                <span class="caret">span>
                <ul class="dropdown-menu">
                    <li><a href="javascript:;">个人中心a>li>
                    <li><a href="javascript:;">退出登录a>li>
                ul>
            div>
        div>
        
        <div class="search">
            <form class="form-search" action="" method="">
                <input type="text" id="search-input" class="form-search-input" placeholder="搜电影、影院" autocomplete="off"/>
                <a class="form-search-icon" href="javascript:;" onclick="searchBtnClick(this,event)">a>
            form>
        div>

        
        <div class="app-download">
            <span class="phone-icon">span>
            <span class="app-text">下载APPspan>
            <span class="caret">span>
            <div class="qrcode-tip">
                <img class="qrcode-img" src="imgs/dingdang-qrcode.png" alt="扫描二维码下载APP"/>
                <p class="qrcode-tip-title">扫码下载客户端p>
                <p class="qrcode-tip-content">手机购票 方便实惠p>
            div>
        div>
    div>
header>

<div class="container">
    <div class="slidey">
        <ul id="slidey-content" style="display: none">
            <li>
                <img src="imgs/slideposter/Frozen2.jpg" alt="">
                <p class="title">冰雪奇缘2p>
                <p class="description">为什么艾莎一出生就带着控制冰雪的能力？这个答案一致困扰着她，也威胁着王国的安全。 她将和安娜、克斯托夫、雪宝和驯鹿斯文展开一场危险但非凡的旅程…p>
            li>
            <li>
                <img src="imgs/slideposter/ifseawave.jpg" alt="">
                <p class="title">若能与你共乘海浪之上p>
                <p class="description">青年消防员雏罂粟港和爱好冲浪的向水日菜子相遇并迅速展开热恋。看似命中注定的这对恋人，
                    却不幸遭遇生死别离。无法接受港已经离世的雏子，某天突然发现，只要唱起属于两个人的那首歌，港就会从水中出现…p>
            li>
            <li>
                <img src="imgs/slideposter/skyfire.jpg" alt="">
                <p class="title">天·火p>
                <p class="description">火山喷发了，这些人的命运纠结在一起。为了看见明天的太阳，他们必须与过去和解， 合力为自己也为众生在绝境中寻找一条生路。
                    这是一个关于爱与勇气、选择与放弃、自救与他救的中国式英雄的故事…p>
            li>
            <li>
                <img src="imgs/slideposter/yewen4.jpg" alt="">
                <p class="title">叶问4p>
                <p class="description">因故来到美国唐人街的叶问，意外卷入一场当地军方势力与华人武馆的纠纷，面对日益猖狂的
                    民族歧视与压迫，叶问挺身而出，在美国海军陆战队军营拼死一战，以正宗咏春，向世界证明了中国功夫…p>
            li>
        ul>
        <div class="slidey-main">
            <a href="movie.html" class="slidey-main-link">a>
            <div class="slidey-overlay">
                <p class="slidey-overlay-title">p>
                <p class="slidey-overlay-description">p>
                <span class="slidey-progress">span>
            div>
            <div class="slidey-ctrls slidey-ctrls-pre">div>
            <div class="slidey-ctrls slidey-ctrls-next">div>
        div>
        <div class="slidey-list">
            <ul>
                <li>
                    <table class="slidey-list-table">
                        <tr>
                            <td rowspan="2" class="slidey-list-img">
                                <div>div>
                            td>
                            <td class="slidey-list-title">td>
                        tr>
                        <tr>
                            <td class="slidey-list-description">td>
                        tr>
                    table>
                li>
                <li>
                    <table class="slidey-list-table">
                        <tr>
                            <td rowspan="2" class="slidey-list-img">
                                <div>div>
                            td>
                            <td class="slidey-list-title">td>
                        tr>
                        <tr>
                            <td class="slidey-list-description">td>
                        tr>
                    table>
                li>
                <li>
                    <table class="slidey-list-table">
                        <tr>
                            <td rowspan="2" class="slidey-list-img">
                                <div>div>
                            td>
                            <td class="slidey-list-title">td>
                        tr>
                        <tr>
                            <td class="slidey-list-description">td>
                        tr>
                    table>
                li>
                <li>
                    <table class="slidey-list-table">
                        <tr>
                            <td rowspan="2" class="slidey-list-img">
                                <div>div>
                            td>
                            <td class="slidey-list-title">td>
                        tr>
                        <tr>
                            <td class="slidey-list-description">td>
                        tr>
                    table>
                li>
            ul>
        div>
    div>

    <div class="movie-grid">
        <div class="panel">
            <div class="main">
                <div class="panel-header">
                    <span class="panel-title">正在热映（<span>20span>部）span>
                    <a href="javascript:;" class="panel-more">更多a>
                div>
                <div class="movie-list">
                    <ul>
                        <li>
                            <a href="movie.html" class="movie-poster">
                                <img src="./imgs/poster/bingxueqiyuan2.jpg" alt="" class="poster">
                                <span class="movie-score">8.0span>
                            a>
                            <span class="movie-title">冰雪奇缘2span>
                            <a href="movie.html" class="movie-ticket-buy">选座购票a>
                        li>
                        <li>
                            <a href="movie.html" class="movie-poster">
                                <img src="./imgs/poster/chuixiaoren.jpg" alt="" class="poster">
                                <span class="movie-score">8.5span>
                            a>
                            <span class="movie-title">吹哨人span>
                            <a href="movie.html" class="movie-ticket-buy">选座购票a>
                        li>
                        <li>
                            <a href="movie.html" class="movie-poster">
                                <img src="./imgs/poster/dayuezaidongji.jpg" alt="" class="poster">
                                <span class="movie-score">8.8span>
                            a>
                            <span class="movie-title">大约在冬季span>
                            <a href="movie.html" class="movie-ticket-buy">选座购票a>
                        li>
                        <li>
                            <a href="movie.html" class="movie-poster">
                                <img src="./imgs/poster/haishanggangqinshi.jpg" alt="" class="poster">
                                <span class="movie-score">9.2span>
                            a>
                            <span class="movie-title">海上钢琴师span>
                            <a href="movie.html" class="movie-ticket-buy">选座购票a>
                        li>
                        <li>
                            <a href="movie.html" class="movie-poster">
                                <img src="./imgs/poster/ruonengyuni.jpg" alt="" class="poster">
                                <span class="movie-score">8.7span>
                            a>
                            <span class="movie-title">若能与你共乘海浪之上span>
                            <a href="movie.html" class="movie-ticket-buy">选座购票a>
                        li>
                        <li>
                            <a href="movie.html" class="movie-poster">
                                <img src="./imgs/poster/tianhuo.jpg" alt="" class="poster">
                                <span class="movie-score">8.3span>
                            a>
                            <span class="movie-title">天·火span>
                            <a href="movie.html" class="movie-ticket-buy">选座购票a>
                        li>
                        <li>
                            <a href="movie.html" class="movie-poster">
                                <img src="./imgs/poster/yewen4.jpg" alt="" class="poster">
                                <span class="movie-score">8.8span>
                            a>
                            <span class="movie-title">叶问4span>
                            <a href="movie.html" class="movie-ticket-buy">选座购票a>
                        li>
                        <li>
                            <a href="movie.html" class="movie-poster">
                                <img src="./imgs/poster/yishengyouni.jpg" alt="" class="poster">
                                <span class="movie-score">8.3span>
                            a>
                            <span class="movie-title">一生有你span>
                            <a href="movie.html" class="movie-ticket-buy">选座购票a>
                        li>
                    ul>
                div>
            div>
            <div class="aside">
                <div class="panel-header">
                    <span class="panel-title">今日票房span>
                    <a href="javascript:;" class="panel-more">更多a>
                div>
                <div class="movie-rank">
                    <ul>
                        <li class="movie-rank-top1">
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">1span>
                                <img src="./imgs/poster/haishanggangqinshi.jpg" alt="">
                                <div>
                                    <p class="movie-rank-name">海上钢琴师p>
                                    <span class="box-office">1500万span>
                                div>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">2span>
                                <p class="movie-rank-name">叶问4p>
                                <span class="box-office">1400万span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">3span>
                                <p class="movie-rank-name">若能与你共乘海浪之上p>
                                <span class="box-office">1000万span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">4span>
                                <p class="movie-rank-name">吹哨人p>
                                <span class="box-office">900万span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">5span>
                                <p class="movie-rank-name">大约在冬季p>
                                <span class="box-office">800万span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">6span>
                                <p class="movie-rank-name">吹哨人p>
                                <span class="box-office">700万span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">7span>
                                <p class="movie-rank-name">天·火p>
                                <span class="box-office">600万span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">8span>
                                <p class="movie-rank-name">一生有你p>
                                <span class="box-office">550万span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">9span>
                                <p class="movie-rank-name">冰雪奇缘2p>
                                <span class="box-office">450万span>
                            a>
                        li>
                    ul>
                div>
            div>
        div>
        <div class="panel">
            <div class="main">
                <div class="panel-header">
                    <span class="panel-title">即将上映（<span>30span>部）span>
                    <a href="javascript:;" class="panel-more">更多a>
                div>
                <div class="movie-list">
                    <ul>
                        <li>
                            <a href="javascript:;" class="movie-poster">
                                <img src="./imgs/poster/bingxueqiyuan2.jpg" alt="" class="poster">
                                <span class="movie-score">12月25日上映span>
                            a>
                            <span class="movie-title">冰雪奇缘2span>
                            <a href="javascript:;" class="movie-ticket-buy">预售a>
                        li>
                        <li>
                            <a href="javascript:;" class="movie-poster">
                                <img src="./imgs/poster/chuixiaoren.jpg" alt="" class="poster">
                                <span class="movie-score">12月25日上映span>
                            a>
                            <span class="movie-title">吹哨人span>
                            <a href="javascript:;" class="movie-ticket-buy">预售a>
                        li>
                        <li>
                            <a href="javascript:;" class="movie-poster">
                                <img src="./imgs/poster/dayuezaidongji.jpg" alt="" class="poster">
                                <span class="movie-score">12月26日上映span>
                            a>
                            <span class="movie-title">大约在冬季span>
                            <a href="javascript:;" class="movie-ticket-buy">预售a>
                        li>
                        <li>
                            <a href="javascript:;" class="movie-poster">
                                <img src="./imgs/poster/haishanggangqinshi.jpg" alt="" class="poster">
                                <span class="movie-score">12月26日上映span>
                            a>
                            <span class="movie-title">海上钢琴师span>
                            <a href="javascript:;" class="movie-ticket-buy">预售a>
                        li>
                        <li>
                            <a href="javascript:;" class="movie-poster">
                                <img src="./imgs/poster/ruonengyuni.jpg" alt="" class="poster">
                                <span class="movie-score">12月26日上映span>
                            a>
                            <span class="movie-title">若能与你共乘海浪之上span>
                            <a href="javascript:;" class="movie-ticket-buy">预售a>
                        li>
                        <li>
                            <a href="javascript:;" class="movie-poster">
                                <img src="./imgs/poster/tianhuo.jpg" alt="" class="poster">
                                <span class="movie-score">12月27日上映span>
                            a>
                            <span class="movie-title">天·火span>
                            <a href="javascript:;" class="movie-ticket-buy">预售a>
                        li>
                        <li>
                            <a href="javascript:;" class="movie-poster">
                                <img src="./imgs/poster/yewen4.jpg" alt="" class="poster">
                                <span class="movie-score">12月28日上映span>
                            a>
                            <span class="movie-title">叶问4span>
                            <a href="javascript:;" class="movie-ticket-buy">预售a>
                        li>
                        <li>
                            <a href="javascript:;" class="movie-poster">
                                <img src="./imgs/poster/yishengyouni.jpg" alt="" class="poster">
                                <span class="movie-score">12月28日上映span>
                            a>
                            <span class="movie-title">一生有你span>
                            <a href="javascript:;" class="movie-ticket-buy">预售a>
                        li>
                    ul>
                div>
            div>
            <div class="aside">
                <div class="panel-header">
                    <span class="panel-title">备受期待span>
                    <a href="javascript:;" class="panel-more">更多a>
                div>
                <div class="movie-rank">
                    <ul>
                        <li class="movie-rank-top1">
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">1span>
                                <img src="./imgs/poster/haishanggangqinshi.jpg" alt="">
                                <div>
                                    <p class="movie-rank-name">海上钢琴师p>
                                    <span class="box-office">1500人想看span>
                                div>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">2span>
                                <p class="movie-rank-name">叶问4p>
                                <span class="box-office">1400人想看span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">3span>
                                <p class="movie-rank-name">若能与你共乘海浪之上p>
                                <span class="box-office">1000人想看span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">4span>
                                <p class="movie-rank-name">吹哨人p>
                                <span class="box-office">900人想看span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">5span>
                                <p class="movie-rank-name">大约在冬季p>
                                <span class="box-office">800人想看span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">6span>
                                <p class="movie-rank-name">吹哨人p>
                                <span class="box-office">700人想看span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">7span>
                                <p class="movie-rank-name">天·火p>
                                <span class="box-office">600人想看span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">8span>
                                <p class="movie-rank-name">一生有你p>
                                <span class="box-office">550人想看span>
                            a>
                        li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">9span>
                                <p class="movie-rank-name">冰雪奇缘2p>
                                <span class="box-office">450人想看span>
                            a>
                        li>
                    ul>
                div>
            div>
        div>
    div>
div>

<footer class="footer">
    <div class="container">
        <div class="link-nav">
            <ul>
                <li><a href="javascript:;">关于叮当a>li>
                <li><a href="javascript:;">加入我们a>li>
                <li><a href="javascript:;">联系我们a>li>
                <li><a href="javascript:;">隐私政策a>li>
                <li><a href="javascript:;">问题反馈a>li>
            ul>
            <div class="copyright">Copyright © 2019 叮当电影div>
        div>
        <div class="sns">
            <a href="javascript:;" class="sina-icon icon">a>
            <a href="javascript:;" class="wechat-icon icon">a>
            <a href="javascript:;" class="rss-icon icon">a>
        div>
    div>
footer>
<div id="toTop">div>

<script type="text/javascript" src="js/main.js">script>
<script type="text/javascript" src="js/slidey.js">script>
<script type="text/javascript">
    window.onload = function () {
        setPage("index.html");
        initPublic();
        initScrollToTop();
        new initSlidey();
    };
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504

css

@charset "UTF-8";
@import "public-style.css";
@import "header.css";
@import "footer.css";


/********************************************/
/* 幻灯片 */
.slidey {
    height: 400px;
}

/* 幻灯片 - 主要 */
.slidey .slidey-main {
    position: relative;
    width: 900px;
    height: 400px;
    float: left;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.slidey-main-link{
    display: block;
    height: 285px;
}

.slidey-main .slidey-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 50px;
    padding: 20px 70px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
}

.slidey-overlay .slidey-overlay-title {
    display: inline-block;
    padding: 5px 30px;
    font-weight: 700;
    font-size: 15px;
    background-color: #FF8D1B;
}

.slidey-overlay .slidey-overlay-description {
    padding-top: 10px;
    text-align: left;
}

.slidey-overlay .slidey-progress {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background-color: #FF8D1B;
    overflow: hidden;
}

.slidey-main .slidey-ctrls {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 35px;
    cursor: pointer;
    opacity: .4;
    border: 2px solid #fff;
    border-radius: 10px;
    background-color: #333;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center;
}

.slidey-main .slidey-ctrls:hover {
    opacity: 1;
    background-color: #FF8D1B;
}

.slidey-main .slidey-ctrls-pre {
    left: 10px;
    background-image: url("../imgs/icons/pre-icon.png");
}

.slidey-main .slidey-ctrls-next {
    right: 10px;
    background-image: url("../imgs/icons/next-icon.png");
}

/* 幻灯片 - 列表 */
.slidey .slidey-list {
    width: 300px;
    height: 400px;
    float: left;
    cursor: pointer;
    background-color: #2C363F;
}
.slidey-list li.active {
    background-color: #FF8D1B;
}

.slidey-list li.active .slidey-list-title {
    color: #2C363F;
}

.slidey-list li.active .slidey-list-description {
    color: #2C363F;
}

.slidey-list-img {
    padding: 4px;
}

.slidey-list-img div {
    width: 92px;
    height: 92px;
    box-shadow: 0 0 1px #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.slidey-list-title {
    padding: 5px 0 5px 4px;
    color: #FF8D1B;
    font-weight: 600;
}

.slidey-list-description {
    display: block;
    width: 200px;
    height: 62px;
    padding-left: 4px;
    color: #fff;
    font-size: smaller;
    overflow: hidden;
    text-overflow: ellipsis;
}

/********************************************/
/*  */

.movie-grid .panel{
    margin-top: 60px;
}

/* 清除浮动 （父元素没有高度）*/
.movie-grid .panel::after{
    content:"";
    display: block;
    clear: both;
}

/*  主要内容 */
.movie-grid .panel .main {
    float: left;
    width: 750px;
}

/* 排行榜 */
.movie-grid .panel .aside {
    float: right;
    width: 350px;
}

.movie-grid .panel .panel-title {
    font-size: 26px;
    color: #FF8D1B;
    border-left: 5px solid #FF8D1B;
    padding: 5px 0 5px 10px;
    margin-left: -15px;
}

.movie-grid .panel .panel-more {
    float: right;
    padding-top: 8px;
}

.movie-grid .panel .panel-more::after {
    display: inline-block;
    content: "";
    width: 7px;
    height: 7px;
    border: 2px solid #FF8D1B;
    border-top: none;
    border-left: none;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.movie-grid .movie-list ul {
    margin-left: -30px;
}

/* 电影每一项 */
.movie-grid .movie-list li {
    position: relative;
    margin: 30px 0 0 30px;
    display: inline-block;
    vertical-align: top;
    width: 160px;
    cursor: pointer;
}

/* 电影海报 */
.movie-grid .movie-list .movie-poster {
    position: relative;
}

.movie-list .movie-poster {
    display: block;
}

.movie-list .movie-poster img {
    width: 160px;
    height: 224px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.movie-list .movie-poster .movie-score {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 7px;
    background-color: #FF8D1B;
    color: #fff;
}

.movie-list li .movie-title {
    display: block;
    width: 100%;
    height: 32px;
    color: #2d3237;
    font-size: 18px;
    padding-top: 7px;
    font-weight: 400;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movie-list li .movie-ticket-buy {
    display: none;
    width: 160px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50px;
    color: #fff;
    background-color: #FFA500;
    position: absolute;
    bottom: 0;
}

.movie-list li:hover .movie-poster{
    opacity: .8;
}

.movie-list li:hover .movie-title{
    width: 0;
}

.movie-list li:hover .movie-ticket-buy {
    display: block;
}

.movie-list li .movie-ticket-buy:hover {
    background-color: #FF8D1B;
}

/***************************************************/
/* 侧边 */
.movie-grid .aside .panel-title {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}

.movie-rank {
    margin-top: 30px;
}

.movie-rank li {
    margin-bottom: 20px;
}

.movie-rank li:hover .movie-rank-name {
    color: #FF8D1B;
}

.movie-rank li a * {
    display: inline-block;
}

.movie-rank .movie-rank-num {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    text-align: center;
    color: #999;
}

.movie-rank .movie-rank-top3 {
    border-radius: 3px;
    color: #fff;
    background-color: #FF8D1B;
}

.movie-rank .movie-rank-name {
    padding-left: 10px;
    font-size: 16px;
    color: #2d3237;
}

.movie-rank .box-office {
    float: right;
    font-size: 14px;
    color: #ff6000;
}

.movie-rank-top1 .movie-rank-num {
    vertical-align: top;
}

.movie-rank-top1 img {
    margin-left: 10px;
    width: 120px;
    height: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.movie-rank-top1 div {
    vertical-align: middle;
    overflow: hidden;
}

.movie-rank-top1 .movie-rank-name {
    font-size: 18px;
    margin-bottom: 10px;
}

.movie-rank-top1 .box-office {
    float: none;
    display: block;
    margin-left: 10px;
    font-size: 16px;
}

.footer{
    margin-top: 60px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360

喜欢的给个点赞呗

相关阅读:
从 PDB$SEED 创建新 PDB
进阶C++__STL__set/ multiset和map/ multimap使用方法
 win11安装pytorch-gpu遇到的坑
 TikTok营销策略如何打造TikTok爆款视频？
数据库优化
 RestTemplate作用及其使用
 leetcode 17. 电话号码的字母组合
 第十三章《搞懂算法:神经网络是怎么回事》笔记
 threejs 初始化
 【ASP.NET小白零基础入门】从0部署ASP.NET开发环境，并成功运行一个汉服图片管理系统
原文地址：https://blog.csdn.net/qq_38512571/article/details/128011348

HTML+CSS+JS电影网页设计 DW个人网页制作 Hbuilder制作简单的电影网页 在线电影网页设计与制作 web前端大作业