接前一篇微博首頁(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)用比較常見的快捷登錄方式。
右側(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>打開微博手機(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 將兩列文字分開，通過(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é)
綜上，在實(shí)踐章節(jié)，我們仿照著微博的首頁(yè)和登錄頁(yè)面，試著使用 HTML 和 CSS 實(shí)現(xiàn)了樣式排版。
在這個(gè)過(guò)程中，由于樣式控制使用了大量的 CSS，教程里并沒(méi)有過(guò)多講述樣式上的內(nèi)容。主要是以解 HTML 結(jié)構(gòu)為主。
該文章在 2024/10/22 12:23:11 編輯過(guò)
400 186 1886
