效果圖：
我使用的開發(fā)工具是JetBrains Webstorm，自行百度下，IDE很多，只是我很喜歡這個界面：
建立我們的項目：
1.新建一個空項目
2.建立html文件和 images文件夾以及css文件夾
3.提醒下 建立css文件的方法：
注意新建的css文件 一定要后綴名是css
開始動工：
在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> <!--面板的主要內容-->
<div class="panel-content">
<div class="int">
<label><img src="images/user.png" ></label>
<input type="text" placeholder="你的手機號/用戶名">
</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">下次自動登錄
</a>
<a href="#" class="forget-pwd">忘記密碼</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/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;
}
/*去掉 內外邊距*/
*{
padding: 0;
margin: 0;
}
/*設置這個整體的容器的背景色*/
body{
background-color: #F2F2F2;
/*讓其水平居中*/
text-align: center;
}
/*面板*/
#panel{
/*最大的容器距離頂部50個像素*/
margin-top: 50px;
display: inline-block;
background-color: white;
border: 1px solid #dddddd ;
padding: 30px;
border-radius: 6px;
/*水平 和垂直都是0 2個像素*/
/*設置陰影*/
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;
/*輸入框不超出設置的最大容器*/
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{
/*設置行內塊級標簽*/
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{
/*設置圖片居中*/
vertical-align: middle;
}
#panel .panel-footer span{
/*設置文字垂直居中*/
vertical-align: middle;
}
