<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>登錄界面</title>
<style>
blockquote,?body,?button,?dd,?dl,?dt,?fieldset,?form,?h1,?h2,?h3,?h4,?h5,?h6,?hr,?input,?legend,?li,?ol,?p,?pre,?td,?textarea,th,?ul{
margin:?0;
padding:?0;
}
body{
width:300px;
}
input{
????width:190px;
????height:25px;
????margin-left:20px;
????margin-bottom:10px;
}
input::-webkit-input-placeholder?{
????padding-left:20px;
}
input:-moz-placeholder?{
????padding-left:20px;
}
input:-ms-input-placeholder?{
????padding-left:20px;
}
#auto{
????width:10px;
????display:inline;
????float:left;
????margin:0?0?0?20px;
????height:25px;
}
a{
???display:inline;
???float:right;
???height:25px;
???text-decoration:none;
???font-size:12px;
???margin-top:4px;
???margin-right:80px;
}
span{
????display:inline;
????float:left;
????height:25px;
????vertical-align:middle;
????font-size:12px;
????margin-top:4px;
????margin-left:2px;
}
.login?i{
????display:inline;
????width:190px;
????height:38px;
????float:left;
????background:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);
????background-position:0?0;
????margin-left:20px;
????margin-bottom:12.5px;
}
.regirst?i{
????display:inline;
????width:190px;
????height:36px;
????float:left;
????background:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);
????background-position:0?-40px;
????margin-top:12.5px;
????margin-left:20px;
????outline-top:1px?solid?#C00;
}
</style>
</head>
<body>
<div?class="index">
??<form>
????<input?type="text"?id="user"?name="user"?placeholder="郵箱/手機號/用戶名"?required?=?"required">
????</form>
????<form>
????<input?type="password"?id="psd"?name="psd"?placeholder="請輸入密碼"?required?=?"required">
????</form>
????<form>
????????<input?type="checkbox"?id="auto"?name="auto"?value="yes"><span>下次自動登陸</span>
????</form>
????<a?href="#">忘記密碼？</a>
????<br>
????<div?class="login">
????????<i></i>
????</div>
????<div?class="regirst">
????????<i></i>
????</div>
????
</div>
</body>
</html>
2018-10-11
可以使用標簽<hr/>，可以設置樣式；
你也可以為兩個按鈕的其中一個設置上、下邊框實現效果（即你的.login、.regirst）；
還有，你的表單form一個就夠了，沒有必要每一個input都包裹一個form;