大学生HTML期末大作业——HTML+CSS+JavaScript名侦探柯南

作者:无·糖日期:2025/11/27

HTML+CSS+JS【动漫网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

  • 💥 文章目录
  • 一、🏁 网站题目
  • 二、🚩 网站描述
  • 三、🎌 网站介绍
  • 四、🏴 网站效果
  • 五、🏳️ 网站代码
  • 六、🏳️‍🌈 如何学习进步
  • 七、🏴‍☠️ 更多干货

💥 文章目录

一、🏁 网站题目

💪💪💪 动漫网站 名侦探柯南 5页 含网页设计报告

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点,网页的风格主题也很全面:如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题,学生、新手可参考下方页面的布局和设计和HTML源码(有用点赞(๑•̀ㅂ•́)و✧)

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
所有页面相互超链接,可到三级页面,有5-10个页面组成。
页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
菜单美观、醒目,二级菜单可正常弹出与跳转。
要有JS特效,如定时切换和手动切换图片轮播。
页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。
页面清爽、美观、大方,不雷同。
不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、🎌 网站介绍

网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📃网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📜网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📄网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📰网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)🎥 html文件包含:其中index.html是首页、其他html为二级页面;
(2)📺 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📷 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果





五、🏳️ 网站代码

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>人物介绍</title>
6<link href="renwu.css" rel="stylesheet" type="text/css" />
7<link href="lianjie.css" rel="stylesheet" type="text/css" />
8<link href="main.css" rel="stylesheet" type="text/css" />
9</head>
10
11<body>
12<div class="center-content">
13<table width="960" height="200" border="0" background="picture/head1.jpg" >
14  <tr>
15    <td height="195" align="center"></td>
16  </tr>
17</table>
18<table width="960" height="40" border="0" cellpadding="0" cellspacing="0" background="picture/indexqp_16.gif" >
19  <tr align="center" >
20    <td width="120"><span class="STYLE14"><a href="index.html">柯南首页</a></span></td>
21    <td width="120"><span class="STYLE14"><a href="renwu.html">人物介绍</a></span></td>
22    <td width="120"><span class="STYLE14"><a href="yinyue.html">音乐欣赏</a></span></td>
23    <td width="120"><span class="STYLE14"><a href="daoju.html">柯南的道具</a></span></td>
24    <td width="120"><span class="STYLE14"><a href="message.html">站长信息</a></span></td>
25    <td width="120"><span class="STYLE14"><a href="liuyan.html">留言板</a></span></td>
26  </tr>
27</table>
28<table width="960" border="0" cellspacing="0" cellpadding="0">
29  <tr>
30    <td width="8" rowspan="42" bgcolor="#0099FF">&nbsp;</td>
31    <td height="30" colspan="9" bgcolor="#0099FF"><span class="STYLE18">工藤家</span></td>
32    <td width="14" rowspan="42" bgcolor="#0099FF">&nbsp;</td>
33  </tr>
34  <tr>
35    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
36    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
37    <td width="180" bgcolor="#CCCCCC">&nbsp;</td>
38    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
39    <td width="518" bgcolor="#CCCCCC">&nbsp;</td>
40    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
41    <td width="182" bgcolor="#CCCCCC">&nbsp;</td>
42    <td width="14" bgcolor="#CCCCCC">&nbsp;</td>
43    <td width="16" bgcolor="#CCCCCC">&nbsp;</td>
44  </tr>
45  
46  <tr>
47    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
48    <td width="7" rowspan="3" bgcolor="#0066CC">&nbsp;</td>
49    <td width="180" height="48" bgcolor="#0066FF">&nbsp;</td>
50    <td bgcolor="#0066FF">&nbsp;</td>
51    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC"><p class="wenben"><strong>江户川柯南(edogawa konan)</strong> <br />
52      声优:高山南<br />
53    </p>
54      <p class="wenben">他是故事里的男主角,&quot;名侦探柯南&quot;的灵魂人物。原名工藤新一,帝丹高中二年极学生,与小兰是青梅竹马。继承了父亲的超强推理能力,帮助警方破获了不少案子,被誉为高中生名侦探。他喜欢看推理小说,最崇拜福尔摩斯,另外踢足球的水平也是一流的。不幸被卷入黑衣组织的交易被灌下APTX4869,但是没有死,只是变成了小孩,目前年龄定为67岁。改名江户川柯南(取自两个侦探小说里的人名)。幸亏智力没有衰退,头脑还是一样灵光,推理能力丝毫未减。为了找出黑衣人的下落,寄住在家开侦探事务所的小兰家,一方面暗地协助小五郎破案。而体力上的不足靠阿栗博士的发明来弥补。变小后就读于帝丹小学1年纪B班,认识了步美、元太、光彦三人,还成立了少年侦探团,是其中最重要的&quot;首脑&quot;。不管是变小前后,唱歌五音不全还是没有办法变更的事实……唱歌走音非常夸张。最常穿著的服装:红领结+蓝西装+短裤+球鞋。但现较少穿著)   受到许多同年龄的女孩们欢迎,人气和未缩小前不相上下!<br />
55&nbsp;&nbsp;&nbsp;&nbsp;有多次差点泄漏身分,但到最后总是千钧一发。知道他真实身份的有:阿利博士、他父母(听博士说的)、服部平次(与柯南一起破案过程中自己发现的)、怪盗Kid(与柯南的较量中自己发现的)、灰原哀(变小前奉黑衣组织之命调查新一时发现的)。名字的由来�U「江户川」乱步、「柯南」.道尔。<br />
56        <br />
57    初登场:002   董事长千金绑架事件</p></td>
58  </tr>
59  <tr>
60    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
61    <td width="180" height="230"><img src="picture/25348966.jpg" width="180" height="230" /></td>
62    <td width="7" bgcolor="#0066FF">&nbsp;</td>
63  </tr>
64  <tr>
65    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
66    <td height="47" bgcolor="#0066FF">&nbsp;</td>
67    <td bgcolor="#0066FF">&nbsp;</td>
68  </tr>
69  <tr>
70    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
71    <td bgcolor="#CCCCCC">&nbsp;</td>
72    <td bgcolor="#CCCCCC">&nbsp;</td>
73    <td bgcolor="#CCCCCC">&nbsp;</td>
74    <td bgcolor="#CCCCCC">&nbsp;</td>
75    <td bgcolor="#CCCCCC">&nbsp;</td>
76    <td bgcolor="#CCCCCC">&nbsp;</td>
77    <td bgcolor="#CCCCCC">&nbsp;</td>
78    <td bgcolor="#CCCCCC">&nbsp;</td>
79  </tr>
80  <tr>
81    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
82    <td height="13" valign="middle" bgcolor="#0066FF"><p>&nbsp;</p>    </td>
83    <td valign="middle" bgcolor="#0066FF">&nbsp;</td>
84    <td valign="middle" bgcolor="#0066FF">&nbsp;</td>
85    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC"><p class="wenben"><strong>工藤新一 (kudou shinichi)</strong> <br />
86      声优:山口胜平<br />
87&nbsp;&nbsp;&nbsp;&nbsp;工藤新一,帝丹高中二年极学生。54日生,金牛座。与小兰是青梅竹马,两人感情很好。继承了父母的优良基因。有敏锐的观察力、过人的推理能力,是位高中生侦探。帮助警方破获了不少棘手的案件,经常活跃在<a title="" href="http://comic.qq.com/news/" target="_blank">新闻</a>、报纸上,拥有不少侦探迷。被誉为&quot;高中生名侦探&quot;&quot;平成的福尔摩斯&quot;&quot;日本警察的救世主&quot;&quot;关东的工藤&quot;。他喜欢看推理小说,偶像是柯南.道尔所创造的名侦探:夏洛克.福尔摩斯。最喜欢的柯南.道尔的作品是〈四个签名。最擅长的运动是足球,踢足球的水平也是一流的,其它运动也很在行,国中时是足球队的中锋。最大缺点唱歌五音不全,是个大音痴。   喜欢的食物是柠檬派,最讨厌葡萄干(&quot;特别篇&quot;漫画山岸荣一老师设定)。喜欢的人是青梅竹马的毛利兰。自父母3年前到美国居住,独自一人住在「推理之家」中。首次侦办的案件是在前往洛杉矶的飞机上。住址是东京都米花市米花町2丁目21番地。名字的由来:「工藤」俊作。</p>
88    <p class="wenben">初登场:001 云霄飞车杀人事件</p></td>
89  </tr>
90  <tr>
91    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
92    <td width="7" height="230" valign="middle" bgcolor="#0066FF">&nbsp;</td>
93    <td width="180" height="230" valign="middle" bgcolor="#CCCCCC"><img src="picture/25349352.jpg" width="180" height="230" /></td>
94    <td width="7" valign="middle" bgcolor="#0066FF">&nbsp;</td>
95  </tr>
96  <tr>
97    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
98    <td height="37" valign="middle" bgcolor="#0066FF">&nbsp;</td>
99    <td valign="middle" bgcolor="#0066FF">&nbsp;</td>
100    <td valign="middle" bgcolor="#0066FF">&nbsp;</td>
101  </tr>
102  <tr>
103    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
104    <td bgcolor="#CCCCCC">&nbsp;</td>
105    <td bgcolor="#CCCCCC">&nbsp;</td>
106    <td bgcolor="#CCCCCC">&nbsp;</td>
107    <td bgcolor="#CCCCCC">&nbsp;</td>
108    <td bgcolor="#CCCCCC">&nbsp;</td>
109    <td bgcolor="#CCCCCC">&nbsp;</td>
110    <td bgcolor="#CCCCCC">&nbsp;</td>
111    <td bgcolor="#CCCCCC">&nbsp;</td>
112  </tr>
113  <tr>
114    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
115    <td height="30" bgcolor="#0066FF">&nbsp;</td>
116    <td bgcolor="#0066FF">&nbsp;</td>
117    <td bgcolor="#0066FF">&nbsp;</td>
118    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC"><p class="wenben"><strong>工藤优作 (kudou yuusaku)</strong> <br />
119      声优:田中秀幸 <br />
120      &nbsp;&nbsp;&nbsp;&nbsp;他是工藤新一的父亲,推理能力超强(比新一还厉害),首屈一指的推理小说家(为什么没做侦探?),目前仍然在连载中的人气作品是《暗之男爵(Night   Baron)》,在美国十分受欢迎,荣登排行榜宝座。讲的是一个戴着恐怖面具,一身黑色礼服的怪人,经常在晚上作案,手段高明,神出鬼没(除了打扮外与怪盗Kid没什么区别嘛)。是目暮警官遇到瓶颈时谘商的对象。   20年前在一家高级意大利餐厅向有希子求婚。他和妻子长年在国外生活,可是新一不愿意住到国外去(是因为小兰吗?),后来新一变小后住到小兰家,结果新一家就空关着,还曾经被元太、步美他们当成鬼屋呢。   名字的由来�U「工藤」俊作。</p>
121      <p class="wenben"><br />
122    初登场:043 江户川柯南诱拐事件</p></td>
123  </tr>
124  <tr>
125    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
126    <td height="226" bgcolor="#0066FF">&nbsp;</td>
127    <td width="180" height="226"><img src="picture/25349431.jpg" width="180" height="230" /></td>
128    <td bgcolor="#0066FF">&nbsp;</td>
129  </tr>
130  <tr>
131    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
132    <td height="13" bgcolor="#0066FF">&nbsp;</td>
133    <td bgcolor="#0066FF">&nbsp;</td>
134    <td bgcolor="#0066FF">&nbsp;</td>
135  </tr>
136  <tr>
137    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
138    <td bgcolor="#CCCCCC">&nbsp;</td>
139    <td bgcolor="#CCCCCC">&nbsp;</td>
140    <td bgcolor="#CCCCCC">&nbsp;</td>
141    <td bgcolor="#CCCCCC">&nbsp;</td>
142    <td bgcolor="#CCCCCC">&nbsp;</td>
143    <td bgcolor="#CCCCCC">&nbsp;</td>
144    <td bgcolor="#CCCCCC">&nbsp;</td>
145    <td bgcolor="#CCCCCC">&nbsp;</td>
146  </tr>
147  <tr>
148    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
149    <td height="22" bgcolor="#0066FF">&nbsp;</td>
150    <td bgcolor="#0066FF">&nbsp;</td>
151    <td bgcolor="#0066FF">&nbsp;</td>
152    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC"><p class="wenben"><strong>工藤有希子 (kudou yukiko)</strong> <br />
153      声优:岛本须美<br />
154      本名藤峰有希子,37岁。工藤新一的母亲,工藤优作的妻子。嫁给优作之前是出名的女优,19岁便囊括了各项奖项,风靡全球,可是个大美人噢。   20岁时与优作恋爱结婚,退出演艺圈,与优作一起在美国洛杉矶生活,两人感情时好时坏,时常与老公优作吵架,但其实心里还是深爱着他!曾经因为吵架而独自一人返回东京,把柯南吓了一跳,最后还是和优作回美国去了。另外一次是两人一起回东京,扮演柯南的妈妈江户川文代,装做黑衣组织的成员把柯南戏弄了一番。</p>
155      <p><span class="wenben"><br />
156    初登场:043 江户川柯南诱拐事件</span> </p></td>
157  </tr>
158  <tr>
159    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
160    <td height="230" bgcolor="#0066FF">&nbsp;</td>
161    <td width="180" height="230"><img src="picture/25349466.jpg" width="180" height="230" /></td>
162    <td bgcolor="#0066FF">&nbsp;</td>
163  </tr>
164  <tr>
165    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
166    <td height="20" bgcolor="#0066FF">&nbsp;</td>
167    <td bgcolor="#0066FF">&nbsp;</td>
168    <td bgcolor="#0066FF">&nbsp;</td>
169  </tr>
170  <tr>
171    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
172    <td bgcolor="#CCCCCC">&nbsp;</td>
173    <td bgcolor="#CCCCCC">&nbsp;</td>
174    <td bgcolor="#CCCCCC">&nbsp;</td>
175    <td bgcolor="#CCCCCC">&nbsp;</td>
176    <td bgcolor="#CCCCCC">&nbsp;</td>
177    <td bgcolor="#CCCCCC">&nbsp;</td>
178    <td bgcolor="#CCCCCC">&nbsp;</td>
179    <td bgcolor="#CCCCCC">&nbsp;</td>
180  </tr>
181  <tr>
182    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
183    <td height="30" colspan="8" bgcolor="#0099FF" class="STYLE18">毛利家</td>
184  </tr>
185  <tr>
186    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
187    <td bgcolor="#CCCCCC">&nbsp;</td>
188    <td bgcolor="#CCCCCC">&nbsp;</td>
189    <td bgcolor="#CCCCCC">&nbsp;</td>
190    <td bgcolor="#CCCCCC">&nbsp;</td>
191    <td bgcolor="#CCCCCC">&nbsp;</td>
192    <td bgcolor="#CCCCCC">&nbsp;</td>
193    <td bgcolor="#CCCCCC">&nbsp;</td>
194    <td bgcolor="#CCCCCC">&nbsp;</td>
195  </tr>
196  <tr>
197    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
198    <td height="22" bgcolor="#0066FF">&nbsp;</td>
199    <td bgcolor="#0066FF">&nbsp;</td>
200    <td bgcolor="#0066FF">&nbsp;</td>
201    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC"><p class="wenben"><strong>毛利兰 (mouri ran)<br />
202    </strong>声优:山崎和佳奈 </p>
203      <p class="wenben">兰是故事里的女主角,新一的青梅出马,帝丹高中2年级生,和新一是同班同学,血型和新一相同,对他有着超越一般朋友的感情但又不愿承认。好友为园子及和叶,坚强又温柔的女孩,擅长料理家事,喜欢追求流行、偶像,常与园子去唱卡拉OK   因崇拜空手道冠军前田聪,便开始学习空手道且对空手道有着浓厚的兴趣,工夫也不浅,为空手道社的主将,还曾经获得东京空手道大会的冠军。所以她一生气柯南就很怕。   不过她最怕的东西是妖魔鬼怪,明明有实力打倒袭击她的凶手,可是却被吓得动弹不得。她曾经多次怀疑过柯南和新一是同一个人,但是阴差阳错的被柯南瞒过去了(有时是有人帮忙的)。希望分居的父母能和好,经常计画一起碰面,但总是被拆穿。最大的愿望是新一赶快回来吧!但其实小小新一就在身边……   名字的由来:「莫理(mo ri)」士.卢布「朗(ran)」。</p>
204    <p class="wenben">初登场:001 云霄飞车杀人事件</p></td>
205  </tr>
206  <tr>
207    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
208    <td height="230" bgcolor="#0066FF">&nbsp;</td>
209    <td width="180" height="230"><img src="picture/25337070.jpg" width="180" height="230" /></td>
210    <td bgcolor="#0066FF">&nbsp;</td>
211  </tr>
212  <tr>
213    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
214    <td height="23" bgcolor="#0066FF">&nbsp;</td>
215    <td bgcolor="#0066FF">&nbsp;</td>
216    <td bgcolor="#0066FF">&nbsp;</td>
217  </tr>
218  <tr>
219    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
220    <td bgcolor="#CCCCCC">&nbsp;</td>
221    <td bgcolor="#CCCCCC">&nbsp;</td>
222    <td bgcolor="#CCCCCC">&nbsp;</td>
223    <td bgcolor="#CCCCCC">&nbsp;</td>
224    <td bgcolor="#CCCCCC">&nbsp;</td>
225    <td bgcolor="#CCCCCC">&nbsp;</td>
226    <td bgcolor="#CCCCCC">&nbsp;</td>
227    <td bgcolor="#CCCCCC">&nbsp;</td>
228  </tr>
229  <tr>
230    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
231    <td height="25" bgcolor="#0066FF">&nbsp;</td>
232    <td bgcolor="#0066FF">&nbsp;</td>
233    <td bgcolor="#0066FF">&nbsp;</td>
234    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC"><span class="wenben"><strong class="wenben">毛利小五郎 (mouri kogorou)</strong> <br />
235      声优:神谷明
236        </span>
237      <p class="wenben">小兰的父亲,职业是侦探,推理能力奇差,自行推理出的案件约不到十件,大多都由柯南的暗示才得以破解。所以每回柯南都把他麻醉后再用他的声音揭破案件的真相,所以大家送这位毛利侦探一个&quot;沉睡的小五郎&quot;的名号。他原来是一名优秀的警局刑警,和目暮十三是同事,后来因为一起事件而辞职(详见剧场版《十四番目之标的》),改行当私人侦探,在自家二楼开「毛利侦探事务所」,三楼为居住地。   毛利小五郎的枪法十分准,柔道也是一流的,大学时代是柔道社的,被主将认为是社里最有实力的人(小兰的空手道才能也有他的遗传因素吧)。小五郎一见漂亮女性就眼睛发直,最喜欢的偶像是歌星冲野洋子小姐。另外他的吃相非常不好,没事喜欢去打麻将,或是喝啤酒,经常喝醉。因受不了小五郎的种种不良嗜好,老婆妃英理因此受不了他,于是在十年前就与他分居。每每柯南要侦查案件,小五郎总以为他要来妨碍办案,所以常在柯南头上留下一个大肿包……   名字的由来:明智「小五郎」。</p>
238    <p class="wenben">初登场:001 云霄飞车杀人事件</p></td>
239  </tr>
240  <tr>
241    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
242    <td height="230" bgcolor="#0066FF">&nbsp;</td>
243    <td width="180" height="230"><img src="picture/25337245.jpg" width="180" height="230" /></td>
244    <td bgcolor="#0066FF">&nbsp;</td>
245  </tr>
246  <tr>
247    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
248    <td height="24" bgcolor="#0066FF">&nbsp;</td>
249    <td bgcolor="#0066FF">&nbsp;</td>
250    <td bgcolor="#0066FF">&nbsp;</td>
251  </tr>
252  <tr>
253    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
254    <td bgcolor="#CCCCCC">&nbsp;</td>
255    <td bgcolor="#CCCCCC">&nbsp;</td>
256    <td bgcolor="#CCCCCC">&nbsp;</td>
257    <td bgcolor="#CCCCCC">&nbsp;</td>
258    <td bgcolor="#CCCCCC">&nbsp;</td>
259    <td bgcolor="#CCCCCC">&nbsp;</td>
260    <td bgcolor="#CCCCCC">&nbsp;</td>
261    <td bgcolor="#CCCCCC">&nbsp;</td>
262  </tr>
263  <tr>
264    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
265    <td height="27" bgcolor="#0066FF">&nbsp;</td>
266    <td bgcolor="#0066FF">&nbsp;</td>
267    <td bgcolor="#0066FF">&nbsp;</td>
268    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC"><p class="wenben"><strong>妃英理 (kisaki eri)<br />
269    </strong>声优:高岛雅罗 </p>
270      <p class="wenben">小兰的母亲,是个有名的律师,开了一家&quot;妃法律事务所&quot;。因受不了小五郎的种种不良嗜好,所以目前处于分居状态。(详见剧场版《十四番目之标的》)。与小兰的感情很好,经常连络。有精密的分析头脑,比小五郎能干许多。因为新一和小兰小时候出去探险而被她骂,故新一便不由得对她产生一种恐惧感。她烧的饭菜超级难吃。初登场:032   咖啡店杀人事件 少年侦探团: 阿笠博士 (akasa hakase) 声优:绪方贤一   发明家,52岁。住在新一家隔壁的22番地,自称是天才发明家,爱好做各种各样发明的,常因为实验失败而引起爆炸,但是也做出过非常了不起的东西。新一变小后只把自己的真实身份告诉了他,是第一个知道新一缩小的人。柯南从他那里得到许多帮助,特别是那些为柯南设计的很好用的工具。他是优作与有希子的老朋友,   新一可靠的精神支柱,时常提供新一许多信息。碰巧的是宫野志保(灰原哀)变小后倒在新一家门口也是被他发现的,一起想出了「灰原哀」这个名字,且让她寄住在家里。之后好心的博士收留了她(不过博士的计算机因此而倒了霉)。买了一台金龟车,常常载少年侦探团出去游玩。最近迷上了上网。名字的由来:阿嘉莎.克莉斯汀</p>
271    <p class="wenben">初登场:001 云霄飞车杀人事件</p></td>
272  </tr>
273  <tr>
274    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
275    <td height="230" bgcolor="#0066FF">&nbsp;</td>
276    <td width="180" height="230"><img src="picture/25337429.jpg" width="180" height="230" /></td>
277    <td bgcolor="#0066FF">&nbsp;</td>
278  </tr>
279  <tr>
280    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
281    <td height="23" bgcolor="#0066FF">&nbsp;</td>
282    <td bgcolor="#0066FF">&nbsp;</td>
283    <td bgcolor="#0066FF">&nbsp;</td>
284  </tr>
285  <tr>
286    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
287    <td bgcolor="#CCCCCC">&nbsp;</td>
288    <td bgcolor="#CCCCCC">&nbsp;</td>
289    <td bgcolor="#CCCCCC">&nbsp;</td>
290    <td bgcolor="#CCCCCC">&nbsp;</td>
291    <td bgcolor="#CCCCCC">&nbsp;</td>
292    <td bgcolor="#CCCCCC">&nbsp;</td>
293    <td bgcolor="#CCCCCC">&nbsp;</td>
294    <td bgcolor="#CCCCCC">&nbsp;</td>
295  </tr>
296  <tr>
297    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
298    <td height="21" bgcolor="#0066FF">&nbsp;</td>
299    <td bgcolor="#0066FF">&nbsp;</td>
300    <td bgcolor="#0066FF">&nbsp;</td>
301    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC"><p class="wenben"><strong>铃木园子 (Suzuki Sonoko)</strong> </p>
302      <p class="wenben">声优:松井菜樱子</p>
303      <p class="wenben">帝丹高中二年级B班的学生,新一和兰的同学,也是兰的好友。铃木财团的二千金(有姐姐――铃木绫子),是个见到帅哥就变花痴的大小姐。性格很豪迈。虽然出生名门,但和兰之间的感情相当好,完全没有什么地位悬殊之类的。她放弃了荣华富贵,投身于平凡,从来不在人前炫耀自己的出生。男友是被称为“踢击的名公子”的全国空手道冠军――京极真,因为救过园子一命而认识的。但后来京极真去美国练习,目前他们之间正隔着太平洋。</p>
304    <p><span class="wenben">初登场:006 情人节杀人</span>事件 </p></td>
305  </tr>
306  
307  <tr>
308    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
309    <td height="230" bgcolor="#0066FF">&nbsp;</td>
310    <td width="180" height="230"><img src="picture/25337553.jpg" width="180" height="230" /></td>
311    <td bgcolor="#0066FF">&nbsp;</td>
312  </tr>
313  <tr>
314    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
315    <td height="19" bgcolor="#0066FF">&nbsp;</td>
316    <td bgcolor="#0066FF">&nbsp;</td>
317    <td bgcolor="#0066FF">&nbsp;</td>
318  </tr>
319  <tr>
320    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
321    <td height="13" bgcolor="#CCCCCC">&nbsp;</td>
322    <td bgcolor="#CCCCCC">&nbsp;</td>
323    <td bgcolor="#CCCCCC">&nbsp;</td>
324    <td colspan="5" valign="top" bgcolor="#CCCCCC">&nbsp;</td>
325  </tr>
326  <tr>
327    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
328    <td height="30" colspan="8" bgcolor="#0099FF" class="STYLE18">黑衣组织</td>
329  </tr>
330  <tr>
331    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
332    <td height="17" bgcolor="#0066FF">&nbsp;</td>
333    <td bgcolor="#0066FF">&nbsp;</td>
334    <td bgcolor="#0066FF">&nbsp;</td>
335    <td colspan="5" rowspan="3" valign="top" bgcolor="#CCCCCC" class="wenben">黑衣组织(原文:黑の组织),柯南称其为“乌鸦军团”,是《名侦探柯南》中的一个笼罩在神秘色彩中的犯罪组织。主角工藤新一因为看到了组织与他人的非法交易而遭下毒(毒药名称APTX-4869).并更名江户川柯南。这个组织的真实名称一直是一个谜,在片中往往以“黑衣(黑暗)组织”、“组织”代称。组织的组成结构和目的也不明显。但可以肯定的是组织的势力遍布日本和西方国家,并且有雄厚的产业。此外,组织一直在研制某种让人致死的剧毒药物有说法说是为了让自己长生不老的药。(似乎是APTX4869,但由于研究未完成,出现了使人返老还童的效果)并且从事某种“使时光倒流”的技术(灰原哀语)。组织的成立时间不少于半个世纪(单行本19   FILe9 被狙击的球 TV130 竞技场无差别胁迫事件   前篇),灰原(对工藤)说:“早在半个世纪前,你就跟组织有很大关系了。”组织里的颜色是黑色,所有的人都穿这个颜色的衣服。组织里的人员的代号全部是酒名。昏迷不醒)、Chianti、Korn、Calvados、Bourbon、IRISHM13“漆黑的追迹者”里的组织新成员</td>
336  </tr>
337  <tr>
338    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
339    <td height="169" bgcolor="#0066FF">&nbsp;</td>
340    <td width="180" height="230" bgcolor="#CCCCCC"><img src="picture/2009120814400290127215442.jpg" width="180" height="230" /></td>
341    <td bgcolor="#0066FF">&nbsp;</td>
342  </tr>
343  <tr>
344    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
345    <td height="16" bgcolor="#0066FF">&nbsp;</td>
346    <td bgcolor="#0066FF">&nbsp;</td>
347    <td bgcolor="#0066FF">&nbsp;</td>
348  </tr>
349  <tr>
350    <td width="7" bgcolor="#CCCCCC">&nbsp;</td>
351    <td height="13" bgcolor="#CCCCCC">&nbsp;</td>
352    <td bgcolor="#CCCCCC">&nbsp;</td>
353    <td bgcolor="#CCCCCC">&nbsp;</td>
354    <td colspan="5" valign="top" bgcolor="#CCCCCC">&nbsp;</td>
355  </tr>
356  
357  <tr>
358    <td height="33" colspan="9" bgcolor="#0099FF" class="STYLE18">其他出场人物</td>
359  </tr>
360</table>
361<table width="960" height="494" border="0" cellpadding="0" cellspacing="0">
362  
363  <tr>
364    <td width="7" height="13" bgcolor="#0099FF">&nbsp;</td>
365    <td width="7" bgcolor="#0066FF">&nbsp;</td>
366    <td width="285" bgcolor="#0066FF">&nbsp;</td>
367    <td width="11" bgcolor="#0066FF">&nbsp;</td>
368    <td width="16" bgcolor="#0099FF">&nbsp;</td>
369    <td bgcolor="#0066FF">&nbsp;</td>
370    <td bgcolor="#0066FF">&nbsp;</td>
371    <td width="16" bgcolor="#0066FF">&nbsp;</td>
372    <td width="14" bgcolor="#0099FF">&nbsp;</td>
373    <td width="8" bgcolor="#0066FF">&nbsp;</td>
374    <td bgcolor="#0066FF">&nbsp;</td>
375    <td width="7" bgcolor="#0066FF">&nbsp;</td>
376    <td width="52" bgcolor="#0099FF">&nbsp;</td>
377  </tr>
378  <tr>
379    <td height="132" bgcolor="#0099FF">&nbsp;</td>
380    <td bgcolor="#0066FF">&nbsp;</td>
381    <td width="350" height="421" rowspan="5" bgcolor="#0066FF"><img src="picture/25349900.jpg" width="350" height="421" /></td>
382    <td bgcolor="#0066FF">&nbsp;</td>
383    <td bgcolor="#0099FF">&nbsp;</td>
384    <td width="9" rowspan="3" bgcolor="#0066FF">&nbsp;</td>
385    <td width="250" height="421" rowspan="3" bgcolor="#0066FF"><img src="picture/25349994.jpg" width="250" height="305" /></td>
386    <td bgcolor="#0066FF">&nbsp;</td>
387    <td bgcolor="#0099FF">&nbsp;</td>
388    <td bgcolor="#0066FF">&nbsp;</td>
389    <td width="280" height="132" bgcolor="#0066FF"><img src="picture/25350002.jpg" width="280" height="132" /></td>
390    <td bgcolor="#0066FF">&nbsp;</td>
391    <td bgcolor="#0099FF">&nbsp;</td>
392  </tr>
393  <tr>
394    <td height="13" bgcolor="#0099FF">&nbsp;</td>
395    <td bgcolor="#0066FF">&nbsp;</td>
396    <td bgcolor="#0066FF">&nbsp;</td>
397    <td bgcolor="#0099FF">&nbsp;</td>
398    <td bgcolor="#0066FF">&nbsp;</td>
399    <td bgcolor="#0099FF">&nbsp;</td>
400    <td bgcolor="#0066FF">&nbsp;</td>
401    <td bgcolor="#0066FF"><div align="center" class="STYLE20">FBI</div></td>
402    <td bgcolor="#0066FF">&nbsp;</td>
403    <td bgcolor="#0099FF">&nbsp;</td>
404  </tr>
405  <tr>
406    <td height="177" bgcolor="#0099FF">&nbsp;</td>
407    <td bgcolor="#0066FF">&nbsp;</td>
408    <td bgcolor="#0066FF">&nbsp;</td>
409    <td bgcolor="#0099FF">&nbsp;</td>
410    <td bgcolor="#0066FF">&nbsp;</td>
411    <td bgcolor="#0099FF">&nbsp;</td>
412    <td bgcolor="#0066FF">&nbsp;</td>
413    <td width="280" height="266" rowspan="3" bgcolor="#0066FF"><img src="picture/25350067.jpg" width="280" height="266" /></td>
414    <td bgcolor="#0066FF">&nbsp;</td>
415    <td bgcolor="#0099FF">&nbsp;</td>
416  </tr>
417  <tr>
418    <td height="13" bgcolor="#0099FF">&nbsp;</td>
419    <td bgcolor="#0066FF">&nbsp;</td>
420    <td bgcolor="#0066FF">&nbsp;</td>
421    <td bgcolor="#0099FF">&nbsp;</td>
422    <td bgcolor="#0066FF">&nbsp;</td>
423    <td bgcolor="#0066FF"><div align="center" class="STYLE20">怪盗kid</div></td>
424    <td bgcolor="#0066FF">&nbsp;</td>
425    <td bgcolor="#0099FF">&nbsp;</td>
426    <td bgcolor="#0066FF">&nbsp;</td>
427    <td bgcolor="#0066FF">&nbsp;</td>
428    <td bgcolor="#0099FF">&nbsp;</td>
429  </tr>
430  <tr>
431    <td height="100" bgcolor="#0099FF">&nbsp;</td>
432    <td bgcolor="#0066FF">&nbsp;</td>
433    <td bgcolor="#0066FF">&nbsp;</td>
434    <td bgcolor="#0099FF">&nbsp;</td>
435    <td bgcolor="#0066FF">&nbsp;</td>
436    <td width="250" height="100" bgcolor="#0066FF"><img src="picture/25349998.jpg" width="250" height="100" /></td>
437    <td bgcolor="#0066FF">&nbsp;</td>
438    <td bgcolor="#0099FF">&nbsp;</td>
439    <td bgcolor="#0066FF">&nbsp;</td>
440    <td bgcolor="#0066FF">&nbsp;</td>
441    <td bgcolor="#0099FF">&nbsp;</td>
442  </tr>
443  <tr>
444    <td height="13" bgcolor="#0099FF">&nbsp;</td>
445    <td bgcolor="#0066FF">&nbsp;</td>
446    <td valign="top" bgcolor="#0066FF"><div align="center" class="STYLE20">
447      <div align="center">少年侦探团</div>
448    </div></td>
449    <td bgcolor="#0066FF">&nbsp;</td>
450    <td bgcolor="#0099FF">&nbsp;</td>
451    <td bgcolor="#0066FF">&nbsp;</td>
452    <td bgcolor="#0066FF"><div align="center" class="STYLE20">腹部家</div></td>
453    <td bgcolor="#0066FF">&nbsp;</td>
454    <td bgcolor="#0099FF">&nbsp;</td>
455    <td bgcolor="#0066FF">&nbsp;</td>
456    <td bgcolor="#0066FF"><div align="center" class="STYLE20">警视厅</div></td>
457    <td bgcolor="#0066FF">&nbsp;</td>
458    <td bgcolor="#0099FF">&nbsp;</td>
459  </tr>
460  <tr>
461    <td height="13" bgcolor="#0099FF">&nbsp;</td>
462    <td bgcolor="#0099FF">&nbsp;</td>
463    <td bgcolor="#0099FF">&nbsp;</td>
464    <td bgcolor="#0099FF">&nbsp;</td>
465    <td bgcolor="#0099FF">&nbsp;</td>
466    <td bgcolor="#0099FF">&nbsp;</td>
467    <td bgcolor="#0099FF">&nbsp;</td>
468    <td bgcolor="#0099FF">&nbsp;</td>
469    <td bgcolor="#0099FF">&nbsp;</td>
470    <td bgcolor="#0099FF">&nbsp;</td>
471    <td bgcolor="#0099FF">&nbsp;</td>
472    <td bgcolor="#0099FF">&nbsp;</td>
473    <td bgcolor="#0099FF">&nbsp;</td>
474  </tr>
475</table>
476</div>
477<p>&nbsp;</p>
478</body>
479</html>
480
481

六、🏳️‍🌈 如何学习进步

  1. 看书、看博客、学课程或者看视频等
  2. 模仿着书上或者博客的代码,进行复现,复现不重要,思考才是关键
  3. 思考学习别人思路后,脱离书本和博客,完全自己实现功能
  4. 自己实现一些 DEMO,看别人项目代码,与别人讨论,提升代码能力
  5. 在别人的框架和要求下,写代码实现业务
  6. 自己负责别人设计的模块的实现
  7. 独立设计业务模块并开发实现
  8. 负责大项目框架设计和拆分,带领别人进行开发
  9. 其他高阶的架构和管理工作,已经不仅仅是代码能力了

七、🏴‍☠️ 更多干货

🌝 关注我 学习更多知识~

🌝 支持我,请 点赞 + 好评 + 收藏 三连,带来更多文章~

🌝 有需要完整源码的同学可以留言、后台私信我(说明要什么主题模板)~

🌝 更多主题网页设计模板


大学生HTML期末大作业——HTML+CSS+JavaScript名侦探柯南》 是转载文章,点击查看原文


相关推荐


UI小姐姐要求有“Duang~Duang”的效果怎么办?
前端九哥2025/11/25

设计小姐姐: “搞一下这样的回弹效果,你行不行?” 我:“行!直接梭哈 50 行 keyframes + transform + 各种百分比,搞定 ” 设计小姐姐:“太硬(撇嘴),不够 Q 弹(鄙视)” 我:(裂开) 隔壁老王:这么简单你都不行,我来一行贝塞尔 cubic-bezier(0.3, 1.15, 0.33, 1.57) 秒了😎 设计小姐姐:哇哦!(兴奋)好帅!(星星眼🌟)好Q弹!(一脸崇拜😍) 我:“???” 🧠 一、为什么一行贝塞尔就能“Duang”起来? 1️⃣ c


精选 5 款 .NET 开源、实用的商城系统(Shop),快速商城二开利器!
追逐时光者2025/11/23

前言 今天大姚给大家分享 5 款基于 .NET 开源、实用的商城系统(Shop),快速商城二开利器!希望可以帮助到有商城系统开发需求的同学。 nopCommerce nopCommerce是一个.NET开源功能丰富、免费、灵活且可定制的开源电子商务解决方案(大家假如有商城需求可以直接使用该项目进行二次开发,省时省力) ,具备商城该有的各种功能和特性。 项目源码地址:github.com/nopSolution… 项目详细介绍:mp.weixin.qq.com/s/GMCIYwGUr… C


Python中的简单爬虫
q***57742025/11/21

文章目录 一. 基于FastAPI之Web站点开发 1. 基于FastAPI搭建Web服务器2. Web服务器和浏览器的通讯流程3. 浏览器访问Web服务器的通讯流程4. 加载图片资源代码 二. 基于Web请求的FastAPI通用配置 1. 目前Web服务器存在问题2. 基于Web请求的FastAPI通用配置 三. Python爬虫介绍 1. 什么是爬虫2. 爬虫的基本步骤3. 安装requests模块4. 爬取照片 ① 查看index.html② 爬取照片步骤③


Fastadmin切换英文,部分新增菜单没有切换原因
JSON_L2025/11/19

在使用Fastadmin开启多语言后,切换为英文时,部分新增菜单没有切换问题及解决。 目录 开启多语言 开启多语言 部分菜单没有变化 原因 添加菜单规则 语言包解析 其他标题或提示语解析 总结   开启多语言 开启多语言 首先介绍一下fastadmin中如何开启多语言配置, 在application/config.php中把lang_switch_on改为true。 默认情况下是关闭的,如下: 开启后,在后台会多一个切换语言的入口,默认就是中英


GitHub 热榜项目 - 日榜(2025-11-16)
CoderJia_2025/11/19

GitHub 热榜项目 - 日榜(2025-11-16) 生成于:2025-11-16 统计摘要 共发现热门项目: 18 个 榜单类型:日榜 本期热点趋势总结 本期GitHub热榜显示AI应用开发依然是绝对焦点,开发者正致力于将前沿AI技术转化为开箱即用的解决方案。舆情监控工具TrendRadar和谷歌的AI工具包adk-go引领了这股潮流,它们强调用AI解决信息过载和复杂流程自动化等实际问题。同时,轻量化RAG框架LightRAG和大模型记忆引擎Memori的流行,反映出社区


【深度学习新浪潮】算法工程师如何入门芯片硬软件设计工作?
Andrew-国星宇航2025/11/17

在AI与边缘计算爆发的当下,“算法落地难”逐渐成为行业痛点——很多时候不是算法不够优,而是缺乏匹配算法需求的芯片硬件支撑,或是算法与硬件“脱节”导致部署后性能打折扣。这也让越来越多算法工程师开始关注芯片硬软件设计:既能更深刻地理解算法的硬件适配性,又能参与到“算法-芯片”协同优化的核心环节,成为跨领域的复合型人才。 但算法工程师转型芯片设计,常面临“软件思维 vs 硬件思维”的鸿沟:习惯了软件的灵活性,却对硬件的并行性、时序约束、资源限制感到陌生;熟悉模型训练与推理优化,却不懂EDA工具、数字


python爬虫入门案例day05:Pexels
自学互联网2025/11/16

python爬虫入门案例day05:Pexels 目标网站 Pexels 目标网址 https://www.pexels.com/zh-cn/search/%E6%97%A5%E8%90%BD/ 开发环境 1、window11 2、python3.7 3、PyCharm Community Edition 2021.2.1 4、双核浏览器 5、浏览器自带开发者工具 网站分析 在下拉网页的过程中发现,会不断加载出新的图片,说明该网页为动态网页,那我们可以初步猜想图片的链接存放在通过Ajax请求的网


Python 的内置函数 map
IMPYLH2025/11/15

Python 内建函数列表 > Python 的内置函数 map Python 的内置函数 map() 是一个高阶函数,它允许对一个可迭代对象(如列表、元组等)的所有元素应用指定的函数,并返回一个 map 对象(可迭代对象)。其基本语法是: map(function, iterable, ...) 主要特点: 惰性计算(Lazy Evaluation):map 对象不会立即执行计算,只有在需要时才会真正处理数据多参数支持:可以同时处理多个可迭代对象函数式编程特性:配合 lambda 表


2.登录页测试用例
Sunlightʊə2025/11/14

用例ID测试标题测试类型测试场景测试步骤预期结果实际结果其他要素Login-001核心登录功能测试功能测试正常登录流程1.输入正确的用户名 2.输入正确的密码 3.点击登录按钮登录成功,跳转至主页面符合预期 Login-002用户名为空1.用户名为空 2.输入任意密码 3.点击登录按钮提示“请输入用户名”,用户名输入框变红符合预期 Login-003密码为空1.输入正确用户名 2.密码为空 3.点击登录按钮提示“请输入密码”,密码输入框变红符合预期 Login


Webpack Loader 和 Plugin 实现原理详解
阿珊和她的猫2025/11/12

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》 文章目录 一、Webpack Loader 实现原理(一)Loader 的概念(二)Loader 的生命周期(三)Loade

首页编辑器站点地图

本站内容在 CC BY-SA 4.0 协议下发布

Copyright © 2025 聚合阅读