Web网页练习15: 登录界面
欢迎关注微信公众号"野心与家",回复"11.25"获取素材与源文件
效果图
只保留精简效果,具体细节未展示
源代码
<!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>