改造HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>學(xué)生信息管理系統(tǒng)MIS</title>
<!-- link在HTML文件中,引入外部的css文件
rel的值是固定寫法,stylesheet樣式表
href用來指定樣式表的位置
-->
<link rel="stylesheet" href="student.css"/>
</head>
<body>
<!-- 提供表單來提交學(xué)生的數(shù)據(jù) -->
<form>
<h1>學(xué)生信息管理系統(tǒng)MIS</h1>
<table>
<tr>
<td>
姓名: <br />
<input class="a" type="text" name="user" placeholder="請(qǐng)輸入姓名.."/>
</td>
</tr>
<tr>
<td>
年齡: <br />
<input class="a" type="number" name="age" placeholder="請(qǐng)輸入年齡.."/>
</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>
學(xué)歷:(下拉框)
<select name="edu">
<option value="1">本科</option>
<option value="2">?？?span id="n5n3t3z" class="token operator"></option>
<option value="3">研究生</option>
<option value="4">小學(xué)</option>
</select>
</td>
</tr>
<tr>
<td>
入學(xué)日期: <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>
創(chuàng)建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; /* 高度 */
}
創(chuàng)建HTML網(wǎng)頁文件文章來源：http://www.zghlxwxcb.cn/news/detail-690089.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶注冊(cè)</title>
<!-- 在HTML中引入css文件 -->
<link rel="stylesheet" href="regist.css" />
</head>
<body>
<form method="post" action="#">
<h3>用戶注冊(cè)</h3>
<div>
<input class="a" type="text" placeholder="用戶名" name="user"/>
</div>
<div>
<span>支持中文、字母、數(shù)字、“-”、“_”的組合，4-20個(gè)字符</span>
</div>
<div>
<input class="a" type="password" placeholder="設(shè)置密碼" name="pwd"/>
</div>
<div>
<span>建議使用數(shù)字、字母和符號(hào)兩種以上的組合，6-20個(gè)字符</span>
</div>
<div>
<input class="a" type="password" placeholder="確認(rèn)密碼" name="repwd"/>
</div>
<div>
<span>兩次密碼輸入不一致</span>
</div>
<div>
<input class="a" type="number" placeholder="驗(yàn)證手機(jī)" name="tel"/>
或
<a href="#">驗(yàn)證郵箱</a>
</div>
<div id="readme">
<input type="checkbox"/>
我已閱讀并同意
<a href="#">《京淘用戶注冊(cè)協(xié)議》</a>
</div>
<div>
<button type="submit">立即注冊(cè)</button>
</div>
</form>
</body>
</html>
創(chuàng)建css文件文章來源地址http://www.zghlxwxcb.cn/news/detail-690089.html
/* 輸入框 */
.a{
width: 350px;/* 寬度 */
height: 30px;/* 高度 */
padding: 5px;/* 內(nèi)邊距 */
}
/* 按鈕 */
button{
width: 360px;/* 寬度 */
height: 40px;/* 高度 */
background-color: red;/* 背景色 */
border-color: red;/* 邊框顏色 */
color: white;/* 文字顏色 */
font-size: 20px;/* 文字字號(hào) */
}
/* 提示文字 */
span{
font-size: 5px;/* 字號(hào)變小 */
color: gray;/* 灰色的字 */
padding: 20px; /* 內(nèi)邊距 */
}
/* 設(shè)置用戶注冊(cè) */
h3{
/*text-align: center;文本居中 */
padding-left: 130px;/* 左邊距 */
}
/* 修飾我已閱讀 */
#readme{
padding: 15px;/* 左邊距 */
}
到了這里，關(guān)于學(xué)生信息管理系統(tǒng)MIS（前端）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
