24大数据技术10.17实验课作业
注意
必须在学习通下载对应资源
本次作业包含5个页面，请注意对应文件名，以及不要更改文件名和移动文件位置
点击代码块，可使用方向键左右移动查看代码
代码块右上角可以最小化代码
注释部分不需要敲
提交3个运行后截图，分别是主页界面，视频界面，注册界面
1.根据以下代码补全index.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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄影·开课吧</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>
<body>
<header id="head">
<div class="con">
<ul class="left">
<li>开课吧首页</li>
<li>创业微学院</li>
<li>摄影微学院</li>
<li>微聚</li>
<li>论坛</li>
</ul>
<ul class="right">
<li>APP下载</li>
<li>播放记录</li>
<li><a href="register.html">登录 | 注册</a></li>
</ul>
</div>
</header>
<nav>
<div class="nav_in">
<ul>
<li><a href="index.html"></a></li>
<li><a href="user.html">个人中心</a></li>
<li><a href="video.html">视频播放</a></li>
</ul>
<ol>
<li>󰅢</li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</nav>
<div class="banner">
<div class="banner_pic" id="banner_pic">
<div class="current"><img class="ban" src="images/banner01.jpg"></div>
<div class="pic"><img class="ban" src="images/banner02.jpg"></div>
<div class="pic"><img class="ban" src="images/banner03.jpg"></div>
</div>
<p>迅速发现找到想要的内容 | 尽享国内外优秀视频资源 | 分享摄影心得结识新朋友</p>
<p>向下开启 开课吧·摄影之路</p>
<a href="#con" class="sanjiao"><img src="images/jiantou.png"></a>
<ol id="button">
<li class="current"></li>
<li class="but"></li>
<li class="but"></li>
</ol>
</div>
<div class="content" id="con">
<h2>最热视频-大家都在看</h2>
<a href="video.html">
<img src="images/pic01.jpg" >
<div class="cur">
<h3>初学者怎样挑选镜头</h3>
<span>查看详情</span>
</div>
</a>
<a href="#"><img src="images/pic02.jpg" ></a>
<a href="#"><img src="images/pic03.jpg" ></a>
<a href="#"><img src="images/pic04.jpg" ></a>
<a href="#"><img src="images/pic05.jpg" ></a>
<a href="#"><img src="images/pic06.jpg" ></a>
</div>
<div class="share">
<h2>大咖推荐-看看牛人分享</h2>
<a href="#">
<img src="images/pic07.jpg" >
<div class="cur">
<img src="images/pic01.png" >
<h3>nosay</h3>
<p>视频: 34 订阅粉丝: 30112</p>
<span>订阅</span>
</div>
</a>
<a href="#">
<img src="images/pic07.jpg" >
<div class="cur">
<img src="images/pic02.png" >
<h3>nosay</h3>
<p>视频: 34 订阅粉丝: 30112</p>
<span>订阅</span>
</div>
</a>
<a href="#">
<img src="images/pic07.jpg" >
<div class="cur">
<img src="images/pic03.png" >
<h3>nosay</h3>
<p>视频: 34 订阅粉丝: 30112</p>
<span>订阅</span>
</div>
</a>
<a href="#">
<img src="images/pic07.jpg" >
<div class="cur">
<img src="images/pic04.png" >
<h3>nosay</h3>
<p>视频: 34 订阅粉丝: 30112</p>
<span>订阅</span>
</div>
</a>
</div>
<footer>
<div class="foot">
<a href="#head"><span>Top</span></a>
<p>Copyright©2024 开课吧 版权所有</p>
</div>
</footer>
</body>
</html>
|
做完即可提交第一题截图
2.根据以下代码，补全register.html和css文件里的register.css
register.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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄影·开课吧</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>
<body>
<header id="head">
<div class="con">
<ul class="left">
<li>开课吧首页</li>
<li>创业微学院</li>
<li>摄影微学院</li>
<li>微聚</li>
<li>论坛</li>
</ul>
<ul class="right">
<li>APP下载</li>
<li>播放记录</li>
<li><a href="register.html">登录 | 注册</a></li>
</ul>
</div>
</header>
<nav>
<div class="nav_in">
<ul>
<li><a href="index.html"></a></li>
<li><a href="user.html">个人中心</a></li>
<li><a href="video.html">视频播放</a></li>
</ul>
<ol>
<li>󰅢</li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</nav>
<div class="content">
<aside>
<img src="images/sheying.jpg" >
</aside>
<div class="right">
<h3>使用手机号码注册</h3>
<form action="#" method="post">
<input type="text" placeholder="昵称"/>
<input type="text" placeholder="请输入您的手机号码"/>
<input type="text" placeholder="短信验证码" class="short" />
<span>请输入验证码</span>
<p>请输入正确的验证码</p>
<input type="text" placeholder="密码" maxlength="8" />
<input type="text" placeholder="确认密码" maxlength="8" />
<input type="submit" value="登录" class="button"/>
<p>已有账号？<a href="#">马上登录</a></p>
</form>
</div>
</div>
<footer>
<div class="foot">
<a href="#head"><span>Top</span></a>
<p>Copyright©2024 开课吧 版权所有</p>
</div>
</footer>
</body>
</html>
|
打开css文件夹，找到register.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
| .content{
width:1200px;
height:600px;
margin:50px auto 0;
border:1px solid #ccc;
background:#fff;
padding-top:100px;
}
.content aside{
float:left;
margin-left:100px;
}
.content .right{
width:385px;
float:left;
margin-left:80px;
}
.content .right input{
width:340px;
height:30px;
padding-left:20px;
line-height:30px;
color:#ccc;
font-size:16px;
margin-top:30px;
border-radius: 5px;
border:1px solid #ccc;
}
input::placeholder{color:#ccc;}
.content .right .short{width:230px;}
.content .right span{
display:inline-block;
width:91px;
font-size:14px;
color:#2fade7;
margin:30px 0 0 25px;
}
.content .right p{
font-size:14px;
padding:0;
height:40px;
line-height:40px;
color:red;
}
.content .right input:nth-of-type(4){margin:0;}
.content .right .button{
width:360px;
height:36px;
color:#fff;
background:#2fade7;
border:none;
border-radius:5px;
margin-bottom:20px;
}
.content .right .button:hover{background:#0272da;}
.content .right p:nth-of-type(2){color:#ccc;}
.content .right p:nth-of-type(2) a{color:#2fade7;}
|
做完即可提交第二题截图
3.根据以下代码，补全video.html和css文件里的video.css
video.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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄影·开课吧</title>
<link rel="stylesheet" type="text/css" href="css/video.css">
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>
<body>
<header id="head">
<div class="con">
<ul class="left">
<li>开课吧首页</li>
<li>创业微学院</li>
<li>摄影微学院</li>
<li>微聚</li>
<li>论坛</li>
</ul>
<ul class="right">
<li>APP下载</li>
<li>播放记录</li>
<li><a href="register.html">登录 | 注册</a></li>
</ul>
</div>
</header>
<nav>
<div class="nav_in">
<ul>
<li><a href="index.html"></a></li>
<li><a href="user.html">个人中心</a></li>
<li><a href="video.html">视频播放</a></li>
</ul>
<ol>
<li>󰅢</li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</nav>
<div class="content">
<p>摄影首页>摄影器材>手机</p>
<p>正在播放 : 初学者怎么挑选镜头</p>
<video src="video/video.mp4" controls></video>
<a href="#">1212</a>
<a href="#">收藏</a>
<a href="#">分享</a>
<h3>12.5万次播放</h3>
</div>
<div class="list">
<div class="left">
<p>选集-共24集</p>
<a href="#"><img class="findIn" src="images/pic08_8.jpg" ></a>
<a href="#"><img src="images/pic09_9.jpg" ></a>
<a href="#"><img src="images/pic10_10.jpg" ></a>
<a href="#"><img src="images/pic11_11.jpg" ></a>
<p>相关视频</p>
<a href="#"><img src="images/pic08_8.jpg" ></a>
<a href="#"><img src="images/pic09_9.jpg" ></a>
<a href="#"><img src="images/pic10_10.jpg" ></a>
<a href="#"><img src="images/pic11_11.jpg" ></a>
<a href="#"><img src="images/pic08_8.jpg" ></a>
<a href="#"><img src="images/pic09_9.jpg" ></a>
<a href="#"><img src="images/pic10_10.jpg" ></a>
<a href="#"><img src="images/pic11_11.jpg" ></a>
<p>评论：</p>
<div class="last">
<form action="#" method="post">
<textarea cols="30" rows="10" >我来说两句....</textarea>
</form>
<span>发表评论</span>
</div>
</div>
<div class="right">
<p>视频信息</p>
<section>
<h3>初学者怎么挑选镜头</h3>
<p>简介：初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头</p>
<span>详情></span>
</section>
<p>精选活动</p>
<img src="images/pic12.jpg" >
<img src="images/pic13.jpg" >
<img src="images/pic12.jpg" >
</div>
</div>
<footer>
<div class="foot">
<a href="#head"><span>Top</span></a>
<p>Copyright©2024 开课吧 版权所有</p>
</div>
</footer>
</body>
</html>
|
打开css文件夹，找到video.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
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
| body{background:#2a292b;}
.content{
color:#ccc;
width:1200px;
margin:0 auto 20px;
margin-top:50px;
}
.content p:first-child{
font-size:16px;
line-height:50px;
}
.content p{font-size: 20px;}
.content video{
width:1200px;
margin:30px 0 20px 0;
}
.content a{
float: left;
width:45px;
height:24px;
line-height:24px;
color:#ccc;
padding-left:30px;
margin-left:20px;
background:url(../images/pic05.png) no-repeat left center;
}
.content a:nth-of-type(2){background: url(../images/pic06.png) no-repeat left center;}
.content a:nth-of-type(3){background: url(../images/pic07.png) no-repeat left center;}
.content h3{
float:right;
font-weight:normal;
}
.list{
width:1200px;
height:900px;
margin:0 auto;
padding-top:20px;
}
.list .left{
float:left;
width:932px;
height:990px;
}
.list .left p{
font-size:20px;
color:#ccc;
margin-bottom:20px;
}
.list .left a{
width:218px;
height:123px;
float:left;
margin:0 15px 15px 0;
overflow:hidden;
background:url(../images/pic08.jpg);
}
.list .left a:nth-of-type(2),.list .left a:nth-of-type(6),.list .left a:nth-of-type(10){background: url(../images/pic09.jpg);}
.list .left a:nth-of-type(3),.list .left a:nth-of-type(7),.list .left a:nth-of-type(11){background: url(../images/pic10.jpg);}
.list .left a:nth-of-type(4),.list .left a:nth-of-type(8),.list .left a:nth-of-type(12){background: url(../images/pic11.jpg);}
@keyframes findIn{
0%{transform:rotate(-360deg);}
100%{transform:none;}
}
.list .left a img:hover{
display:block;
animation:findIn 1s 1;
opacity:0;
transition:all 0.5s ease-in 0s;
}
.list .left .last{
width:860px;
background:#fff;
height:350px;
padding:25px 0 0 60px;
}
.list .left .last textarea{
width:790px;
height:240px;
padding:10px 0 0 10px;
border:1px solid #ccc;
color:#ccc;
}
.list .left .last span{
float:right;
margin:10px 56px 0 0;
width:100px;
height:30px;
line-height:30px;
text-align:center;
color:#fff;
background:#2fade7;
border-radius:5px;
resize:none;
}
.list .right{
float:left;
width:252px;
height:990px;
}
.list .right p{
font-size:20px;
color:#ccc;
height: 40px;
border-bottom:2px solid #ccc;
}
.list .right section{
margin:10px 0 20px 0;
width:252px;
height:280px;
padding-top:20px;
background:#fff;
text-align:center;
color:#ccc;
}
.list .right section p{
font-size:14px;
border:none;
text-align:left;
height:180px;
padding:20px 20px 0 20px;
}
.list .right section span{
color:#2fade7;
float: right;
margin-right: 20px;
}
.list .right img{
display: block;
margin-top: 15px;
}
|
