學了幾天，發現 這個東西並沒有一開始想象中那麼難。需要邏輯思維，還有一種大局觀，落下了一步，發現在改正就很難很難，更重要的是細心一些。每一步都掌握好，做好，沒有瑕疵，否則，真的很痛苦。還有就是時常的練習，能夠快速寫出自己想要的東西，而不是還要頻繁得去查字典手冊和筆記。
剛剛做的登錄頁面；加油吧！！練多了，自然會快速，沉穩，一絲不苟！
<!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>