引言 : 博主目前是一名iOS開發者, 所會的語言有Objective-C 和 Swift, 目前正在學習前端; 這篇文章只是作為我的筆記發在這里, 供自己業余時間看看; 全是很基礎的東西, 看到的小伙伴 酌情略過 吧_
效果圖 :
1. 代碼 - 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-header">
<h2>歡迎登錄</h2>
</div>
<!--面板的主要內容-->
<div class="pannel-content">
<div class="input">
<label></label>
<input type="text" placeholder="您的手機號/用戶名">
</div>
<div class="input">
<label></label>
<input type="password" placeholder="輸入密碼">
</div>
<div class="pwd-login">
<input type="checkbox">
<a href="#" class="pwd-login-left">
下次自動登錄
</a>
<a href="#" class="pwd-login-right">
忘記密碼?
</a>
</div>
<div class="login">
<button>登錄</button>
</div>
<div class="reg">
還沒賬號?<a href="#">馬上注冊</a>
</div>
</div>
<!--面板的底部-->
<div class="pannel-footer">
<span>社交賬號登錄</span>
</div>
</div>
</body>
</html>
2. 代碼 - CSS
* {
padding:0px;
margin:0px;
}
body{
background-color: #F2F2F2;
text-align: center;
}
/*面板*/
#panel{
display: inline-block;
margin-top: 50px;
background-color: white;
border: 1px #dddddd solid;
padding: 20px;
border-radius: 6px;
box-sizing: border-box;
/*陰影: 水平 豎直 模糊x像素 顏色*/
box-shadow: 0px 0px 10px #999;
width: 300px;
}
/*面板頭部*/
#panel .panel-header{
font-size: 13px;
font-family: Arial;
border-bottom: 1px solid #dddddd;
padding: 10px 0px;
width: 150px;
margin: 0px auto;
}
/*面板中間*/
#panel .pannel-content{
margin-top: 20px;
}
#panel .pannel-content .input{
margin-bottom: 9px;
position: relative;
height: 36px;
}
#panel .pannel-content label{
position: absolute;
top: 7px;
left: 6px;
}
#panel .pannel-content .input input{
width: 100%;
height: 100%;
border: 1px solid #dddddd;
padding-left: 40px;
box-sizing: border-box;
border-radius: 6px;
}
#panel .pannel-content input:focus{
outline: none;
border: 1px solid orange;
box-shadow: 0px 0px 2px orange;
}
#panel .pannel-content .pwd-login{
position: relative;
margin-right: 0px;
height:20px;
line-height: 20px;
}
#panel .pannel-content .pwd-login input{
float: left;
display: block;
position: absolute;
left: 0px;
top: 4px;
}
#panel .pannel-content .pwd-login a{
/*display: inline-block;*/
color: gray;
font-size: 13px;
width: auto;
text-decoration: none;
}
/*下次自動登錄*/
#panel .pannel-content .pwd-login .pwd-login-left{
position: absolute;
margin-left: 5px;
left: 12px;
width: auto;
}
#panel .pannel-content .pwd-login .pwd-login-right{
/*浮動在最右邊*/
float: right;
}
#panel .login button{
width: 100%;
height: 33px;
border: 0px;
color: white;
font-size: 17px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 6px;
background-color: orange;
outline: none;
}
#panel .reg{
height: 30px;
line-height: 30px;
font-size: 13px;
border-bottom: 1px solid #dddddd;
}
#panel .reg a {
color: orange;
/*去掉下劃線*/
text-decoration: none;
margin-bottom: 4px;
}
#panel .pannel-footer{
position: relative;
height: 40px;
line-height: 40px;
text-align: left;
}
#panel .pannel-footer span{
/*position: absolute;*/
left: 0px;
width: auto;
}
#panel .pannel-footer img{
width: 25px;
/*垂直居中*/
vertical-align: middle;
}
