作品介绍 1.本网站以动画犬夜叉为主题，介绍了犬夜叉的故事背景和大纲，并推出了犬夜叉的四个剧场版——超越时空的思念、镜中的梦幻城、世界霸道之剑、红莲蓬莱岛。最后，我们提供了一个反馈页面。欢迎发表意见。
2 、网站分为5个页面结构： 个网页，①主页(背景故事)（index）页面-介绍故事的背景，让读者有个大概 的社会背景 映像 ；② 故事梗概 页（summery.html）----介绍整个犬夜叉故事的来龙去脉；③列表页(剧场版介绍)（TVB.html ）----几个剧场版介绍犬夜叉动画:超越时空的思念，镜中的梦幻城，世界霸道之剑，红莲蓬莱岛；④反馈页（fankui.html）---提供反馈信息表，我希望你能加入我的这个 网站的建设使我的网站越来越酷 ；⑤详细页（xiangxi.html ）----它详细介绍了超越时空的故事经历、人物、背景音乐和票房信息。
3 、技术指标：与谷歌浏览器兼容，IE 浏览器和微软自带的浏览器Microsoft Edge浏览器。html 主要使用版本 html ，音频使用 html5 ，css 并未加入css3 新特性。使用编辑网站的工具Hbuilder ，这是一个非常好的软件，操作简单，页面介绍，也提供了一些非常方便的操作，类似于组织代码，开发视图看效果等等。
以下是效果图：
代码：
<div id="navfirst"> <ul id="header_top"> <li class="a"> <a href="index.html" target="_self">故事背景</a> </li> <li class="a"> <a href="summery.html" target="_self">故事梗概</a> </li> <li class="a"> <a href="TVB.html">TV剧场</a> </li> <li class="a"> <a href="advice.html">课程建议</a> </li> </ul> </div> <div id="maincontent"> <img src="img/桔梗.jpg" alt="杀生丸" /> <h4 align="center">战国时期发生的浪漫冒险——犬夜叉</h4> <p style="margin: 8px 0 8px 12px;"> 五十年前，巫女桔梗守护着四魂之玉，美丽优雅的巫女。当时狗夜叉作为半妖，为了增强自己的妖力，抢夺四魂之玉，此时结识了桔梗。当时，狗夜叉作为半妖，为了增强自己的妖力，抢夺四魂之玉，此时遇到了桔梗。虽然时候遇到了桔梗。虽然命运的红线牵引着两个人开始互相敌对，但随着时间的推移，逐渐相互理解，虽然狗夜叉表面粗糙，但心温柔善良，虽然桔梗总是骄傲的外表，但作为一个女巫她的责任无助。但一切都在两人相遇相知中溶化，逐渐相爱。犬夜叉为桔梗打定决心要用四魂之玉的力量变成人类和桔梗永远生活在一起。但就在所有看似美好的东西即将展开的时候，悲剧发生了。 </p> <p style="margin: 8px 0 8px 12px;"> 当时桔梗救了一只全身烧伤的贼鬼蜘蛛。鬼蜘蛛逐渐对桔梗产生了邪念，想得到桔梗和四魂之玉，于是把自己卖给了无数的怪物，诞生了邪恶的怪物奈落。奈落出生后的第一件事就是变成犬夜叉和桔梗，双方见面。当犬夜叉和桔梗决定使用四魂之玉的力量使犬夜叉成为人类时。并杀死桔梗，中伤犬夜叉，双方互相憎恨，互相欺骗。桔梗用最后一口气用弓箭将犬夜叉封印在御神木上，犬夜叉也在绝望中进入了永恒的睡眠。桔梗也在悲伤绝望中与四魂之玉一起火化，追随犬夜叉。 </p> <p style="margin: 8px 0 8px 12px;"> 50年后，桔梗转世为日暮神社的少女戈薇/ 阿篱，一个活泼坚强却又普通的初三学生。500年前，她在15岁生日那天被密封在家里的食骨井强行带到战国时期，穿越时空，看到了被密封在御神木上50年的犬夜叉。因为戈薇是桔梗的转世，当时体内隐藏着四魂之玉，被妖怪抢走，慌忙中，无意中解开了犬夜叉的封印。两个注定要相遇的人终于真正相遇了， 两人之间的爱情之旅逐渐开始。.后来，当怪物抢夺四魂之玉时，戈薇用弓箭将四魂之玉射散成碎片。碎片碎了，发出耀眼的光芒，然后四处散落，于是两人开始了寻找四魂之玉碎片的旅程。在路上，我遇到了七宝、弥勒和珊瑚，成为了合作伙伴。这些合作伙伴都有悲惨的经历。小狐狸七宝的父亲被雷兽兄弟杀死，所以他来抢劫戈薇手中的四魂玉。后来，犬夜叉杀死了雷兽兄弟，为七宝报仇。无家可归的七宝跟随犬夜叉开始寻找四魂之玉碎片的旅程。弥勒的家人从祖父那里被迫陷入了风穴的诅咒洞可以无限吸入任何东西，甚至自己也会被吸入消失。他的父亲和祖父因此失去了生命。弥勒想抢四魂之玉杀奈落解除诅咒，同时为家人报仇。他们在这里遇到了犬夜叉，互相了解后，一起走。珊瑚是一个恶魔退出房子，被奈落陷害，村民被杀，他的家人也被奈落控制的兄弟杀死，也被奈落挑起狗夜叉，然后找到狗夜叉报复，与狗夜叉战斗了解真相，成为朋友，一起开始旅程。 </p> </div> <div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_tqq" data-cmd="tqq" title="与腾讯微博分享"></a> <a href="#" class="bds_renren" data-cmd="renren" title="与人人网分享"></a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> </div>代码：
<div id="wrapper"> <div id="header_index"> <a href="http://www.iqiyi.com/a_19rrk09e7p.html" class="biaoti" target="_blank"><h1 align="center">犬夜叉</h1></a> </div> <div id="navfirst"> <ul id="header_top"> <li class="a"> <a href="index.html" target="_self">故事背景</a> </li> <li class="a"> <a href="summery.html" target="_self">故事梗概</a> </li> <li class="a"> <a href="TVB.html">TV剧场</a> </li> <li class="a"> <a href="advice.html">课程建议</a> </li> </ul> </div> <div id="maincontent"> <form name="form1"> <table width="408" border="1" align="center"> <tr> <td colspan="2" align="center">用户反馈</td> </tr> <tr> <td><div style="width: 100px;" align="right">用户名：</div></td> <td><input type="text" nname="textfile"</td> </tr> <tr> <td><div align="right">密码：</div></td> <td><input type="password" name="textfiled2"></td> </tr> <tr> <td><div align="right">性别：</div></td> <td><input type="radio" name="radiobutton" value="radiobutton" checked>男 <input type="radio" name="radiobutton" value="radiobutton">
</td>
</tr>
<tr>
<td><div align="right">爱好：</div></td>
<td><input type="checkbox" name="checkbox" value="checkbox">体育
<input type="checkbox" name="checkbox" value="checkbox">音乐
<input type="checkbox" name="checkbox" value="checkbox">动漫
<input type="checkbox" name="checkbox" value="checkbox">其他
</td>
</tr>
<tr>
<td><div align="right">联系电话：</div></td>
<td><input type="text" name="textfiled4"</td>
</tr>
<tr>
<td><div align="right">课程建言：</div></td>
<td><textarea name="xinxi" cols="40px" rows="10px"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="Submit" value="提交" onclick="alert('提交成功')">
<input type="reset" name="Submit2" value="重置" onclick="alert('重置成功')">
</td>
</tr>
</table>
</form>
</div>
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</div>
代码：
<audio autoplay="autoplay" loop="-1">
<source src="music/和田薫 - 悲运の巫女 桔梗.mp3" type="audio/mp3" />
Your browser does not support this audio format.
</audio>
<div id="wrapper">
<div id="header_index">
<a href="http://www.iqiyi.com/a_19rrk09e7p.html" class="biaoti" target="_blank">
<h1 align="center">犬夜叉</h1>
</a>
</div>
<div id="navfirst">
<ul id="header_top">
<li class="a">
<a href="index.html" target="_self">故事背景</a>
</li>
<li class="a">
<a href="summery.html" target="_self">故事梗概</a>
</li>
<li class="a">
<a href="TVB.html">TV剧场</a>
</li>
<li class="a">
<a href="advice.html">课程建议</a>
</li>
</ul>
</div>
<div id="maincontent">
<img src="img/timg (1).jpg" alt="犬夜叉" />
<p>
<h4 align="center">一段发生在战国的浪漫冒险故事---《犬夜叉》</h4>
大妖怪犬大将与人类公主十六夜的儿子
——半妖犬夜叉，因为自己半妖的身份受到人类与妖怪的排斥，为了成为真正的妖怪而想得到四魂之玉;而巫女桔梗为了保护和净化四魂之玉，运用灵力不断与前来抢夺四魂之玉的妖怪战斗，在强大的破魔之术下其实也有颗孤单的、渴望被爱的心。两人因四魂之玉结缘，桔梗发现了犬夜叉粗鲁外表下的善良，以及与自己同样的孤独;而犬夜叉也看到了渴望过平凡生活的巫女桔梗。在不断的相互了解中，两人相爱了，并最终约定利用四魂之玉的力量，把犬夜叉变成人类，守护使命结束的桔梗也可以回归到平凡生活，与爱人相守终生。但是，在约定的日子里，发生了难以预料的变故。被犬夜叉袭击而受到重伤的桔梗在背叛的愤怒中，用尽力气把犬夜叉封印在御神木上，然后带着四魂之玉在火焰中死去。悲剧就此拉开序幕……<a
href="http://www.iqiyi.com/a_19rrk09e7p.html">[了解更多]</a>
</p>
</div>
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</div>这里只展示部分网页和部分代码， 如需全部代码，关注公众号（coding加油站）回复“犬夜叉”免费领取。