学了几天,发现 这个东西并没有一开始想象中那么难。需要逻辑思维,还有一种大局观,落下了一步,发现在改正就很难很难,更重要的是细心一些。每一步都掌握好,做好,没有瑕疵,否则,真的很痛苦。还有就是时常的练习,能够快速写出自己想要的东西,而不是还要频繁得去查字典手册和笔记。

  



 刚刚做的登录页面;加油吧!!练多了,自然会快速,沉稳,一丝不苟! 

<!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>