时间：2023-10-11 23:06:01 | 来源：网站运营
时间：2023-10-11 23:06:01 来源：网站运营
一个简单的dw网页制作作业，学生个人html静态网页制作成品代码——怪盗基德动漫主题网页成品（15页）：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
在线咨询
<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">网站首页</a></li> <li><a href="jieshao.html">主角介绍</a></li> <li><a href="nengli.html">主角能力</a></li> <li><a href="guanxi.html">人际关系</a></li> <li><a href="juqing.html">主要剧情</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"），是日本动漫《魔术快斗》中的主人公以及《名侦探柯南》中的客串角色。第一代的真实身份为黑羽盗一，现在第二代为黑羽快斗。一个充满传奇色彩的怪盗，拥有过人才智，精通易容、变声、逃脱术，以珠宝等各类贵重艺术品为目标，使用魔术手法进行犯案的超级盗窃犯。</p> <p>虽然纯白色的服装在黑夜中过于显眼，不利于隐蔽与逃脱，因此曾被怪盗黑猫评价为"像是巴不得被人发现似的，不合常理又华丽复古""真是个无药可救的门外汉" 。基德这样做不仅是为了故意彰显自己是"大胆无畏同时华丽无比"的怪盗 ，更主要的原因是：这样的服装反而更利于在逃脱时隐蔽——一旦白色的物体在眼前消失，人们的视线会下意识中继续寻找白色，基德在此时换为黑衣就更利于逃脱。</p> <a href="jieshao.html" class="more">点击查看更多</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岁，清纯可爱，调皮善良。与快斗是在江古田钟塔前认识，喜欢快斗，但不知道黑羽快斗是怪盗基德。因为对爸爸的工作很支持，所以对基德十分反感。</p></div><div class="xbox mar18"><img src="images/2.jpg"><h1>寺井黄之助</h1><p>黑羽盗一生前的助手兼仆人,之后成为快斗的帮手。在《魔术快斗》第一集中，寺井黄之助以"怪盗基德"身份登场——事实上是为了引出杀害黑羽盗一的神秘组织。</p></div><div class="xbox mar18"><img src="images/3.jpg"><h1>黑羽盗一</h1><p>现任怪盗基德（黑羽快斗）的父亲，受人敬仰的著名魔术师，另一个身份是第一代怪盗基德（怪盗1412）。八年前在魔术表演中遭神秘组织暗杀，至今生死不明。</p></div><div class="xbox"><img src="images/4.jpg"><h1>黑羽千影</h1><p>黑羽千影是被称为"昭和年代的女子二十面相"的怪盗淑女、Phantom lady（幻影女郎、幽灵女士），曾经活跃一时。20年前她在偷盗时，与黑羽盗一相识，从此隐退。</p></div></div><a href="#" class="more">点击查看更多</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; }请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：作成,简单,作业,学生,静态
