由于昨天事情有点多迟了一天,昨天的任务是:仿照电脑端百度登录框制作一个登录界面。
HTML部分代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="06.css">
</head>
<body>
<div class="login">
<div class="title">
<div class="title_img">
<img src="baidulogo.jpg">
</div>
<div class="title_content">
登录百度账号
</div>
</div>
<div class="content">
<div class="sms_login">
<a href="">短信快捷登录</a>
</div>
<form method="get">
<input type="text" name="UserName" placeholder="用户名或邮箱" class="usrname">
<input type="password" name="UserPassword" placeholder="密码" class="pass">
<div class="remember">
<input type="checkbox" name="Check"><span>下次自动登录</span>
</div>
<div class="problem_login">
<a href="">登录遇到问题</a>
</div>
<input type="submit" name="SubmitButton" value="登录" class="submitBtn">
</form>
<div class="register">
<a href="">立即注册</a>
</div>
</div>
<hr />
<div class="other_login">
<div class="other_title">
可以使用以下方式登录
</div>
<div class="other_icon">
<img src="qq.jpg" alt="QQ图标">
<img src="weibo.jpg" alt="微博图标">
</div>
</div>
</div>
</body>
</html>
CSS部分代码如下:
.login{
border-style: solid;
border-width: 1px;
border-color: black;
width: 400px;
/*使用绝对布局
position: absolute;
margin-top:100px;
margin-left: 200px;*/
margin:0 auto;
}
.title{
font-weight: bold;
font-size: 20px;
font-family: courier,serif;
background-color: #E8E8E8;
padding: 8px;
height: 35px;
}
.title img{
width: 30px;
height: 30px;
}
.title_content, .title_img{
float:left;
}
.title_content{
margin:3px auto 3px 3px;
}
.content, .other_login{
margin:20px;
}
.sms_login{
text-align: right;
font-size: 14px;
}
.usrname, .pass, .submitBtn{
width: 100%;
font-size: 16px;
padding: 8px 0px 8px 0px;
}
.sms_login, .usrname, .pass, .remember, .submitBtn{
margin-bottom: 5px;
}
.usrname, .pass, .remember, .submitBtn, .register{
margin-top: 6px;
}
.remember{
font-size: 12px;
}
.problem_login{
text-align: right;
font-size: 12px;
}
.submitBtn{
color: white;
border-radius: 5px;
background-color: #2066C5;
}
.register{
text-align: right;
font-size: 12px;
}
a:link, a:visited{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
hr{
/*color: #E8E8E8;*/
color: #D8D8D8;
}
.other_icon img{
width: 25px;
height: 25px;
margin:5px;
}
.other_title{
color: #606060;
font-size: 12px;
margin-bottom: 5px;
}
效果如下: