首先好好研究了百度的登陸界面，用QQ截圖工具丈量好了尺寸，還將需要用到的圖標都截圖保存了。做好準備工作以后就開始了HTML的結構設計，然后使用CSS進行裝飾。做出來的效果圖如圖所示：

具體的HTML結構代碼如下：

<div id="login"><div id="header"><div id="log"></div><p>登陸百度賬號</p><div id="btn"></div></div><div id="q-login"><div id="pho"></div><a href="#">短信快速登陸</a></div><div id="main"><input type="text" class="txtUserName" value="手機/郵箱/用戶名"/><input type="password" class="txtPsw" value="密 碼 "/><input type="text" class="check" value="驗證碼"/><div id="check-img"></div><a href="#">換一張</a><input type="button" value="登 陸" class="s-login" /><a href="#" id="reg">立即注冊</a></div><div id="other"><p>可以使用一下方式登陸</p><div id="other-img"></div></div> </div>

CSS代碼為：

*{margin: 0;padding: 0; } #login{width: 400px;height: 550px;margin: 0 auto;border: 1px solid gainsboro;margin-top: 50px; } #header{width: 100%;height: 50px;background-color: rgb(247,247,247); } #log{width: 30px;height: 30px;background: url(../img/百度圖標.png) no-repeat ;float: left;margin: 10px 0 0 20px; } p{float:left;margin-top: 15px ; } #btn{float: right;width: 30px;height: 30px;background: url(../img/boxy_btn.png) no-repeat;margin: 10px 10px 0 0; } #q-login{width: 150px;height: 40px;margin: 15px 0 0 260px; } #pho{width: 25px;height: 25px;background: url(../img/手機.png) no-repeat;float: left; } #q-login a{text-decoration: none;color: #000; } #q-login a:hover{color: blue; } #main{clear: both;width: 100%;height: 325px;margin-top: 10px;border-bottom: 1px solid gainsboro; }.txtUserName{width: 300px;height: 45px;background: url(../img/user.png) no-repeat 2px;margin-left:20px ;padding-left:40px ;color: gainsboro; } .txtPsw{width: 300px;height: 45px;background: url(../img/密碼.png) no-repeat 10px;margin:15px 0 0 20px;padding-left:40px ;color: gainsboro; } .check{width: 150px;height: 40px;margin: 15px 20px 0px 20px;float: left;padding-left:40px ;color: gainsboro; } #check-img{width: 100px;height: 40px;background: url(../img/驗證碼.png) no-repeat;float: left;margin-top:15px ; } #main a{text-decoration: none;font: 10px;float: left;margin-top: 25px;color: blue; } #main a:hover{text-decoration: underline; } .s-login{width: 350px;height: 50px;margin: 50px 0 0 20px;background: rgb(68,144,247);border-radius: 5px; }#reg{text-decoration: none;margin-left: 300px; } #other p{font: 12px;width: 100%;height: 20px;margin: 10px 0 20px 20px;clear: left; } #other-img{width: 30px;height: 30px;background: url(../img/QQ圖標.png) no-repeat;margin: 70px 0 0 20px;clear: left; }

總結

以上是生活随笔為你收集整理的腾讯课堂小白训练——仿百度登陆页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。