HTML作业

HTML课程的期末作业

要求

  1. 制作首页（index.html）
  2. 制作详情页（detail.html）
  3. 制作注册页（register.html）

页面整体为上中下布局
页面中间又分为左右布局
使用DIV来布局网页结构，整体页面布局使用标准文档流布局
局部布局使用浮动定位

1）页面排版、布局合理，页面与效果图一致
2）超链接效果设置正确
3）动画显示正确
4）字体颜色、背景颜色等整体美观

1）首页和详情页需要广告图片banner(不需要滚动,如果能滚动,额外加分)
2）文字排版合理, 不能直接与图片和文字接触, 需要有边距
3）首页默认有音乐自动循环播放, 详情页有视频(默认不需要自动播放)
4）首页和详情页所有图片(除背景和logo之外), 添加鼠标悬浮图片过渡放大
5）详情页必须具有浮动元素
6）首页必须有定位元素
7）首页和详情页侧边要有侧边栏(至少包含返回顶部功能)

1）注册页面需要提供账号、密码、手机号、性别、生日、兴趣爱好等基本信息
2）密码不能显示输入内容
3）性别需要冲突效果,有默认性别
4）兴趣要有默认选中
5）要有提交按钮

1）提供项目介绍文档，内容为以下几点：
a)本项目的开发背景
b)本项目的主要用途
c)项目中遇到的问题是什么？怎么解决的？

注意事项
1、 请注意代码格式规范，缩进符合要求
2、 请注意命名符合规范，主要代码必须有注释

结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|css
|   |——detall.css
|   |——index.css
|   |——register.css
|img
|    |——article.png
|    |——back_top.png
|    |——banner1.jpg
|    |——banner2.jpg
|    |——banner3.jpg
|    |——bg.svg
|    |——home.png
|    |——music.png
|    |——video.mp4
|bgm.mp3
|detail.html
|index.html
|register.html
|说明.md(也不知道老师为什么非要让我们写s)

首页（index.html）

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>主页</title>
</head>
<body> 
    <div id="top">
        <span>BLOG</span>
        <ul>
          
            <a href="index.html"><li>主页</li></a>
            <a href=""><li>归档</li></a>
            <a href=""><li>分类</li></a>
            <a href="register.html"><li>注册</li></a>
            <a href="detail.html"><li>关于</li></a>
        </ul>
    </div>

    <div id="nav">
        <ul>
            <li><a href="#banner"><img src="img/back_top.png" alt="返回顶部"></a></li>
            <li><a href="#article"><img src="img/article.png" alt=""></a></li>
            <li><a href="https://www.wucheng.work"><img src="img/home.png" alt=""></a></li>
            <li class="audio">
                <img src="img/music.png" alt="">
                <div class="music">
                    <audio src="bgm.mp3" controls loop></audio>
                </div>
            </li>
        </ul>
    </div>
    <div id="banner">
        <h2>期末作业</h2>
    </div>

    <div id="nav_page">
        <ol><span>阿巴阿巴</span>
            <a href=""><li>xxxxxx</li></a>
            <a href=""><li>xxxxxx</li></a>
            <a href=""><li>xxxxxx</li></a>
            <a href=""><li>xxxxxx</li></a>
            <a href=""><li>xxxxxx</li></a>
        </ol>
    </div>
  
    <div id="nav_page">
        <ol><span>今日热点</span>
            <a href=""><li>xxxxxx</li></a>
            <a href=""><li>xxxxxx</li></a>
            <a href=""><li>xxxxxx</li></a>
            <a href=""><li>xxxxxx</li></a>
            <a href=""><li>xxxxxx</li></a>
        </ol>
    </div>
  
    <div id="article" onclick="location.href='';">
        <!-- div变为链接 -->
        <h2>标题</h2>
        <p>描述文字</p>  
        <span>阅读全文</span>
    </div>
    <div id="article" onclick="location.href='';">
        <h2>标题</h2>
        <p>描述文字</p>
        <span>阅读全文</span>
    </div>
    <div id="article" onclick="location.href='';">
        <h2>标题</h2>
        <p>描述文字</p>
        <span>阅读全文</span>
    </div>
      
    <div id="article" onclick="location.href='';">
        <h2>标题</h2>
        <p>描述文字</p>
        <span>阅读全文</span>
    </div>
      
    <div id="article" onclick="location.href='';">
        <h2>标题</h2>
        <p>描述文字</p>
        <span>阅读全文</span>
    </div>

  
    <div id="down">
        <p>Make By @Wuhan Polytechnic Software class 6 WuCheng</p>
    </div>
</body>
</html>

index.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
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
html{
    padding: 0px;
    margin: 0px;
    background-color: #34343b;
}
*a{
    display: none;
}

/* 顶部导航栏 */

#top{
    /* border: 1px solid red; */
    height: 60px;
    width: 100%;
    border-bottom: 1px solid #252525;
    background-color: #34343b;
    top: 0;
    /* 距离顶部为0 */
    position: fixed;
    /* 固定在某位置 */
    z-index: 999;
    /* 显示在最上层 */
}

#top span{/* BLOG */
    font-size: 35px;
    font-weight: bolder;
    line-height: 60px;
    margin-left: 20%;
    float: left;
    color: white;
}

#top ul{/* 导航栏链接列表 */
    margin: 0px;
    width: 50%;
    height: 60px;
    margin-left: 45%;
}

#top li{
    float: left;
    list-style-type: none;
    width: 20%;
    height: 60px;
    color: white;
    line-height: 60px;
    text-align: center;
}

#top li:hover{
    background-color: #252525;
    text-shadow: 1px 1px 10px white;
    /* 文字阴影 */
}

/* 侧边栏 */

#nav{
    position: fixed;
    right: 20px;
    bottom: 10%;
    z-index: 999;
}

#nav ul{
    width: auto;
    height: auto;
    list-style-type: none;
}

#nav li{
    border-radius: 10px;
    margin-top: 10px;
    width: 40px;
    height: 40px;
}

#nav img{
    border: 1px solid black;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

#nav img:hover{
    box-shadow: 0px 0px 5px white;
}

#nav .audio{
    /* 定位音乐 */
    position: relative;
}

#nav .music{
    position: absolute;
    left: 60px;
    bottom: -15px;
    transition: all 2s;
    /* 先把音乐放在窗口外 */
}

#nav .audio:hover .music{
    left: -250px;
    /* 移动到窗口 */
}

/* 图片 */

#banner{
    background: url(../img/bg.svg);
    background-size: 100%;
    border: 2px solid gray;
    margin: 0 auto;
    margin-top: 100px;
    border-radius: 30px;
    width: 1500px;
    height: 800px;
    transition: all 1s;
}

#banner:hover{
    /* 鼠标悬浮放大 */
    transform: scale(1.03);
    box-shadow: 1px 1px 10px white;
}

#banner h2{
    /* 图片内文字 */
    font-size: 35px;
    line-height: 800px;
    z-index: 100;
    text-align: center;
    color: white;
}

/* 第二悬浮侧边栏 */

#nav_page{
    width: 200px;
    height: 400px;
    border-radius: 10px;
    padding: 10px;
    margin-top: 100px;
    float: left;
    position: -webkit-sticky;
    position: sticky;
    top: 300px;
    left: 0px;
    /* 滑动到一定位置固定 */
    box-shadow: 1px 1px 10px black;
}

#nav_page span{
    margin: 10px 20px;
    font-size: 20px;
    color: white;
}
#nav_page ol{
    color: rgb(211, 207, 207);
    font-size: 15px;
    line-height: 50px;
}

#nav_page li{
    border-bottom: solid gray;
    color: rgb(211, 207, 207);
}

/* 文章链接块 */

#article{
    border-radius: 10px;
    height: 150px;
    width: 40%;
    margin: auto;
    margin-top: 50px;
    padding: 30px 50px;
    text-align: right;
    box-shadow: 1px 1px 3px gray;;
    transition: all 0.5s;
}

    #article:hover{
    transform: scale(1.01);
    cursor: pointer;
    box-shadow: 2px 2px 5px gray;
    }

#article h2{
    text-align: left;
    color: rgb(211, 207, 207);
}

#article span{
    color: gray;
}

#article p{
    color: rgb(192, 189, 189);
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* 底部 */

#down{
    border-top: gray;
    width: 100%;
    height: 50px;
    margin-top: 80px;
}

#down p{
    color: rgb(192, 189, 189);
    font-size: 15px;
    line-height: 50px;
    text-align: center;
}

注册页（register.html）

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/register.css">
    <title>注册</title>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="index.html"><img src="img/home.png" alt=""></a></li>
            <li class="audio">
                <img src="img/music.png" alt="">
                <div class="music">
                    <audio src="bgm.mp3" controls autoplay loop></audio>
                </div>
            </li>
        </ul>
    </div>
    <form id="register">
        <h1>注册</h1>
        <p>用户名:<input type="text" name="user"></p>
        <p>密码:<input type="password" name="suer"></p>

        <p>手机号:<input type="text"></p>

        <p>性别:<input type="radio" name="gender" id="gender" value="男" checked>男
        <input type="radio" name="gender" id="gender" value="女">女</p>

        <p>生日:<input type="date" value=""></p>

        <p>兴趣:
            <input type="checkbox" name="interest" id="interest" checked>游戏
            <input type="checkbox" name="interest" id="interest">篮球
            <input type="checkbox" name="interest" id="interest">影视
            <input type="checkbox" name="interest" id="interest">小说
            <input type="checkbox" name="interest" id="interest">其他
        </p>
      
        <div id="button">
            <input type="submit" value="注册" name="user" id="but">
            <input type="reset" name="user" id="but">
        </div>
    </form>
</body>
</html>

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
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
html{
    padding: 0px;
    margin: 0px;
    background: url(../img/bg.svg);
    background-size: 100%;
    background-color: #34343b;
    /* 设置背景 */
}

/* 侧边栏 */

#nav{
    position: fixed;
    right: 20px;
    bottom: 10%;
    z-index: 999;
}

#nav ul{
    width: auto;
    height: auto;
    list-style-type: none;
}

#nav li{
    margin-top: 10px;
    width: 40px;
    height: 40px;

}

#nav img{
    /* 侧边栏图标 */
    border: 1px solid black;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

#nav .audio{
    /* 定位音乐 */
    position: relative;
}

#nav .music{
    position: absolute;
    left: 60px;
    bottom: -15px;
    transition: all 2s;
    /* 先把音乐放在窗口外 */
}

#nav .audio:hover .music{
    left: -250px;
    /* 移动到窗口 */
}

/* 注册窗口 */
#register{
    border: 2px solid gray;
    border-radius: 50px;
    background-color: #34343b;
    width: 30%;
    padding: 70px;
    margin: 100px 33.3%;
    box-shadow: 3px 3px 30px black;
    position: fixed;
  
}

#register h1{
    /* “注册”文字 */
    color: white;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 1px 1px 5px gray;
}

#register input{
    border: 2.5px solid grey;
    color: white;
    border-radius: 30px;
    width: 30%;
    padding: 10px;
    /* 使输入框对其 */
    position:absolute;
    left: 33.3%;
}

#register p{
    color: white;
    font-size: 20px;
    margin: 30px;
    line-height: 30px;
}

#register #gender{
    position: static;
    width: auto;
    margin-left: 15%;
    /* 消除绝对定位影响 */
}

/* 生日 */

#birthday{
    color: white;
    height: 30px;
    width: 20%;
    margin: 20px auto;
}

/* 兴趣 */
#register #interest{
    position: static;
    width: auto;
    margin-left: 10px;
}

/* 按钮 */
#button{
    /* border: 1px solid red; */
    width: 50%;
    margin: 10px auto;
}
#register #but{
    font-weight: bolder;
    background-color: #34343b;
    position: static;
    margin-left: 20px;
}

详情页（detail.html）

detail.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/detail.css" type="text/css">
    <title>详情</title>
</head>
<body>
    <div id="top">
        <span>BLOG</span>
        <ul>
          
            <a href="index.html"><li>主页</li></a>
            <a href=""><li>分类</li></a>
            <a href="register.html"><li>注册</li></a>
            <a href="detail.html"><li>关于</li></a>
        </ul>
    </div>
  
    <div id="nav">
        <ul>
            <li><a href="#top"><img src="img/back_top.png" alt="返回顶部"></a></li>
            <li><a href="https://www.wucheng.work"><img src="img/home.png" alt=""></a></li>
            <li class="audio">
                <img src="img/music.png" alt="">
                <div class="music">
                    <audio src="bgm.mp3" controls loop></audio>
                </div>
            </li>
        </ul>
    </div>

    <div id="video">
        <video src="img/video.mp4" controls autoplay loop></video>
    </div>
        <div id="banner">
            <div class="photo">
            <img src="img/banner1.jpg" alt="">
            <img src="img/banner2.jpg" alt="">
            <img src="img/banner3.jpg" alt="">
        </div>
    </div>

    <div id="article">
        <div class="zh">
            <h2>这是一个博客</h2>
            <p>欢迎来到本站
                <br>这里本来有一堆凑数的描述文字
                <br>不过这种东西就不写在这里了
                <br>因为实在不知道写些什么
                <br>本来好好的博客但是期末作业要求是要有详情页和注册页
                <br>只能硬生生的加了上来
                <br>实在怪得很
                <br>早知道还不如找别的网站去写
            </p>
        </div>

        <div class="en">
            <h2>This is a Blog</h2>
            <p>Welcome to blog. 
                <br>这里其实应该是一对英文的
                <br>我也不知道为什么自己要搞个英文的介绍在这里
                <br>大概主要还是闲的蛋疼
                <br>当然在这里展示的当然不可能再写英文了
                <br>毕竟我英文实在烂
                <br>也不想用翻译
                <br>就这样子
            </p>
        </div>
    </div>
</body>
</html>

detail.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
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
html{
    padding: 0px;
    margin: 0px;
    background-color: #34343b;
}

/* 顶部导航栏 */

#top{
    height: 60px;
    width: 100%;
    border-bottom: 1px solid #252525;
    background-color: #34343b;
    top: 0;
    /* 距离顶部为0 */
    position: fixed;
    /* 固定在顶部 */
    z-index: 999;
    /* 显示在最上层 */
}

#top span{/* BLOG */
    font-size: 35px;
    font-weight: bolder;
    line-height: 60px;
    margin-left: 20%;
    float: left;
    color: white;
}

#top ul{
    margin: 0px;
    width: 50%;
    height: 60px;
    margin-left: 45%;
}

#top li{
    /* border: 1px solid blue; */
    float: left;
    list-style-type: none;
    width: 20%;
    height: 60px;
    color: white;
    line-height: 60px;
    text-align: center;
}

#top li:hover{
    background-color: #252525;
    text-shadow: 1px 1px 10px white;
    /* 文字阴影 */
}

/* 侧边栏 */

#nav{
    position: fixed;
    right: 20px;
    bottom: 10%;
    z-index: 999;
}

#nav ul{
    width: auto;
    height: auto;
    list-style-type: none;
}

#nav li{
    margin-top: 10px;
    width: 40px;
    height: 40px;

}

#nav img{
    border: 1px solid black;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

#nav .audio{
    /* 定位音乐 */
    position: relative;
}

#nav .music{
    position: absolute;
    left: 60px;
    bottom: -15px;
    transition: all 2s;
    /* 先把音乐放在窗口外 */
}

#nav .audio:hover .music{
    left: -250px;
    /* 移动到窗口 */
}

/* 视频 */
#video{
    width: 800px;
    height: auto;
    border: 1px solid gray;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 100px;
    margin-left: 100px;
    transition: all 1s;
}

#video:hover{
    transform: scale(1.03);
    box-shadow: 1px 1px 5px gray;
}

#video video{
    width: 100%;
    height: 100%;
}

/* 图片 */

#banner {
    border: 1px solid gray;
    border-radius: 10px;
    width: 800px;
    height: 450px;
    position: absolute;
    top: 100px;
    right: 100px;
    overflow: hidden;
    transition: all 2s;
}

#banner:hover{
    transform: scale(1.03);
    box-shadow: 1px 1px 5px gray;
}

/* 图片轮播 */

.photo {
    width: 2400px;
    height: 450px;
    position: absolute;
    left: 0px;
    animation-name: move;
    animation-duration: 50s;
    animation-iteration-count: infinite;
}

.photo img {
    width: 800px;
    height: 450px;
    float: left;
}
@keyframes move {
    0%,15%{
        left: 0px;
    }
    30%,45%{
        left: -100%;
    }
    60%, 75% {
        left: -200%;
    }
    85%, 100%{
        left: 0px;
    }
}

/* 介绍 */

#article{
    position: relative;
}

#article div{
    border: 0.1px solid gray;
    border-radius: 15px;
    width: 800px;
    height: 500px;
    padding: 30px;
    transition: all 0.5s;
}

#article div:hover{
    box-shadow: 0px 0px 5px gray;
}

.zh{
    position:absolute;
    top: 50px;
    left: 60px;
}

.en{
    position: absolute;
    top: 50px;
    right: 60px;
}

h2{
    text-align: center;
    color: white;
}

p{
    font-size: 20px;
    color: white;
    line-height: 40px;
}

最后

这个破期末作业终于写完了，本来想复刻一个自己的博客的
但是要求要写注册页和详情页只能硬生生的改了

问题不大，反正为了完成任务，再说写的也还能混过去，就是不知道能拿多少分
不说了，困死了，睡觉去了！

这也能拿93分稍微有点离谱了