改造HTML文件
<!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代码
/* 输入框 */
.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网页文件
<!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文件
/* 输入框 */
.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;/* 左边距 */
}