学习html的第二天，学习了一下css样式表，通过使用css练习实现一个简单的登陆页面，刚开始学习很多地方都不是很完善，在使用css来控制标签的样式也是多番调试，去查询各种属性。代码也不是很完美。对于模块的布局也做得不是很好，因为还没学习到布局的内容，所以这里就用了表格来实现，希望之后学习更多之后能够完成的更好！
登陆页面.png
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<link rel="stylesheet" href="css/登陆页面练习.css">
</head>
<body>
<div>
<!--背景图片-->
<div id="web_bg" style="background-image: url(img/111.jpg);"></div>
</div>
<div>
<div>
<table class="tb1" border="1" >
<tr class="tr1">
<td>后台管理系统<br>BACKGROUND MANAGEMENT SYSTEM</td>
</tr>
<form>
<tr>
<td>
<div>
<font>用户名:</font> <input type="text" name="用户名" >
</div>
</td>
</tr>
<tr>
<td>
<div>
<font>密 码:</font> <input type="password" name="密码">
</div>
</td>
</tr>
<tr>
<td>
    <input class="radio" type="radio" >记住密码           忘记密码？
</td>
</tr>
<tr>
<td>
<div >    <input class="dl" type="submit" value="登录" >
</div>
</td>
</tr>
</form>
<tr>
<td>
<font>还没有此账号？<a target="_blank" href="https:www.baidu.com">立即注册</a></font><br><br>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css部分
.tr1{
height: 20%;
text-align: center;
background-color: #A4D3EE;
font-size: 18px;
font-weight: bold;
color: white;
}
.tb1{
width:500px;
height:350px;
position:absolute;
top: 30%;
left: 58%;
bottom: 0px;
}
.dl{
color: white;
background-color: #A4D3EE;
font-size: 20px;
font-weight: bold;
}
.radio{
height: 16px;
width: 16px;
}
input {
width: 300px;
height: 40px;
font-size:25px;
}
div{
text-align: center;
}
tr{
border-color: rgba(0,0,0,0);
}
#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
网友评论