学生课程表表格/用户注册表单
16lz
2021-03-20
一.学生课程表
1.课程表模样
2.课程表html代码块
<!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" />
<title>2020新学期课程表</title>
<style type="text/css">
caption {
/*定义标题加粗*/
font-weight: bold;
}
table,
th,
td {
/*定义表格样式*/
border: 1px solid red;
border-collapse: collapse;
text-align: center;
}
.themorning {
/*定义字体颜色和背景*/
color: fuchsia;
background-color: lightpink;
}
.theafternoon {
/*定义字体颜色和背景*/
color: goldenrod;
background-color: lightcyan;
}
thead {
/*定义背景颜色*/
background-color: lightcoral;
}
tfoot {
/*定义背景颜色*/
background-color: lemonchiffon;
}
</style>
</head>
<body>
<div>
<table>
<!-- 表格标题 -->
<caption>
2020新学期课程表
</caption>
<!-- 表格头部 -->
<thead>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</thead>
<!-- 表格体部上午 -->
<tbody>
<tr>
<td rowspan="4" class="themorning" id="top1">上午</td>
<td class="themorning">语文</td>
<td class="themorning">英语</td>
<td class="themorning">数学</td>
<td class="themorning">音乐</td>
<td class="themorning">数学</td>
</tr>
<tr>
<!-- <td class="themorning"></td> -->
<td class="themorning">音乐</td>
<td class="themorning">美术</td>
<td class="themorning">语文</td>
<td class="themorning">英语</td>
<td class="themorning">语文</td>
</tr>
<tr>
<!-- <td class="themorning"></td> -->
<td class="themorning">美术</td>
<td class="themorning">阅读</td>
<td class="themorning">体育</td>
<td class="themorning">数学</td>
<td class="themorning">英语</td>
</tr>
<tr>
<!-- <td class="themorning"></td> -->
<td class="themorning">英语</td>
<td class="themorning">音乐</td>
<td class="themorning">科学</td>
<td class="themorning">美术</td>
<td class="themorning">科学</td>
</tr>
</tbody>
<!-- 表格体部下午 -->
<tbody>
<tr>
<td rowspan="4" class="theafternoon" id="top2">下午</td>
<td class="theafternoon">语文</td>
<td class="theafternoon">英语</td>
<td class="theafternoon">数学</td>
<td class="theafternoon">音乐</td>
<td class="theafternoon">数学</td>
</tr>
<tr>
<!-- <td class="theafternoon"></td> -->
<td class="theafternoon">音乐</td>
<td class="theafternoon">美术</td>
<td class="theafternoon">语文</td>
<td class="theafternoon">英语</td>
<td class="theafternoon">语文</td>
</tr>
<tr>
<!-- <td class="theafternoon"></td> -->
<td class="theafternoon">美术</td>
<td class="theafternoon">阅读</td>
<td class="theafternoon">体育</td>
<td class="theafternoon">数学</td>
<td class="theafternoon">英语</td>
</tr>
<tr>
<!-- <td class="theafternoon"></td> -->
<td class="theafternoon">音乐</td>
<td class="theafternoon">美术</td>
<td class="theafternoon">语文</td>
<td class="theafternoon">英语</td>
<td class="theafternoon">语文</td>
</tr>
</tbody>
<!-- 表格部尾部 -->
<tfoot>
<tr>
<td>备注:</td>
<td colspan="5">每天下午17:00放学,作业在晚上20:00提交到群内</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
二.用户注册表单
1.用户注册表单模样
2.用户注册表单html代码块
<!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" />
<title>用户注册表单</title>
<style type="text/css">
div {
border: 1px solid coral;
width: 245px;
height: 35px;
}
#submit {
text-align: center;
}
</style>
</head>
<body>
<div>
<form method="POST" action="">
<!-- maxlength 设置最大长12位数 minlength 设置最小6位数 autofocus 设置自动焦点 required 设置必填项 -->
<div>
<label for="usserneme"> 账号:*</label>
<input
type="text"
id="usserneme"
name="usserneme"
minlength="6"
maxlength="12"
placeholder="*号必填项6-8位数"
autofocus
required
/>
</div>
<div>
<!-- input type password 是密码框选项可以隐藏文本输入 -->
<label for="password"> 密码:*</label>
<input
type="password"
name="password"
id="password"
placeholder="*号必填项字母+数字"
minlength="8"
maxlength="12"
required
/>
</div>
<div>
<label for="emali">邮箱:*</label>
<input
type="email"
name="emali"
id="emali"
placeholder="*号必填项admin@qq.com"
required
/>
</div>
<div>
<!-- 单选框使用 input type radio -->
<label for="secret">性别:</label>
<input type="radio" name="gender" id="male" value="male" />
<label for="male">男</label>
<input type="radio" name="gender" id="female" value="female" />
<label for="female">女</label>
<input
type="radio"
name="gender"
id="secret"
value="secret"
checked
/>
<label for="secret">保密</label>
</div>
<div>
<label for="">爱好:</label>
<input type="checkbox" name="hobby[]" id="lvxing" value="lvxing" />
<label for="lvxing">旅行</label>
<input
type="checkbox"
name="hobby[]"
id="yumaoqiu"
value="yumaoqiu"
checked
/>
<label for="yumaoqiu">羽毛球</label>
<input type="checkbox" name="hobby[]" id="lanqiu" value="lanqiu" />
<label for="lanqiu">篮球</label>
</div>
<div>
<!-- 复选框 select要配合option一起使用 selected是默认选一个值 -->
<label for="">想学习:</label>
<select name="" id="">
<option value="html">html</option>
<option value="css">css</option>
<option value="JavaScript">JavaScript</option>
<option value="php" selected>php</option>
</select>
</div>
<div>
<!-- 这是一个input+select 下拉列表+文本框 -->
<label for="">关键字:</label>
<input
type="search"
name="search"
id=""
list="my-key"
placeholder="请输入文字搜索"
/>
<datalist id="my-key">
<option value="php中文网"></option>
<option value="百度一下"></option>
<option value="新浪微博"></option>
</datalist>
</div>
<div id="submit">
<!-- input type submit 提交按钮 -->
<input type="submit" value="提交" />
</div>
</form>
</div>
</body>
</html>
更多相关文章
- html基础:制作简单的表格与表单
- 利用html制作一个课程表与注册表
- 课程表、用户注册及 css 预习
- markdown的常用语法
- Python数据分析难吗?需要英语数学基础吗?
- 学习Python数学英语基础重要吗?Python教程!
- 课程表与表单的制作
- Android(安卓)多语言支持
- Android遇上Kotlin | Kotlin若只如初见