学生信息管理系统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;/* 左边距 */
}
相关推荐
musk121212 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css