index.css
body{
background-color: #F2F2F2;
}
/*------主要內(nèi)容-------*/
#content{
margin-top: 100px;
text-align: center;
}
#content .panel{
display: inline-block;
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
}
#content .panel .group{
}
/*輸入框*/
#content .panel .group input{
display: block;
width: 250px;
height: 33px;
padding-left: 7px;
font-size: 15px;
border:1px solid #ddd;
}
/*偽類*/
#content .panel .group input:focus{
outline: none;
border-left-color: #CC865E;
}
#content .panel .group label{
display: block;
text-align: left;
height: 30px;
line-height: 30px;
font-size: 20px;
}
#content .login {
margin-top: 20px;
}
/*登錄*/
#content .login button{
width: 250px;
background-color: #CC865E;
}
#content .login button:hover{
background-color: white;
color: #CC865E;
border: 1px solid #CC865E;
cursor: pointer;
}
#content button{
height: 33px;
border: 0px;
color: white;
font-size: 18px;
}
/*注冊*/
#content .reg{
margin-top: 20px;
}
#content .reg button{
width: 200px;
background-color: #466BAF;
}
#content .reg button:hover{
background-color: white;
color: #466BAF;
border: 1px solid #466BAF;
cursor: pointer;
}
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>登錄首頁</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--最外層-->
<div id="content">
<!--面板-->
<div class="panel">
<!--賬號-->
<div class="group">
<label>賬號</label>
<input placeholder="請輸入賬號名">
</div>
<!--密碼-->
<div class="group">
<label>密碼</label>
<input placeholder="請輸入密碼" type="password">
</div>
<!--登錄-->
<div class="login">
<button>登錄</button>
</div>
</div>
<!--注冊-->
<div class="reg">
<button>創(chuàng)建新賬號?</button>
</div>
</div>
</body>
</html>
