接前一篇微博首頁(yè)實(shí)例，這次來(lái)實(shí)現(xiàn)登錄頁(yè)面。

這也是此 HTML 教程的最后一篇計(jì)劃內(nèi)文章。

要實(shí)現(xiàn)什么

還是先來(lái)看看要實(shí)現(xiàn)什么。

我們把要實(shí)現(xiàn)的部分，按左右分成兩個(gè)區(qū)域。

左側(cè)是二維碼的顯示，通過(guò)掃描二維碼，可以直接登錄。這也是目前很多有手機(jī) APP 的應(yīng)用比較常見(jiàn)的快捷登錄方式。

右側(cè)則是常規(guī)的登錄區(qū)域，咱們只實(shí)現(xiàn)使用用戶名密碼登錄這一種顯示。

先來(lái)看一下實(shí)現(xiàn)的效果：

左側(cè)二維碼區(qū)域

就先來(lái)看看左側(cè)的二維碼區(qū)域，由于咱們只是示意，二維碼信息肯定不是實(shí)時(shí)生成的。

<div class="qrcode">   <img class="logo" src="../img/4-2-1-weibologo.png" />   <div class="area">     <p>掃描二維碼登錄</p>     <img src="../img/4-2-1-qrcode.png" />     <p>打開(kāi)微博手機(jī)APP - 我的頁(yè)面 - 掃一掃</p>   </div> </div> 

按前圖的分解，把左側(cè)區(qū)域分成上下兩個(gè)部分。

上面是微博的 logo 顯示。

下面是劇中顯示的三排信息，文字、二維碼和文字。

div.qrcode {   width: 330px;   border-right: 1px solid #ededed; }  .qrcode .logo {   margin: 30px auto auto 30px;   width: 50px; }  .qrcode .area {   text-align: center; } .area p {   margin: 40px auto; }  .area img {   border: 1px solid #eee;   padding: 20px;   width: 140px; } 

樣式也不算復(fù)雜，和前面的 HTML 對(duì)應(yīng)來(lái)看，主要控制的還是居中顯示，邊距和邊框。

右側(cè)登錄區(qū)域

接下來(lái)看右側(cè)的登錄區(qū)域。

<div class="login">   <div class="text">     <span>驗(yàn)證碼登錄</span>     <span class="selected">賬號(hào)登錄</span>   </div>   <div class="area">     <input type="text" placeholder="手機(jī)號(hào)或郵箱" />   </div>   <div class="area">     <input type="text" placeholder="密碼" />     <span><a href="#">忘記密碼</a></span>   </div>   <div class="submit">     <button value="登錄">登錄</button>     <span><a href="#">立即注冊(cè)</a></span>   </div> </div> 

右側(cè)區(qū)域，看起來(lái)稍微復(fù)雜一點(diǎn)點(diǎn)。

最上面，使用 span 將兩列文字分開(kāi)，通過(guò)樣式.selected 控制被選中的文字下方有一條橙色的橫線。

接著，使用.area 樣式控制兩行。

最后使用 button 顯示了登錄提交按鈕。

這里的鏈接使用了 a 標(biāo)簽，控制了樣式顯示，去掉了默認(rèn)的下劃線。

div.login {   width: 400px; }  .login .text {   margin: 30px auto 5cqw 30px; }  .text span {   margin-right: 20px;   padding-bottom: 10px; }  .text .selected {   border-bottom: 2px solid #f70; }  .login .area {   margin: 20px 30px 20px 30px;   border-bottom: 1px solid #eee; }  .area input {   border: none;   width: 280px;   margin-bottom: 10px;   height: 30px; }  .submit button {   margin-top: 30px;   width: 350px;   margin-left: 25px;   border: none;   border-radius: 2em;   background-color: #f70;   color: #fff;   height: 38px; } .submit span {   float: right;   margin-right: 30px;   margin-top: 10px; }  a {   text-decoration: none;   font-size: 13px;   color: #06c; } 

樣式看起來(lái)稍微復(fù)雜點(diǎn)，但主要是元素多，實(shí)際使用的，也還是常見(jiàn)的邊距，邊框，圓角矩形等。

小結(jié)

綜上，在實(shí)踐章節(jié)，我們仿照著微博的首頁(yè)和登錄頁(yè)面，試著使用 HTML 和 CSS 實(shí)現(xiàn)了樣式排版。

在這個(gè)過(guò)程中，由于樣式控制使用了大量的 CSS，教程里并沒(méi)有過(guò)多講述樣式上的內(nèi)容。主要是以解 HTML 結(jié)構(gòu)為主。