24数科、智科、虚拟实验课作业

注意

点击代码块，可使用方向键左右移动查看代码
注释部分不需要敲
必须要在课堂资源里下载semantic.min.css，并正确写对css路径
推荐在电脑上分屏敲，一半浏览器、一半Hbuilder~
提交运行后截图，注意改脚标你的名字

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/semantic.min.css">
		<style>
			
			/* 1. 通配符选择器 * 
			   选择方法：通配符选择器，语法是 *，匹配页面上所有元素。
			   作用：给所有元素统一重置默认样式。
			*/
			* {
			    padding: 0;             /* 内边距：元素内容与边框的距离。设置为0，清除浏览器默认内边距 */
			    margin: 0;              /* 外边距：元素与外部元素的距离。设置为0，清除浏览器默认外边距 */
			    box-sizing: border-box; /* 盒模型计算方式：border-box表示padding和border包含在width/height内，方便统一布局 
				                         简单理解：如果你写了 width: 200px; padding: 10px; border: 2px;，那么元素总宽度仍然是200px，不会再额外增加。*/
			}
			/* 2. 类选择器 .bg
			   选择方法：类选择器，语法是 .类名，匹配 class="bg" 的元素。
			   作用：设置背景容器的绝对定位和占满全屏。
			*/
			.bg {
			    position: absolute; /* 绝对定位，使元素脱离文档流，意味着这个元素不会影响其他元素的布局，其他元素会像它不存在一样排布。可通过 left/top/right/bottom 控制位置 */
			    width: 100%;        /* 宽度100%，占满父元素 */
			    height: 100%;       /* 高度100%，占满父元素 */
			}
			
			/* 3. 标签选择器 video
			   选择方法：标签选择器，直接使用标签名匹配 <video> 元素。
			   作用：控制视频背景大小和位置。
			*/
			video {
			    position: absolute; /* 绝对定位，覆盖背景 */
			    width: 100%;        /* 宽度占满父容器 */
			    height: 100%;       /* 高度占满父容器 */
			    bottom: 0;          /* 底部对齐父容器底部 */
			    right: 0;           /* 右侧对齐父容器右边 */
			    z-index: -1;        /* 层叠顺序，置于最底层，不遮挡其他内容 */
			    object-fit: cover;  /* 视频按比例填充容器，多余部分裁剪，保证不变形 */
			}
			
			/* 4. 类选择器 .resi
			   选择方法：类选择器，匹配 class="resi" 的元素。
			   作用：注册框容器，设置位置、尺寸、背景和阴影效果。
			*/
			.resi {
			    position: absolute;                    /* 绝对定位，可放置在指定位置 */
			    width: 30%;                            /* 宽度占父容器30% */
			    height: 75%;                           /* 高度占父容器75% */
			    background-color: rgba(0, 0, 0, 0.3);  /* 半透明黑色背景 */
			    border-radius: 10%;                    /* 圆角，使视觉更柔和 */
			    left: 65%;                             /* 左边距65%，靠右显示 */
			    top: 12.5%;                            /* 上边距12.5%，垂直居中微调 */
			    padding: 20px;                         /* 内边距，内容不贴边 */
			}
			
			/* 5. 类选择器 .resi-title
			   选择方法：类选择器，匹配 class="resi-title" 的元素。
			   作用：注册框标题样式。
			*/
			.resi-title {
			    color: white;             /* 字体颜色白色 */
			    margin-bottom: 5px;       /* 下方间距5px，控制标题与下方内容间距 */
			    font-size: 2em;           /* 字体大小2倍基准大小 */
			    font-family: 'PixelFont'; /* 自定义像素字体 */
			    text-align: center;       /* 居中对齐文字 */
			}
			/* 6. 多重标签选择器 p, legend
			   选择方法：多重选择器，用逗号分隔，匹配 <p> 和 <legend> 元素。
			   作用：统一段落和 fieldset 标题样式。
			*/
			p, legend {
			    color: white;             /* 白色字体 */
			    margin-bottom: 6px;       /* 下边距6px，控制行间距 */
			    font-size: 1.2em;         /* 字体大小稍大 */
			    font-family: 'PixelFont'; /* 像素风字体 */
			    text-align: center;       /* 居中对齐 */
			}
			
			/* 7. 标签选择器 label
			   选择方法：标签选择器，匹配 <label> 元素。
			   作用：表单标签样式。
			*/
			label {
			    display: block;           /* 块级显示，让标签独占一行 */
			    color: white;             /* 白色字体 */
			    margin-bottom: 4px;       /* 下边距4px */
			    font-size: 1.2em;         /* 字体大小 */
			    font-family: 'PixelFont'; /* 像素风字体 */
			    text-align: left;         /* 左对齐文字 */
			}
			
			/* 8. 属性选择器 input[type="checkbox"]
			   选择方法：属性选择器，匹配 type="checkbox" 的 input 元素。
			   作用：调整复选框垂直对齐和间距。
			*/
			input[type="checkbox"] {
			    margin-top: 4px;        /* 上边距4px，微调位置 */
			}
			
			/* 9. 组合类选择器与属性选择器
			   选择方法：复合选择器，匹配 .ui.form 下特定类型的 input。
			   作用：设置输入框背景色和底部间距。
			*/
			.ui.form input[type="email"],
			.ui.form input[type="text"],
			.ui.form input[type="password"],
			.ui.form input[type="date"] {
			    background-color: #f0e8ff !important; /* 设置淡蓝色背景，!important 覆盖默认样式 */
			    margin-bottom: 6px;                   /* 每个输入框底部间距 */
			}
			
			/* 10. 属性选择器 input[list="software"]
			    选择方法：属性选择器，匹配具有 list="software" 属性的 input。
			    作用：设置 datalist 输入框背景颜色。
			*/
			input[list="software"] {
			    background-color: #f0e8ff !important; /* 淡蓝色背景 */
			}
			
			/* 11. 标签选择器 select
			    选择方法：标签选择器，匹配 <select> 元素。
			    作用：设置下拉框背景颜色。
			*/
			select {
			    background-color: #f0e8ff !important; /* 淡蓝色背景 */
			}
			/* 12. 类选择器 .form-group
			    选择方法：类选择器，匹配 class="form-group" 的元素。
			    作用：设置每组表单元素占满宽度。
			*/
			.form-group {
			    width: 100%; /* 占满父容器宽度 */
			}
			/* 13. 标签选择器 fieldset
			    选择方法：标签选择器，匹配 <fieldset> 元素。
			    作用：控制每个 fieldset 的内外间距。
			*/
			fieldset{
			    margin-bottom: 10px; /* 底部间距10px，fieldset之间有空隙 */
			    padding: 10px;       /* 内边距10px，内容不贴边 */
			}
			
			/* 14. 类选择器 .button-group
			    选择方法：类选择器，匹配 class="button-group" 的元素。
			    作用：按钮容器布局。
			*/
			.button-group {
			    display: flex;          /* 启用弹性布局，横向排列子元素 */
			    justify-content: center;/* 水平居中所有按钮 */
			    gap: 15px;              /* 按钮之间间距均等 */
			}
			footer {
			            position: absolute;
			            bottom: 10px;
			            width: 100%;
			            text-align: center;
			            color: white;
			            font-size: 14px;
			            font-family: Arial;
			        }
		</style>
		
	</head>
	<body>
		<div class="bg">
			<video autoplay loop muted>
				<source src="video/jett.mp4" type="video/mp4">
			</video>
			<div class="resi">
				<h1 class="resi-title">注册</h1>
				<form class="form-group ui form">
					<fieldset>
					    <legend>个人资料</legend>
						<div>
						    <label>电子邮箱：</label>
						    <input type="email" placeholder="电子邮箱">
						</div>
						<div>
						      <label>用户名：</label>
						      <input type="text" placeholder="用户名">
						</div>
						<div>
						    <label>密码：</label>
						    <input type="password" placeholder="密码">
						</div>
						<div>
						      <label>出生日期：</label>
						      <input type="date" placeholder="出生日期">
						</div>
						<div>
						    <p>兴趣爱好：
						      <input class="ui checkbox" type="checkbox" name="fans" value="01"/>唱歌
						      <input class="ui checkbox" type="checkbox" name="fans" value="02"/>打球
						      <input class="ui checkbox" type="checkbox" name="fans" value="03"/>下棋
						      <input class="ui checkbox" type="checkbox" name="fans" value="04"/>上网
						      <input class="ui checkbox" type="checkbox" name="fans" value="05"/>购物
							</p>
						</div>
						<p>性别：<input class="ui radio" type="radio" name="sex" value="男" checked />男
						       <input class="ui radio" type="radio" name="sex" value="女"/>女
						</p>
					</fieldset>
					<fieldset>
					    <legend>专业与课程</legend>
					    <label for="">课程名：</label><select name="course">
					        <option>软件工程</option>
					        <option>计算机应用</option>
					        <option selected>大数据技术</option>
					        <option>数据库应用基础</option>
					        <option>C语言</option>
					        <option>网页设计</option>
					    </select>
					    &nbsp;&nbsp;
						<label for="">工具软件：</label><input list="software">
					    <datalist id="software">
					        <option value="1">Kingsoft WPS</option>
					        <option value="2">MS Office</option>
					        <option value="3">Visio</option>
					        <option value="4">ToDesk</option>
					        <option value="5">腾讯会议</option>
					    </datalist>
					</fieldset>
					<div class="button-group">
					    <input class="ui yellow basic button" type="submit" value="提交"/> 
					    <input class="ui inverted yellow button" type="reset" value="重填"/>
					    <button class="ui inverted violet button" onclick=alert("用于执行客户端脚本。")>执行客户端脚本</button>
					</div>
					</form>
			</div>
		</div>
		<footer>
		        © 2025 |（改为你的名字）  
		</footer>
	</body>
</html>