效果圖：
我使用的開發(fā)工具是JetBrains Webstorm哈蝇，自行百度下荐绝，IDE很多社痛，只是我很喜歡這個(gè)界面：
建立我們的項(xiàng)目：
1.新建一個(gè)空項(xiàng)目
2.建立html文件和 images文件夾以及css文件夾
3.提醒下 建立css文件的方法：
注意新建的css文件 一定要后綴名是css
開始動(dòng)工：
在index.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>歡迎登錄教育系統(tǒng)</h2>
</div> <!--面板的主要內(nèi)容-->
<div class="panel-content">
<div class="int">
<label><img src="images/user.png" ></label>
<input type="text" placeholder="你的手機(jī)號(hào)/用戶名">
</div>
<div class="int">
<label><img src="images/user.png" ></label>
<input type="password" placeholder="輸入密碼">
</div>
<!--配置信息-->
<div class="setting">
<a href="#" class="auto-login">
<input type="checkbox">下次自動(dòng)登錄
</a>
<a href="#" class="forget-pwd">忘記密碼</a>
</div>
<div class="login">
<button>登錄</button>
</div>
<div class="reg">還沒賬號(hào)?<a href="#">馬上注冊</a>
</div>
</div>
<!--面板的底部-->
<div class="panel-footer">
<span>社交賬號(hào)登錄:</span>
<img src="images/user.png">
<img src="images/user.png">
<img src="images/user.png">
</div>
</div>
</body>
</html>
書寫樣式表
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0;
margin: 0;
}
/*去掉 內(nèi)外邊距*/
*{
padding: 0;
margin: 0;
}
/*設(shè)置這個(gè)整體的容器的背景色*/
body{
background-color: #F2F2F2;
/*讓其水平居中*/
text-align: center;
}
/*面板*/
#panel{
/*最大的容器距離頂部50個(gè)像素*/
margin-top: 50px;
display: inline-block;
background-color: white;
border: 1px solid #dddddd ;
padding: 30px;
border-radius: 6px;
/*水平 和垂直都是0 2個(gè)像素*/
/*設(shè)置陰影*/
box-shadow: 0 0 10px #999;
width: 260px;
}
/*面板頭部*/
#panel .panel-top{
font-size: 13px;
font-family: Arial;
font-weight: normal;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
width: 220px;
margin: 0 auto;
}
/*面板中間*/
#panel .panel-content{
margin-top: 20px;
}
#panel .panel-content .int{
height: 36px;
margin-bottom: 9px;
position: relative;
}
#panel .panel-content label{
position: absolute; top: 7px;
left: 6px;
}
#panel .panel-content .int input{
width: 100%;
height: 100%;
border: 1px solid #dddddd;
padding-left: 40px;
/*輸入框不超出設(shè)置的最大容器*/
box-sizing: border-box;
border-radius: 6px;
}
#panel .panel-content input:focus{
/*取消邊框*/
outline: none;
border: 1px solid orangered;
box-shadow: 0 0 2px orangered;
}
#panel .panel-content .pwd-login a{
display: inline-block;
color: gray;
font-size: 13px;
}
#panel .panel-content .pwd-login{
width: 260px;
height: 30px;
line-height: 30px;
}
#panel .panel-content .setting{
background-color: red;
}
#panel .panel-content .setting .forget-pwd{ float: right;
}
#panel .panel-content .setting .auto-login{ float: left;
text-decoration: none;
}
#panel .panel-content .pwd-login input{
/*設(shè)置行內(nèi)塊級(jí)標(biāo)簽*/
display: inline-block;
width: 18px;
float: left;
}
#panel .login button{
margin-top: 20px;
width: 100%;
height: 33px;
border: 0;
color: white;
font-size: 18px;
margin-bottom: 10px;
border-radius: 6px;
background-color: orangered;
}
#panel .reg{
height: 30px;
line-height: 30px;
font-size: 13px;
}
#panel .reg a{
color: orangered;
text-decoration: none;
margin-left: 5px;
}
#panel .panel-footer{
height: 40px;
line-height: 40px;
}
#panel .panel-footer img{
/*設(shè)置圖片居中*/
vertical-align: middle;
}
#panel .panel-footer span{
/*設(shè)置文字垂直居中*/
vertical-align: middle;
}
