学生信息管理系统MIS(前端)

改造HTML文件

java 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息管理系统MIS</title>
		
		<!-- link在HTML文件中,引入外部的css文件 
			rel的值是固定写法,stylesheet样式表
			href用来指定样式表的位置
		-->
		<link rel="stylesheet" href="student.css"/>
		
	</head>
	<body>
		<!-- 提供表单来提交学生的数据 -->
		<form>
			<h1>学生信息管理系统MIS</h1>
			<table>
				<tr>
					<td>
						姓名: <br />
						<input class="a" type="text" name="user" placeholder="请输入姓名.."/>
					</td>
				</tr>
				<tr>
					<td>
						年龄: <br />
						<input class="a" type="number" name="age" placeholder="请输入年龄.."/>
					</td>
				</tr>
				<tr>
					<td>
						性别:(单选框) 
						<input type="radio" name="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好:(多选) 
						<input type="checkbox" name="like" value="ppq" checked="checked"/>乒乓球
						<input type="checkbox" name="like" value="ps"/>爬山
						<input type="checkbox" name="like" value="cg"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历:(下拉框)  
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">研究生</option>
							<option value="4">小学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期:  <br />
						<input type="date" name="intime"/>
					</td>
				</tr>
				<tr>
					<td>
						<button type="submit" id="btn1">保存</button>
						<button type="reset" id="btn2">取消</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

创建css文件,提取css代码

java 复制代码
/* 输入框 */
.a{
	width: 320px;
	height: 30px;
}
/* 保存按钮 */
#btn1{
	background-color: #0000FF; /* 背景色 */
	color: white; /* 文字颜色 */
	border-color: #0000FF; /* 边框颜色 */
	width: 50px; /* 宽度 */
	height: 30px; /* 高度 */
}
/* 取消按钮 */
#btn2{
	background-color: hotpink; /* 背景色 */
	border-color: hotpink; /* 边框颜色 */
	color: white; /* 文字颜色 */
	width: 50px; /* 宽度 */
	height: 30px; /* 高度 */
}

创建HTML网页文件

java 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		
		<!-- 在HTML中引入css文件 -->
		<link rel="stylesheet" href="regist.css" />
	</head>
	<body>
		<form method="post" action="#">
			<h3>用户注册</h3>
			<div>
				<input class="a" type="text" placeholder="用户名" name="user"/>
			</div>
			<div>
				<span>支持中文、字母、数字、"-"、"_"的组合,4-20个字符</span>
			</div>
			<div>
				<input class="a" type="password" placeholder="设置密码" name="pwd"/>
			</div>
			<div>
				<span>建议使用数字、字母和符号两种以上的组合,6-20个字符</span>
			</div>
			<div>
				<input class="a" type="password" placeholder="确认密码" name="repwd"/>
			</div>
			<div>
				<span>两次密码输入不一致</span>
			</div>
			<div>
				<input class="a" type="number" placeholder="验证手机" name="tel"/>
				 或 
				<a href="#">验证邮箱</a>
			</div>
			<div id="readme">
				<input type="checkbox"/>
				我已阅读并同意
				<a href="#">《京淘用户注册协议》</a>
			</div>
			<div>
				<button type="submit">立即注册</button>
			</div>
		</form>
	</body>
</html>

创建css文件

java 复制代码
/* 输入框 */
.a{
	width: 350px;/* 宽度 */
	height: 30px;/* 高度 */
	padding: 5px;/* 内边距 */
}
/* 按钮 */
button{
	width: 360px;/* 宽度 */
	height: 40px;/* 高度 */
	background-color: red;/* 背景色 */
	border-color: red;/* 边框颜色 */
	color: white;/* 文字颜色 */
	font-size: 20px;/* 文字字号 */
}
/* 提示文字 */
span{
	font-size: 5px;/* 字号变小 */
	color: gray;/* 灰色的字 */
	padding: 20px; /* 内边距 */
}
/* 设置用户注册 */
h3{
	/*text-align: center;文本居中 */
	padding-left: 130px;/* 左边距 */
}
/* 修饰我已阅读 */
#readme{
	padding: 15px;/* 左边距 */
}
相关推荐
掘金安东尼3 小时前
bun install:安装过程的幕后揭秘
前端·github·bun
Dontla3 小时前
流行的前端架构与后端架构介绍(Architecture)
前端·架构
muchan923 小时前
为什么“它”在业务逻辑上是最简单的?
前端·后端·面试
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 6 - 响应式核心:链表实装应用
前端·vue.js
艾小码3 小时前
Vue模板进阶:这些隐藏技巧让你的开发效率翻倍!
前端·javascript·vue.js
浩浩kids3 小时前
Web-birthday
前端
艾小码3 小时前
还在手动加载全部组件?这招让Vue应用性能飙升200%!
前端·javascript·vue.js
方始终_3 小时前
做一个图表MCP Server,分分钟的事儿?
前端·agent·mcp
yiyesushu3 小时前
solidity front-ends(html+js+ethers v6)
前端
白袜队今年挖矿机3 小时前
Spring事务基础概念
前端