Web page exercise 15: login interface
Welcome to follow the WeChat public account "Ambition and Home", reply "11.25" to get the materials and source files
Effect picture
Only keep the streamlined effect, the specific details are not shown
Source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻管理系统登录</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
background:#cdcdcc url(img/bg_1.jpg) no-repeat right top;
/* background-size: cover; */
font-size: 14px;
font-family: "宋体" ;
}
table {
width: 400px;
height: 100px;
margin: 200px auto 0px auto;
text-align: center;
}
table caption {
color: #000000;
font-weight: bold;
font-size: 24px;
font-family: "黑体";
margin-bottom: 20px;
}
table,table tr td{
border: 1px #FFFFFF solid;
border-collapse: collapse;
}
table tr td{
width: 200px;
height: 30px;
text-align:center;
vertical-align:middle;
}
table tr td input.txt,table tr td select{
width: 168px;
height: 15px;
}
table tr td select {
width: 172px;
height: 20px;
}
table tr td input[type=button]{
padding: 0px 5px;
}
</style>
</head>
<body>
<form action="#" method="post">
<table border>
<caption>新 闻 管 理 系 统 登 录</caption>
<tr>
<td>用户名:</td>
<td><input class="txt" type="text" /></td>
</tr>
<tr>
<td>密 码:</td>
<td><input class="txt" type="password"/></td>
</tr>
<tr>
<td>身 份:</td>
<td>
<select>
<option selected value="普通用户" value="普通用户">普通用户</option>
<option value="管理员">管理员</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" value="登录" />
</td>
<td>
<input type="button" value="注销" />
</td>
</tr>
</form>
</table>
</body>
</html>