您的位置：首页 > Web前端

iOS转前端之仿写登录页面

2017-07-18 14:13 260 查看

今天还是来仿写一个常用的登录界面，巩固一下之前掌握的知识。

同样的我们还是先构建一个项目，创建对应的css文件和html文件，then begin code~

首先是html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎登录</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--面板-->
<div id="panel">
<!--面板的头部-->
<div class="panel-top">
<h2>欢迎登录CSDN官网</h2>
</div>
<!--面板的主要内容-->
<div class="panel-content">
<div class="int">
<label><img src="images/icon_people.png"></label>
<input type="text" placeholder="您的手机号/用户名">
</div>
<div class="int">
<label><img src="images/icon_password.png"></label>
<input type="password" placeholder="输入密码">
</div>
<div class="pwd-login">
<a href="#" class="pwd-login-left"><input type="checkbox"><span>下次自动登录</span></a>
<a href="#" class="pwd-login-right"><span>忘记密码?</span></a>
</div>
<div class="login">
<button>登录</button>
</div>
<div class="reg">
还没账号？<a href="#">马上注册</a>
</div>
</div>
<!--面板的底部-->
<div class="panel-footer">
<span>社交账号登录</span>
<img src="images/sina.png">
<img src="images/weixin.png">
<img src="images/qq.png">
</div>
</div>
</body>
</html>

搭建好基本骨架后，需要进行布局和装修~

下面是CSS文件:

a, body, title, header, span, div, p, label, img, input, button, img{
padding: 0px;
margin: 0px;
}

body {
background: #F2F2F2;
text-align: center;
}

/*面板*/
#panel {
display: inline-block;
margin-top: 100px;
background: white;
border: 1px solid #ddd;
padding: 20px;
border-radius: 6px;
box-shadow: 0px 0px 6px #999;
width: 260px;
}

/*面板头部*/
#panel .panel-top {
font-size: 13px;
font-family: Arial;
padding: 5px 0px;
border-bottom: 1px solid #ddd;
margin: 0 auto;
}

/*面板内容*/
#panel .panel-content{
margin-top: 20px;
}

#panel .panel-content .int {
margin-bottom: 9px;
height: 36px;
position: relative;
}

#panel .panel-content .int label {
position: absolute;
top: 7px;
left: 6px;
}

#panel .panel-content .int input {
width: 100%;
height: 100%;
border: 1px solid #ddd;
padding-left: 38px;
box-sizing: border-box;
border-radius: 5px;
}

#panel .panel-content .int input:focus {
outline: none;
border: 1px solid orangered;
box-shadow: 0 0 2px orangered;
}

#panel .panel-content .pwd-login a {
color: gray;
font-size: 13px;
margin-bottom: 10px;
text-decoration: none;
color: #999;
}

#panel .panel-content .pwd-login a.pwd-login-right {
float: right;
}

#panel .panel-content .pwd-login a.pwd-login-left{
float: left;
}

#panel .panel-content .pwd-login a.pwd-login-left input{
margin-right: 3px;
}

#panel .panel-content .login button {
width: 100%;
height: 33px;
border: 0;
color: white;
font-size: 17px;
margin-bottom: 10px;
border-radius: 5px;
background: orange;
}

#panel .panel-content .reg {
/*background: red;*/
height: 30px;
line-height: 30px;
font-size: 13px;
text-align: center;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}

#panel .panel-content .reg a {
color: orange;
text-decoration: none;
margin-left: 3px;
}

/*面板底部*/
#panel .panel-footer {
height: 30px;
line-height: 30px;
text-align: center;
}

#panel .panel-footer img{
width: 30px;
vertical-align: middle;
}

OK~ 搞定，下面看效果图：

具体的Demo，请移步传送门。记住一定要多多练习。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航