時(shí)間：2023-10-11 23:06:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-10-11 23:06:01 來源：網(wǎng)站運(yùn)營
一個(gè)簡單的dw網(wǎng)頁制作作業(yè)，學(xué)生個(gè)人html靜態(tài)網(wǎng)頁制作成品代碼——怪盜基德動漫主題網(wǎng)頁成品（15頁）：HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。
在線咨詢
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>怪盜基德</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="dltop"> <div class="dltopner"> <a href="denglu.html">登錄</a>| <a href="zhuce.html">注冊</a> </div> </div> <div class="top"> <div class="logo"> <img src="images/logo.png" /> </div> <div class="sous"> <form> <input type="text" class="sinpt" /> <button type="submit" class="sousbtn"></button> </form> </div> </div> <div id="nav"> <ul> <li><a href="index.html">網(wǎng)站首頁</a></li> <li><a href="jieshao.html">主角介紹</a></li> <li><a href="nengli.html">主角能力</a></li> <li><a href="guanxi.html">人際關(guān)系</a></li> <li><a href="juqing.html">主要?jiǎng)∏?span ></a></li> <li><a href="tuce.html">動漫圖冊</a></li> <li><a href="zixun.html">動漫資訊</a></li> </ul> </div> <div class="banner"> <img src="images/banner.jpg" /> </div> <div class="content"> <div class="sbox1"> <div class="stit">主角介紹</div> <img src="images/0.jpg" /> <p>怪盜基德（日文：怪盜キッド；英文：Kid the Phantom Thief），又譯怪盜小子、怪盜奇度，原名"怪盜1412號"（源自其國際罪犯代碼"1412"），是日本動漫《魔術(shù)快斗》中的主人公以及《名偵探柯南》中的客串角色。第一代的真實(shí)身份為黑羽盜一，現(xiàn)在第二代為黑羽快斗。一個(gè)充滿傳奇色彩的怪盜，擁有過人才智，精通易容、變聲、逃脫術(shù)，以珠寶等各類貴重藝術(shù)品為目標(biāo)，使用魔術(shù)手法進(jìn)行犯案的超級盜竊犯。</p> <p>雖然純白色的服裝在黑夜中過于顯眼，不利于隱蔽與逃脫，因此曾被怪盜黑貓?jiān)u價(jià)為"像是巴不得被人發(fā)現(xiàn)似的，不合常理又華麗復(fù)古""真是個(gè)無藥可救的門外漢" ?；逻@樣做不僅是為了故意彰顯自己是"大膽無畏同時(shí)華麗無比"的怪盜 ，更主要的原因是：這樣的服裝反而更利于在逃脫時(shí)隱蔽——一旦白色的物體在眼前消失，人們的視線會下意識中繼續(xù)尋找白色，基德在此時(shí)換為黑衣就更利于逃脫。</p> <a href="jieshao.html" class="more">點(diǎn)擊查看更多</a> </div> <div class="sbox2"> <div class="stit">人物介紹</div> <div class="sbox2ner"><div class="xbox mar18"><img src="images/1.jpg"><h1>中森青子</h1><p>快斗的青梅竹馬，17歲，清純可愛，調(diào)皮善良。與快斗是在江古田鐘塔前認(rèn)識，喜歡快斗，但不知道黑羽快斗是怪盜基德。因?yàn)閷Π职值墓ぷ骱苤С郑詫率址锤小?span ></p></div><div class="xbox mar18"><img src="images/2.jpg"><h1>寺井黃之助</h1><p>黑羽盜一生前的助手兼仆人,之后成為快斗的幫手。在《魔術(shù)快斗》第一集中，寺井黃之助以"怪盜基德"身份登場——事實(shí)上是為了引出殺害黑羽盜一的神秘組織。</p></div><div class="xbox mar18"><img src="images/3.jpg"><h1>黑羽盜一</h1><p>現(xiàn)任怪盜基德（黑羽快斗）的父親，受人敬仰的著名魔術(shù)師，另一個(gè)身份是第一代怪盜基德（怪盜1412）。八年前在魔術(shù)表演中遭神秘組織暗殺，至今生死不明。</p></div><div class="xbox"><img src="images/4.jpg"><h1>黑羽千影</h1><p>黑羽千影是被稱為"昭和年代的女子二十面相"的怪盜淑女、Phantom lady（幻影女郎、幽靈女士），曾經(jīng)活躍一時(shí)。20年前她在偷盜時(shí)，與黑羽盜一相識，從此隱退。</p></div></div><a href="#" class="more">點(diǎn)擊查看更多</a> </div> </div> <div class="foot"> <p>Copyright©怪盜基德 ALL rights reserved</p> </div> </body></html>@charset "utf-8";/* CSS Document */body { margin: 0 auto; font-size: 14px; font-family: "微軟雅黑"; line-height: 22px;}div,p,input,ul,li,h1,h2,h3 { height: auto; margin: 0; padding: 0; vertical-align: middle; list-style: none;}a { color: #131313; text-decoration: none;}.dltop{ height:50px; line-height:50px; }.dltopner{ width:1200px; margin:0 auto; text-align:right; }.dltopner a{ margin:0px 10px; }.top { width:1100px; height: 120px; margin:0 auto;}.logo { width: 400px; height: 85px; float: left; padding-top: 15px; margin-left: 20px;}.sous { width: 300px; height: 40px; margin-top: 45px; border-radius: 5px; float: right; margin-right: 20px;}.sinpt{ width: 249px; height: 36px; line-height: 36px; float: left; margin-left: 2px;}.sousbtn { width: 40px; height: 40px; padding-left: 5px; float: left; border: none; background: url(../images/soubtn.png) no-repeat 5px 5px; background-color:#2690b2;}#nav { width:100%; height: 45px; margin:0 auto; background: #090909;}#nav ul { width:1200px; height:45px; margin:0 auto; } font-size:14px; line-height:30px; } .jqner{ width:1200px; height: auto; overflow:hidden; margin:0 auto; margin-bottom:70px; }.jqnerbx{ width:366px; height:620px; float:left; }.mar50{ margin-right:50px; }.bximg{ height:367px; }.xinxi{ height:253px; background:#efefef; }.xinxi h1{ height:50px; line-height:50px; text-align:center; font-size:18px; font-family:"宋體"; } .xinxi p{ height:25px; line-height:25px; text-align:center; font-size:14px; }.fgbox1 { width:1200px; height: 330px; margin:0 auto;}.fgbox1-left { width: 507px; height: 330px; float: left; margin-left: 30px;}.fgbox1-left p { float: left; line-height: 35px; font-size: 18px; padding-right: 60px;}.fgbox1-right { width: 630px; height: 330px; float: left;}.fgbox2 { width:1200px; height: 380px; margin: 0 auto; margin-bottom: 20px;}.fgbox2-left { width: 537px; height: 380px; float: left;}.fgbox2-left img { display: block; float: right;}.fgbox2-right { width: 630px; height: 380px; float: left;}.fgbox2-right p { margin-top: 80px; margin-left: 63px; line-height: 35px; font-size: 18px; font-family: "微軟雅黑";}.djbox{ width:1200px; height:auto; overflow:hidden; margin:0 auto; margin-bottom:30px; }.djbox img{ float:left; margin-right:20px; margin-bottom:10px; }.djbox p{ line-height:25px; font-size:14px; text-indent:2em; margin-bottom:10px; }.jqbox{ width:1200px; height:auto; overflow:hidden; margin:0 auto; margin-bottom:30px; }.jqbox p{ line-height:25px; font-size:14px; text-indent:2em; margin-bottom:10px; }.jqbox img{ display:block; margin:0 auto; margin-top:20px; margin-bottom:20px; }.tcbox{ width:1200px; height:auto; overflow:hidden; margin:0 auto; margin-bottom:50px; }.tcbox ul li{ width:280px; height:280px; margin:10px; float:left; }.jzkt{ width:1200px; height:auto; overflow:hidden; margin:0 auto; margin-bottom:30px; } .jzkt ul li{ height:180px; margin-bottom:15px; border-bottom:1px #CCC dashed; } .jzkt ul li img{ float:left; margin-right:20px; } .jzkt ul li h1{ height:40px; line-height:40px; font-size:16px; font-weight:bold; } .jzkt ul li p{ text-indent:2em; font-size:14px; color:#999; } .zxner{ width:1200px; height:auto; overflow:hidden; margin:0 auto; margin-bottom:30px; }.zxner-left{ width:300px; height:auto; overflow:hidden; margin-right:20px; float:left; }.zxner-left h1{ height:40px; line-height:40px; border-left:4px #09C solid; font-size:18px; margin-bottom:15px; padding-left:10px; }.zxner-left img{ margin-bottom:20px; }.zxner-right{ width:860px; height:auto; overflow:hidden; float:left; padding:10px; }.zxner-right h1{ height:50px; line-height:50px; text-align:center; font-size:20px; border-bottom:1px #CCC dashed; margin-bottom:10px; }.zxner-right p{ line-height:25px; font-size:14px; margin-bottom:10px; text-indent:2em; }.zxner-right img{ display:block; margin:0 auto; margin-top:10px; margin-bottom:10px; }.liuyan{ width:800px; height:auto; overflow:hidden; margin:0 auto; margin-bottom:30px; }.lybx{ height:auto; overflow:hidden; line-height:40px; margin-bottom:20px; } .lybx span{ display:block; width:100px; text-align:right; float:left; margin-right:10px; } .texinpt{ display:block; width:650px; height:40px; float:left; border:1px #CCC solid; padding-left:10px; } .btn2{ display:block; width:500px; height:50px; line-height:50px; margin:0 auto; background:#CCC; text-align:center; margin:0 auto; font-size:14px; border:none; margin-top:40px; }請 “ 點(diǎn)贊” “??評論” “ 收藏”一鍵三連哦！??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：作成,簡單,作業(yè),學(xué)生,靜態(tài)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
