493. 怪盗基德动漫主题网页大学生期末大作业 Web前端网页制作 html+css

本文链接：https://blog.csdn.net/A240307/article/details/142373890

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css：导航菜单、搜索、注册、登录等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含15个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

...

2.CSS

代码如下（节选示例）：

@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;
   }
#nav ul li {
   width: 171px;
   height: 45px;
   float: left;
}

#nav ul li a {
   display: block;
   width: 150px;
   height: 45px;
   line-height: 45px;
   text-align: center;
   color: #FFF;
   font-size: 16px;
   font-weight:bold;
}

#nav ul li:hover {
   background: #2690b2;
}
.banner{
   width:100%;
   height:400px;
   margin:0 auto;
   margin-bottom:20px;
   background:#dddcdc;
   text-align:center;
   }
.content{
   height:auto;
   overflow:hidden;
   margin:0 auto;
   }
.stit{
   height:50px;
   line-height:50px;
   font-size:20px;
   text-align:center;
   color:#06C;
   font-weight:bold;
   margin-bottom:20px;
   }
.sbox1{
   width:1200px;
   height:auto;
   overflow:hidden;
   margin:0 auto;
   padding-top:30px;
   margin-bottom:60px;
   }
.sbox1 img{
   float:left;
   margin-right:20px;
   margin-bottom:10px;
   }
.sbox1 p{
   line-height:25px;
   font-size:14px;
   text-indent:2em;
   margin-bottom:30px;
   }
.sbox2{
   width:100%;
   height:auto;
   overflow:hidden;
   margin:0 auto;
   background:#dddcdc;
   padding-top:40px;
   padding-bottom:50px;
   }
.sbox2ner{
   width:1200px;
   margin:0 auto;
   height:427px;
   }
.xbox{
   width:286px;
   height:362px;
   float:left;
   background:#ffffff;
   border-radius:5px;
   }
.xbox img{
   border-top-left-radius:5px;
   border-top-right-radius:5px;
   margin-bottom:10px;
   }