HTML，模仿网易登陆界面
生活随笔
收集整理的這篇文章主要介紹了
HTML，模仿网易登陆界面
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、展示效果：? ? ? ?
?
2、網(wǎng)頁(yè)代碼：
<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><meta?http-equiv="X-UA-Compatible"?content="IE=edge"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0"><title>網(wǎng)易郵箱登錄</title><link?rel="stylesheet"?href="wy.css"?/></head><body><div?class="container"><section?class="section1">?????????????<div?class="content"><div?class="card"><div?class="box"><font?family="verdana"?color="red"?font?size="4">163</font>網(wǎng)易免費(fèi)郵mail.163.com</div></div><div?class="card"><div?class="box2">中文郵箱第一品牌</div></div><div?class="card"><div?class="box"></div></div><div?class="card"><div?class="box"></div></div><div?class="card"><div?class="box"></div></div><div?class="card"><div?class="box"></div></div><div?class="card7"><div?class="box"><a?href="https://vipmail.163.com/?from=fmail">VIP</a><a?href="https://v.mail.163.com/?utm_source=163loginnav">會(huì)員</a><a?href="https://qiye.163.com/?from=M163_LOGIN">企業(yè)郵箱</a><a?href="https://hw.mail.163.com/#163">海外登錄</a></div></div><div?class="card"><div?class="box"><a?href="https://help.mail.163.com/">幫助</a>反饋<a?href="https://mail.163.com/html/accounts-repair/index.html#/taskPublicity">修復(fù)公示</a></div></div><div?class="clear"></div></div></section><section?class="section2">?????????????<div?class="content"><div?class="card1"><div?class="box"></div></div><div?class="card"><div?class="box"><td?align="center"><img?src="https://img2.baidu.com/it/u=1077474659,1142599871&fm=26&fmt=auto"/width="500"?heigth="4000"></td></div></div><div?class="card"><div?class="box"><tr><font?family="verdana"?color="black"?font?size="4">郵箱賬號(hào)登錄</font></tr><form?action=""?method="post"><p>用戶名：<input?type="text"?name="emial"?/>@163.com</p><p>密碼：<area?shape=""?coords=""?href=""?alt=""?/><input?type="password"?id="pass"?size="30"?/></p><p><td><input?type="checkbox"?name="checkbox"?id=""?value="十天內(nèi)免登錄"?/>十天內(nèi)免登錄</td><td><a?href="https://reg.163.com/naq/findPassword">忘記密碼？</a></td></p><p><button?style="background-color:?blue;width:?330px;heigth:38px"><font?family="verdana"?color="white"?font?size="5">登錄</font></button></p><p><td><a?href="https://mail.163.com/register/index.htm?from=163mail&utm_source=163mail">注冊(cè)網(wǎng)易郵箱</a></td><td><a?href="https://mail.163.com/dashi/dlpro.html?scene=appTrack&session_id=D582BD74-6163-4C3B-93A6-7604E42D62FA&uid=&from=mail87&spm=pos.free_webmail_9c89159b6fde1dc2.loginPage.login163Page.loginPanel.link">郵箱官方App</a></td></p></form></div></div><div?class="card4"><div?class="box"></div></div><div?class="clear"></div></div></section>??<footer><a?href="https://www.163.com/">網(wǎng)易首頁(yè)</a><a?href="https://you.163.com/">網(wǎng)易嚴(yán)選</a><a?href="https://help.mail.163.com/faqDetail.do?code=d7a5dc8471cd0c0e8b4b8f4f8e49998b374173cfe9171305fa1ce630d7f67ac2842e8b50ff6a4ebb">政府公益熱線</a><a?href="https://reg.163.com/agreement_mobile_ysbh_wap.shtml?v=20171127">隱私政策</a><a?href="https://hc.reg.163.com/iTerm/doc.html?id=347">兒童隱私政策</a></footer>?</div></body></html>Css：body{background-color:?#eee;}*{box-sizing:?border-box;}.container{max-width:?1600px;background-color:?#eee;margin:?2px?auto;padding:?1px;}.clear{clear:both;}.section1,.section2{background-color:?#eee;text-align:?center;padding:?10px?10px;margin-bottom:?1px;}.section1?.card,.section1?.card7{width:?12%;float:?left;padding:?0?2px;}.section1?.card7{width:?16%;}.box,?.box2{background-color:?#eee;text-align:?center;padding:?20px?10px;margin-bottom:?1px;}.box2{padding:?30px?10px;}.section2?.card,.section2?.card1,.section2?.card4{width:?15%;float:?left;padding:?0?2px;}.section2?.card{width:?35%;}.section2?.box{background-color:?#eee;text-align:?center;padding:?100px?10px;margin-bottom:?1px;}footer{background-color:?#ddd;text-align:?center;padding:?30px?15px;margin-bottom:?20px;}3、設(shè)計(jì)過程：
觀察163郵箱登錄的這張網(wǎng)頁(yè)，有三個(gè)部分組成，一個(gè)是頭部菜單，一個(gè)是登錄界面，一個(gè)是尾部菜單。在設(shè)計(jì)頭部菜單和中間的登錄界面時(shí)時(shí)，使用了分塊的方法。將頭部表單分為了8個(gè)塊，然后在最左邊的兩個(gè)塊填入163郵箱，中文郵箱第一品牌。在右邊的兩個(gè)塊內(nèi)填入vip，會(huì)員，企業(yè)郵箱，海外登錄， 幫助，反饋，修復(fù)公示。
在設(shè)計(jì)好頭部表單后，下一個(gè)是網(wǎng)易的圖片，使用img src，再將其在塊內(nèi)居中，然后在右邊是登錄表格，按照網(wǎng)易的填入元素即可。最后是頁(yè)面的尾部菜單，做好鏈接等元素。
4、設(shè)計(jì)總結(jié)：
?? 主要是網(wǎng)頁(yè)的布局方法需要掌握，還有7種標(biāo)簽子，這樣才能學(xué)好網(wǎng)頁(yè)的布局，將網(wǎng)頁(yè)的大致布局設(shè)計(jì)出來。
?
總結(jié)
以上是生活随笔為你收集整理的HTML，模仿网易登陆界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java futuretask 实例_j
- 下一篇： Django Model设计详解