开发神影视频网站

网站概述

项目名称: 神影视频网站

目标: 开发一个功能全面的视频分享网站，用户可以浏览、搜索并观看各种视频内容。

主要功能：

  • 首页视频推荐。
  • 轮播图展示精选视频内容。
  • 分类展示不同类别的视频。
  • 视频详情页面包含视频播放及相关信息展示。
  • 网站底部脚注区域包含版权信息及其他相关链接。

设计主页面

设计头部内容

组成部分:

  • 网站Logo
  • 导航栏：包括首页链接、分类链接、搜索框、登录/注册按钮等。
  • 搜索框位于导航栏中部，显眼且方便用户使用。
  • 登录后显示用户头像及操作菜单（如“我的视频”、“设置”等）。

设计要点：

  • 简洁明了的布局，易于用户操作。
  • 强调用户体验，搜索框居中且显眼，支持视频关键词搜索。
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
<!--头部内容-->
<div class="header">
    <div class="row no-gutters">
        <div class="col-6">
            <div class="row">
                <div class="col-1">
                    <i class="fa fa-life-ring fa-4x text-success"></i>
                </div>
                <div class="col-4 text-center ml-3">
                    <h3 class="header-size"><a href="#">神影视频</a></h3>
                    <span><a href="#">ShenYingWang</a></span>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="d-flex justify-content-end">
                <div class="form-inline">
                    <input type="search" class="form-control" placeholder="搜索">
                    <a href="#" class="btn btn-success"><i class="fa fa-search"></i></a>
                </div>
            </div>
            <ul class="nav size1 justify-content-end">
                <li class="nav-item">
                    <a href="#" class="nav-link">三生三世十里桃花</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">仙剑奇侠传</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">诛仙</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row no-gutters mt-2">
        <div class="col-6">
            <a href="#" class="btn btn-warning">首页</a>
            <a href="#" class="btn btn-warning">电影</a>
            <a href="#" class="btn btn-warning">电视剧</a>
            <a href="#" class="btn btn-warning">动漫</a>
            <a href="#" class="btn btn-warning">综艺</a>
        </div>
        <div class="col-6 text-right">
            <a href="#" class="btn btn-warning">登陆</a>
            <a href="#" class="btn btn-warning">注册</a>
        </div>
    </div>
    <div class="alert alert-success mt-3">
        <div class="spinner-border spinner-border-sm text-info">
            <span class="sr-only">Loading...</span>
        </div>
        如果您喜欢神影视频，请把它推荐给更多的人！
    </div>
</div>

设计轮播

功能设计：

  • 位于首页的显眼位置，展示热门推荐视频。
  • 包含视频封面、标题及描述。
  • 用户可以手动切换轮播内容或设置自动播放。

视觉效果：

  • 具有吸引力的设计，鼓励用户点击观看视频。
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
<!--设计轮播-->
<div id="Carousel" class="carousel slide" data-ride="carousel">
<!--    标识图标-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
<!--    幻灯片-->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1593685324,2253220400&fm=26&gp=0.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593167388848&di=97b4ec2057be18432050c6d4cace0c2b&imgtype=0&src=http%3A%2F%2Fmobimg.b-cdn.net%2Fpic%2Fv2%2Fgallery%2Fpreview%2Felovek-pauk_spider_man-kino-17200.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593167388848&di=96233d5c01f33d22248d0b54a17a1357&imgtype=0&src=http%3A%2F%2Fwww.fjsen.com%2Fimages%2Fattachement%2Fjpg%2Fsite2%2F20130403%2Fd067e519cb6612c5a9701a.jpg" class="d-block w-100" alt="">
        </div>
    </div>
<!--    控制按钮-->
    <a href="#Carousel" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#Carousel" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

设计分类列表

展示方式:

  • 按照不同视频分类（如电影、电视剧、综艺、动漫等）展示内容。
  • 每个分类显示多个视频缩略图，支持“查看更多”操作。

设计要点：

  • 视频缩略图下方展示视频标题和播放量，提供基本信息。
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
<!--设计分类列表-->
<div class="row my-3">
    <div class="col-4">
        <h5 class="card-header">按热播排行</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">本周最火</a>
            <a href="javascript:;" class="btn color4">历史最火</a>
            <a href="javascript:;" class="btn color4">最新上映</a>
            <a href="javascript:;" class="btn color4">评分最高</a>
            <a href="javascript:;" class="btn color4">女性专场</a>
            <a href="javascript:;" class="btn color4">罪恶题材</a>
        </div>
    </div>
    <div class="col-4">
        <h5 class="card-header">按类型</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">爱情</a>
            <a href="javascript:;" class="btn color4">动作</a>
            <a href="javascript:;" class="btn color4">喜剧</a>
            <a href="javascript:;" class="btn color4">惊悚</a>
            <a href="javascript:;" class="btn color4">恐怖</a>
            <a href="javascript:;" class="btn color4">悬疑</a>
            <a href="javascript:;" class="btn color4">科幻</a>
            <a href="javascript:;" class="btn color4">历史</a>
            <a href="javascript:;" class="btn color4">灾难</a>
            <a href="javascript:;" class="btn color4">经典</a>
        </div>
    </div>
    <div class="col-2">
        <h5 class="card-header">按地区</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">内地</a>
            <a href="javascript:;" class="btn color4">港台</a>
            <a href="javascript:;" class="btn color4">欧美</a>
        </div>
    </div>
    <div class="col-2">
        <h5 class="card-header">按电影基因</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">抗日</a>
            <a href="javascript:;" class="btn color4">间谍</a>
            <a href="javascript:;" class="btn color4">硬汉</a>
            <a href="javascript:;" class="btn btn-outline-success btn-sm">更多</a>
        </div>
    </div>
</div>

设计“视频内容”页面

页面布局：

  • 视频播放器居中显示，支持基础播放控制（播放、暂停、全屏等）。
  • 视频下方展示视频标题、发布者信息、发布时间及简介。
  • 侧边栏展示相关视频推荐。
  • 评论区供用户进行互动，支持评论、点赞和回复。
    用户体验：
  • 界面简洁，重点突出，便于用户观看和互动。
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
<!--视频内容-->
<div class="row pl-3 scale">
    <div class="col-9 bg-white pt-3">
        <div class="d-flex justify-content-between">
            <div><h3><div class="border1 mr-2"></div>最新电影</h3></div>
            <div><a href="javascript:;" class="btn btn-outline-danger btn-sm">更多</a></div>
        </div>
        <div class="row no-gutters">
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
        </div>
        <div class="d-flex justify-content-between mt-2">
            <div><h3><div class="border2 mr-2"></div>最新电视剧</h3></div>
            <div><a href="javascript:;" class="btn btn-outline-primary btn-sm">更多</a></div>
        </div>
        <div class="row no-gutters">
            <div class="col-3 p-1">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2661402963,3690309663&fm=26&gp=0.jpg" class="img-fluid" alt="">
                <h5 class="color1">闪电侠</h5>
                <p class="color2">宇宙快男大战思考者</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2661402963,3690309663&fm=26&gp=0.jpg" class="img-fluid" alt="">
                <h5 class="color1">闪电侠</h5>
                <p class="color2">宇宙快男大战思考者</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2661402963,3690309663&fm=26&gp=0.jpg" class="img-fluid" alt="">
                <h5 class="color1">闪电侠</h5>
                <p class="color2">宇宙快男大战思考者</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2661402963,3690309663&fm=26&gp=0.jpg" class="img-fluid" alt="">
                <h5 class="color1">闪电侠</h5>
                <p class="color2">宇宙快男大战思考者</p>
            </div>

        </div>
    </div>
    <div class="col-3">
        <div><h4><i class="fa fa-fire mr-2 text-danger"></i>最热电影</h4></div>
        <div class="list-group list-group-flush mt-3">
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">1</span><b class="color3">老师好</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">2</span><b class="color3">笑刀江湖</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">3</span><b class="color3">流浪地球</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">4</span><b class="color3">人间喜剧</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">5</span><b class="color3">复仇者联盟3</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">6</span><b class="color3">一代宗师</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">7</span><b class="color3">叶问3</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">8</span><b class="color3">风中有朵雨做的云</b>
            </a>
        </div>
        <div class="mt-4 mb-3"><h4><i class="fa fa-fire mr-2 text-primary"></i>最热电视剧</h4></div>
        <div class="list-group list-group-flush">
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number2 mr-3">1</span><b class="color3">仙剑奇侠传</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number2 mr-3">2</span><b class="color3">趁我们还年轻</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number2 mr-3">3</span><b class="color3">暖暖小时光</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">4</span><b class="color3">何人生还</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">5</span><b class="color3">权利的游戏</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">6</span><b class="color3">遇见爱情</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">7</span><b class="color3">三生三世十里桃花</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">8</span><b class="color3">诛仙</b>
            </a>
        </div>
    </div>
</div>

设计脚注

脚注内容：

  • 展示版权信息、网站联系信息、社交媒体链接等。
  • 包含“关于我们”、“隐私政策”、“帮助中心”等快捷链接。

设计要点:

  • 简洁、信息完整，确保可读性。
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
<!--设计脚注-->
<div class="footer mt-4 py-4">
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a href="javascript:;" class="nav-link active">关于我们</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">|</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">联系我们</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">|</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">诚聘英才</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">|</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">友情链接</a>
        </li>
    </ul>
    <div class="text-center size2">电影卫星频道节目制作中心</div>
</div>

完整代码：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>开发神影视频网站</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    图标字体库-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    引入自定义样式-->
    <link rel="stylesheet" href="style.css">

</head>
<body class="container">
<!--头部内容-->
<div class="header">
    <div class="row no-gutters">
        <div class="col-6">
            <div class="row">
                <div class="col-1">
                    <i class="fa fa-life-ring fa-4x text-success"></i>
                </div>
                <div class="col-4 text-center ml-3">
                    <h3 class="header-size"><a href="#">神影视频</a></h3>
                    <span><a href="#">ShenYingWang</a></span>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="d-flex justify-content-end">
                <div class="form-inline">
                    <input type="search" class="form-control" placeholder="搜索">
                    <a href="#" class="btn btn-success"><i class="fa fa-search"></i></a>
                </div>
            </div>
            <ul class="nav size1 justify-content-end">
                <li class="nav-item">
                    <a href="#" class="nav-link">三生三世十里桃花</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">仙剑奇侠传</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">诛仙</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row no-gutters mt-2">
        <div class="col-6">
            <a href="#" class="btn btn-warning">首页</a>
            <a href="#" class="btn btn-warning">电影</a>
            <a href="#" class="btn btn-warning">电视剧</a>
            <a href="#" class="btn btn-warning">动漫</a>
            <a href="#" class="btn btn-warning">综艺</a>
        </div>
        <div class="col-6 text-right">
            <a href="#" class="btn btn-warning">登陆</a>
            <a href="#" class="btn btn-warning">注册</a>
        </div>
    </div>
    <div class="alert alert-success mt-3">
        <div class="spinner-border spinner-border-sm text-info">
            <span class="sr-only">Loading...</span>
        </div>
        如果您喜欢神影视频，请把它推荐给更多的人！
    </div>
</div>
<!--设计轮播-->
<div id="Carousel" class="carousel slide" data-ride="carousel">
<!--    标识图标-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
<!--    幻灯片-->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1593685324,2253220400&fm=26&gp=0.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593167388848&di=97b4ec2057be18432050c6d4cace0c2b&imgtype=0&src=http%3A%2F%2Fmobimg.b-cdn.net%2Fpic%2Fv2%2Fgallery%2Fpreview%2Felovek-pauk_spider_man-kino-17200.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593167388848&di=96233d5c01f33d22248d0b54a17a1357&imgtype=0&src=http%3A%2F%2Fwww.fjsen.com%2Fimages%2Fattachement%2Fjpg%2Fsite2%2F20130403%2Fd067e519cb6612c5a9701a.jpg" class="d-block w-100" alt="">
        </div>
    </div>
<!--    控制按钮-->
    <a href="#Carousel" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#Carousel" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
<!--设计分类列表-->
<div class="row my-3">
    <div class="col-4">
        <h5 class="card-header">按热播排行</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">本周最火</a>
            <a href="javascript:;" class="btn color4">历史最火</a>
            <a href="javascript:;" class="btn color4">最新上映</a>
            <a href="javascript:;" class="btn color4">评分最高</a>
            <a href="javascript:;" class="btn color4">女性专场</a>
            <a href="javascript:;" class="btn color4">罪恶题材</a>
        </div>
    </div>
    <div class="col-4">
        <h5 class="card-header">按类型</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">爱情</a>
            <a href="javascript:;" class="btn color4">动作</a>
            <a href="javascript:;" class="btn color4">喜剧</a>
            <a href="javascript:;" class="btn color4">惊悚</a>
            <a href="javascript:;" class="btn color4">恐怖</a>
            <a href="javascript:;" class="btn color4">悬疑</a>
            <a href="javascript:;" class="btn color4">科幻</a>
            <a href="javascript:;" class="btn color4">历史</a>
            <a href="javascript:;" class="btn color4">灾难</a>
            <a href="javascript:;" class="btn color4">经典</a>
        </div>
    </div>
    <div class="col-2">
        <h5 class="card-header">按地区</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">内地</a>
            <a href="javascript:;" class="btn color4">港台</a>
            <a href="javascript:;" class="btn color4">欧美</a>
        </div>
    </div>
    <div class="col-2">
        <h5 class="card-header">按电影基因</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">抗日</a>
            <a href="javascript:;" class="btn color4">间谍</a>
            <a href="javascript:;" class="btn color4">硬汉</a>
            <a href="javascript:;" class="btn btn-outline-success btn-sm">更多</a>
        </div>
    </div>
</div>
<!--视频内容-->
<div class="row pl-3 scale">
    <div class="col-9 bg-white pt-3">
        <div class="d-flex justify-content-between">
            <div><h3><div class="border1 mr-2"></div>最新电影</h3></div>
            <div><a href="javascript:;" class="btn btn-outline-danger btn-sm">更多</a></div>
        </div>
        <div class="row no-gutters">
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
        </div>
        <div class="d-flex justify-content-between mt-2">
            <div><h3><div class="border2 mr-2"></div>最新电视剧</h3></div>
            <div><a href="javascript:;" class="btn btn-outline-primary btn-sm">更多</a></div>
        </div>
        <div class="row no-gutters">
            <div class="col-3 p-1">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2661402963,3690309663&fm=26&gp=0.jpg" class="img-fluid" alt="">
                <h5 class="color1">闪电侠</h5>
                <p class="color2">宇宙快男大战思考者</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2661402963,3690309663&fm=26&gp=0.jpg" class="img-fluid" alt="">
                <h5 class="color1">闪电侠</h5>
                <p class="color2">宇宙快男大战思考者</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2661402963,3690309663&fm=26&gp=0.jpg" class="img-fluid" alt="">
                <h5 class="color1">闪电侠</h5>
                <p class="color2">宇宙快男大战思考者</p>
            </div>
            <div class="col-3 p-1">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2661402963,3690309663&fm=26&gp=0.jpg" class="img-fluid" alt="">
                <h5 class="color1">闪电侠</h5>
                <p class="color2">宇宙快男大战思考者</p>
            </div>

        </div>
    </div>
    <div class="col-3">
        <div><h4><i class="fa fa-fire mr-2 text-danger"></i>最热电影</h4></div>
        <div class="list-group list-group-flush mt-3">
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">1</span><b class="color3">老师好</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">2</span><b class="color3">笑刀江湖</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">3</span><b class="color3">流浪地球</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">4</span><b class="color3">人间喜剧</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">5</span><b class="color3">复仇者联盟3</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">6</span><b class="color3">一代宗师</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">7</span><b class="color3">叶问3</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">8</span><b class="color3">风中有朵雨做的云</b>
            </a>
        </div>
        <div class="mt-4 mb-3"><h4><i class="fa fa-fire mr-2 text-primary"></i>最热电视剧</h4></div>
        <div class="list-group list-group-flush">
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number2 mr-3">1</span><b class="color3">仙剑奇侠传</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number2 mr-3">2</span><b class="color3">趁我们还年轻</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number2 mr-3">3</span><b class="color3">暖暖小时光</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">4</span><b class="color3">何人生还</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">5</span><b class="color3">权利的游戏</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">6</span><b class="color3">遇见爱情</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">7</span><b class="color3">三生三世十里桃花</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">8</span><b class="color3">诛仙</b>
            </a>
        </div>
    </div>
</div>
<!--设计脚注-->
<div class="footer mt-4 py-4">
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a href="javascript:;" class="nav-link active">关于我们</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">|</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">联系我们</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">|</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">诚聘英才</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">|</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link">友情链接</a>
        </li>
    </ul>
    <div class="text-center size2">电影卫星频道节目制作中心</div>
</div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

CSS

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
body{
    background: #ececec;
    font-family: 微软雅黑;
}
.header-size{
    font-size: 2rem;
}
.size1{
    font-size: 0.8rem;
}
.carousel-item img{
    height: 500px;
}
.color4{
    font-size: 0.9rem;
}
.color4:hover{
    background: #00cc00;
    color: white;
}
.card-header{
    border: 0;
    background: #dedede;
    font-size: 1rem;
    border-left: 3px solid #00cc00;
}
.color1{
    font-size: 1rem;
    font-weight: bold;
    margin: 10px 0 5px;
}
.color1:hover{
    color: red;
}
.scale img:hover{
    transform: scale(1.05);
}
.color2{
    font-size: 0.8rem;
    color: grey;
}
.color2:hover{
    color: black;
}
.number1{
    padding: 0.3rem 0.65rem;
    background: red;
    color: white;
    font-size: 12px;
}
.number2{
    padding: 0.3rem 0.65rem;
    background: blue;
    color: white;
    font-size: 12px;
}
.number3{
    padding: 0.3rem 0.65rem;
    background: #ffac2b;
    color: white;
    font-size: 12px;
}
.border1{
    height: 20px;
    display: inline-block;
    border: 3px solid red;
}
.border2{
    height: 20px;
    display: inline-block;
    border: 3px solid blue;
}
.list-group-item{
    padding: 0.5rem 1rem;
}
.color3{
    font-size: 1rem;
    color: black;
}
.color3:hover{
    color: red;
}
.footer{
    border-top: 2px solid white;
}
.footer a, .size2{
    font-size: 0.8rem;
    color: black;
}
.footer a:hover{
    color: red;
}