学了几天，发现 这个东西并没有一开始想象中那么难。需要逻辑思维，还有一种大局观，落下了一步，发现在改正就很难很难，更重要的是细心一些。每一步都掌握好，做好，没有瑕疵，否则，真的很痛苦。还有就是时常的练习，能够快速写出自己想要的东西，而不是还要频繁得去查字典手册和笔记。
刚刚做的登录页面；加油吧！！练多了，自然会快速，沉稳，一丝不苟！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.zuida{
width: 1259px;
height: 2048px;
background-color: #fdfbfe;
margin:0px auto;
}
#toutiao{
width: 1000px;
height: 117px;
/*background-color: red;*/
margin: 0px auto
}
.kelianbiao{
width: 315px;
height: 73px;
/*background-color: #000066;*/
float: left;
background-image: url(./zhong.jpg);
}
.baoxiu{
width: 445px;
height: 28px;
/*background-color: #f0f8ff;*/
float: right;
background-image: url(./xiao.jpg);
}
#erda{
width: 1000px;
height: 600px;
/*background-color: green;*/
margin: 0px auto
}
#tupian{
width: 500px;
height: 500px;
/*background-color: #fff;*/
float: left;
background-image: url(./datu.jpg);
}
.dengluA{
width: 344px;
height: 397px;
/*background-color: #990066;*/
float: right;
}
#kongge{
width: 334px;
height: 63px;
}
#dengluB{
width: 344px;
height: 336px;
/*background-color: #0000cc;
*/
}
#xiaozi{
width: 344px;
height: 16px;
/*background-color: #33ffff;*/
}
#huanying{
width: 56px;
height: 16px;
/*background-color: #cc6600;*/
float: left;
font-size: 13px
}
#zhijie{
width: 110px;
height: 16px;
/*background-color: #cc6600;*/
float: right;
font-size: 13px;
}
.shouji{
width: 270px;
height: 32px;
/*background-color: #ffffff*/
}
#shoujia{
width: 270px;
height: 32px;
}
.mima{
width: 270px;
height: 32px;
/*background-color: #ffffff*/
}
#mimaa{
width: 270px;
height: 32px;
}
.ernina{
width: 270px;
height: 32px;
/*background-color: #ffffff*/
}
#baozhu{
width: 272px;
height: 32px;
/*background-color: #ffff33;*/
float: left;
}
.yanz{
width: 140px;
height: 32px;
/*background-color: #ffffff;*/
float: left;
}
#yanza{
width: 140px;
height: 28px;
}
.huoqu{
width: 119px;
height: 32px;
/*background-color: #ffffff;*/
float: right;
}
#huoqua{
width: 119px;
height: 32px;
border:1px solid #d0d0d0;
color: #999999;
background-color: #d0d0d0;
border-radius:4px;
}
#xiabao{
width: 344px;
height: 42px;
/*background-color: #ffff33*/
}
.zhuce{
width: 142px;
height: 42px;
/*background-color: #ffffff;*/
float: left;
}
#zhucea{
width: 142px;
height: 42px;
background-color: #f43499;
border-color: #f43499;
border-radius:4px;
color: #ffffff
}
.gezi{
width: 88px;
height: 30px;
}
.youxiang{
width: 88px;
height: 12px;
/*background-color: #ffffff;*/
float: right;
}
#youxianga{
font-size: 10px;
display: inline-block;
}
#yuedu{
width: 214px;
height: 33px;
/*background-color: #ffffff*/
}
#tao{
width: 188px;
height: 0px;
float: right;
}
#kedian{
width: 19px;
height: 16px;
margin-top: 10px
}
p{
font-size: 10px
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="zuida">
<div id="toutiao">
<div class="kelianbiao">
</div>
<div class="baoxiu">
</div>
</div>
<div id="erda">
<div id="tupian"></div>
<div class="dengluA">
<div id="kongge">
</div>
<div id="dengluB">
<div id="xiaozi">
<div id="huanying">
欢迎注册
</div>
<div id="zhijie">
已注册可<a href="">直接登录</a>
</div>
</div>
<br>
<form>
<div class="shouji">
<input id="shoujia" type="text" name="zhanghao" placeholder="请输入手机号码" value="" style="border-radius:5px;" ></input>
</div>
<br>
<div class="mima">
<input id="mimaa" type="password" name="mima" placeholder="密码由6-20位数字，字母和符号组成" value="" style="border-radius:5px;" ></input>
</div>
<br>
<div class="ernina">
<input id="mimaa" type="password" name="zaicimima" placeholder="请再次输入上面密码" value="" style="border-radius:5px;" ></input>
</div>
<br>
<div id="baozhu">
<div class="yanz">
<input id="yanza" type="text" name="yanzheng" placeholder="短信验证码" value="" style="border-radius:5px;" ></input>
</div>
<div class="huoqu">
<input id="huoqua" type="submit" value="获取验证码"></input>
</div>
</div>
<br><br><br>
<div id="xiabao">
<div class="zhuce">
<input id="zhucea" type="submit"value="立即注册"></input>
</div>
</form>
<div class="gezi"></div>
<div class="youxiang">
<a id="youxianga" href="">通过邮箱注册</a>
</div>
</div>
<br>
<div id="yuedu">
<input id="kedian" type="checkbox" value="yuedu" name="tiaoyue[]"></input>
<div id="tao">
<p>:我已阅读并接受
<a href="">
唯品会条款
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
原文地址：http://12254264.blog.51cto.com/12244264/1873698
