这是网页课大作业，作者独立完成首个静态网页。作业以新海诚动漫电影为主题，文字和图片源于百度，图片经PS加工。运用HTML5、CSS、DIV，主页有图片轮播，各网页添加背景音乐，还加了JS代码实现首页图片轮换。
这个是网页课的大作业，也算是自己独立完成的第一个静态网页，所以想留下来保存一下，作业内容文字资源全部来自百度百科，所有图片也来自百度，图片经过PS简单加工。
想学习使用的可以抱走 (つ•̀ᴥ•́)つ*:･ﾟ链接： 作业不易麻烦点赞评论一下
（用到了HTML5 +CSS+DIV 主页图片轮播，每个网页增加了背景音乐）
为什么是新海诚，一是个人爱好动漫，二是在我想好动漫电影为主题的时候有个网友在写宫崎骏的电影简介。
下面看一下主界面的截图吧
新海诚
加了一段JS代码，首页封面的图片可以轮换播放
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css" type="text/css">
<title>新海诚</title>
<script>
window.onload = function(){
var images = document.getElementsByTagName('img');
var pos = 0;
var len = images.length-1;
setInterval(function()
{
images[pos].style.display ='none';
pos = ++pos == len ? 0 : pos;
images[pos].style.display = 'inline'; },1000);
};
</script>
</head>
<body>
<div id="top">
<li><a href="#" >新海诚</a>
<li ><a href="她和她的猫.html" target="_blank">天气之子</a>
<li><a href="你的名字.html" target="_blank">你的名字</a>
<li><a href="言叶之庭.html" target="_blank">言叶之庭</a>
<li><a href="追繁星的孩子.html" target="_blank">追逐繁星的孩子</a>
<li><a href="秒速五厘米.html" target="_blank">秒速5厘米</a>
<li><a href="云之彼端，约定的地方.html" target="_blank">云之彼端</a>
<li><a href="她和她的猫.html" target="_blank">她和她的猫</a>
</div>
<div id="all">
<div id="center">
<img src="images/你的名字1.jpg" width="1200" height="440">
<img src="images/秒速五厘米.jpg" alt="该浏览器不支持" width="1200" height="440">
<img src="images/主页.jpg" width="1200" height="440">
</div>
<div id="meiddle">
<div id="tab-1">
<h1><img src="images/新海诚.jpg" width="600" height="750" class="big"></h1>
</div>
<div id="tab">
<table width="580" height="770" border="2">
<tr>
<td width="45" height="44">姓名</td>
<td width="76">新海诚</td>
<td width="54">原名</td>
<td width="76">新津诚</td>
<td width="186">国籍</td>
<td width="48">日本</td>
</tr>
<tr>
<td height="58">出生年月</td>
<td>1973年2月9日</td>
<td>出生地</td>
<td colspan="3">日本长野县</td>
</tr>
<tr>
<td height="36">毕业院校</td>
<td colspan="2">日本中央大学</td>
<td>职业</td>
<td colspan="2">日本动画导演和作家</td>
</tr>
<tr>
<td rowspan="6"><p>代</p>
<p>表</p>
<p>作</p>
<p>品</p></td>
<td height="23">你的名字</td>
<td rowspan="6"><p>个</p>
<p>人</p>
<p>经</p>
<p>历</p></td>
<td colspan="3" rowspan="6">1996年，新海诚在大学结业后加入日本Falcom游戏会社，负责程序、美工、动画与宣传影片制作。在职Falcom期间，开始了个人动画短片创作。
1997年，执导黑白短片《遥远世界》。1998年，拍摄了3D短片《被包围的世界》。
2000年，执导了黑白短片《她和她的猫》；同年初夏，新海氏开始制作个人映像动画《星之声》。但由于工作的繁忙，导致《星之声》一度停滞不前。
2001年5月，新海氏向Falcom提交辞职。之后《星之声》的制作步上正轨，2002年1月宣告完工，历时共计7个月。此外，新海氏也曾外注参与制作Minori游戏会社游戏《Bittersweet Fools》
《Wind·a breath of heart》片头动画。2003年新海诚新作《云的彼端，约定的地方》。
2006年，担任Minori游戏会社游戏《EF - the first tale》的动画监制(Animation Movie Director)。
2016年8月26日，自编自导的动画电影《你的名字。》上映，该片由神木隆之介、上白石萌音担任主要配音，新海诚凭借该片获得了第40届日本电影学院奖最佳编剧奖及第26届日本电影评论家大奖最佳导演奖；11月3日，获得第29届东京国际电影节感谢奖 。</td>
</tr>
<tr>
<td>言叶之庭</td>
</tr>
<tr>
<td>追逐繁星的孩子</td>
</tr>
<tr>
<td>秒速5厘米</td>
</tr>
<tr>
<td>云之彼端，约定的地方</td>
</tr>
<tr>
<td>她和她的猫</td>
</tr>
</table></div>
<div id="foot">
<p>@from 2019 171164069xingming </p>
</div>
</body>
</html>
你的名字
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/name.css" type="text/css">
<title>你的名字</title>
</head>
<body>
<audio src="bgsound/Your name.mp3" autoplay="" preload=""></audio>
<div id="nide">
<h1>你的名字。</h1>
</div>
<div id="top-1">
<p>
《你的名字。》<br>
是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影。作品于2016年8月26日在日本上映。中国内地于2016年12月2日上映。作品讲述了男女高中生在梦中相遇，并寻找彼此的故事。北京时间2017年8月26日零点于中国大陆的<a class="zt" href="https://www.iqiyi.com/v_19rr88x0kk.html?vfm=m_489_ppsp">PPTV</a>、<a class="zt" href="https://www.bilibili.com/bangumi/play/ep118250?from=search&seid=9419631733314696568">bilibili</a>、<a class="zt" href="https://www.iqiyi.com/v_19rr88x0kk.html?vfm=m_489_ppsp">爱奇艺</a>、<a class="zt" href="https://v.youku.com/v_show/id_XMjk4NzA1OTMzNg==.html?spm=a2h0k.11417342.soresults.dplaybutton&lang=%E5%9B%BD%E8%AF%AD">优酷网络首播</a>>>>
</p>
</div>
<div id="top-2">
<h2>剧情简介：</h2>
<h3><img src="images/n-tp2.jpg" alt=" " class="big"></h3>
<p>故事发生的地点是在每千年回归一次的彗星造访过一个月之前，日本飞驒市的乡下小镇糸守町。在这里女高中生三叶每天都过着忧郁的生活，而她烦恼的不光有担任镇长的父亲所举行的选举运动，还有家传神社的古老习俗。在这个小小的城镇，周围都只是些爱瞎操心的老人。为此三叶对于大都市充满了憧憬。
<br>然而某一天，自己做了一个变成男孩子的梦。这里有着陌生的房间、陌生的朋友。而眼前出现的则是东京的街道。三叶虽然感到困惑，但是能够来到朝思暮想的都市生活，让她觉得神清气爽。另一方面在东京生活的男高中生立花泷也做了个奇怪的梦，他在一个从未去过的深山小镇中，变成了女高中生。两人就这样在梦中邂逅了彼此。</p>
<br><hr color="#7BCF62">
<h2>人物简介：</h2>
<h3><img src="images/n-lhl.jpg" alt="立花泷" class="big"></h3>
<p>立花泷<br>配音:神木隆之介、 皇贞季（国语）<br>
住在东京中心的男高中生。每天和朋友们愉快地度日，在一家意式餐厅打工。对同僚奥寺前辈怀有好感。对建筑和美术很感兴趣。<br>身份背景:<br>
在东京中心某校就读的高中生，和藤井司和高木真太是好友。他每天和朋友们愉快地度日，课余打工挣钱，对意式餐厅的同事奥寺前辈怀有好感</p>
<hr>
<h3><img src="images/n-gssy1.jpg" alt="宫水三叶" class="big" ></h3>
<p>宫水三叶<br>配音:上白石萌音、佟心竹（国语）<br>
住在深山乡间小镇的女高中生。身为镇长的父亲离家在外，和还是小学生的妹妹以及祖母三个人生活。性格直率，对家族神社的风俗和父亲的选举活动等事情感到反感。和朋友们对这狭小的城镇叹息，憧憬着东京的华丽生活。<br>身份背景<br>糸守高中的二年级学生。在学校与名取早耶香、敕使河原克彦是好友。同时是糸守镇镇长宫水俊树的女儿。糸守镇宫水家的长女。作为宫水神社的传人，每年都要为神社编制组纽，并在丰穰祭上身着巫女服，梳妆打扮表演双人舞。虽然原因已不可考，三叶为了完成宫水家世代相传的职责，作为神社的“巫女”，要在仪式上当众咀嚼米粒制作“口嚼酒”，随后择日到山中的神体供奉。</p>
<hr>
<h3>
<img src="images/n-mqzyx.jpg" alt="名取早耶香" class="big"></h3>
<p>名取早耶香<br>配音:悠木碧 、牟珈论（国语）<br>
三叶的同级生。青梅竹马般的好友。文静且有常识。对敕使河原有好感。姐姐在市政厅担当广播。<br>身份背景:<br>
暗恋着敕使河原克彦。姐姐在镇公所担当广播的工作。在泷的笔记中被评价“老实的孩子”。原来死于陨石，被救后和青梅竹马的敕使河原克彦终成眷属。</p>
<br><hr>
<h3>
<img src="images/n-gssy.jpg" alt="宫水四叶" class="big"></h3>
<p>宫水四叶<br>配音:谷花音、杨鸣（国语）<br>
三叶的妹妹。可靠的时下小学四年生。与祖母和三叶一起帮忙神社的家业。<br>身份背景:<br>
宫水三叶的妹妹，一个时下小学四年级学生。与外祖母一叶和姐姐三叶一起帮忙神社的家业。外貌可爱，和姐姐关系亲密，有点小幽默。</p>
<br><hr>
<h3>
<img src="images/n-asmj.jpg" alt="奥寺美纪" class="big"></h3>
<p>奥寺美纪<br>配音:长泽雅美、纪艳芳（国语）<br>
泷的打工前辈。打扮漂亮的女大学生，包括泷在内的男性们的憧憬。<br>身份背景:<br>
立花泷的打工前辈，打扮漂亮的女大学生，包括立花泷在内的男性们憧憬。 奥寺美纪是意大利餐厅的员工，有着姣好的外貌、时髦的装扮。她是立花泷的爱慕的对象。</p>
<br><hr>
<h3>
<img src="images/n-gsyy.jpg" alt="宫水一叶" class="big"></h3>
<p>宫水一叶<br>配音:市原悦子、隋桂凤（国语）<br>
三叶的祖母。宫水神社现任神主。在自己的女儿、三叶的母亲亡故，三叶的父亲离开家后，独自一人抚养三叶和四叶长大。<br>身份背景:<br>
宫水一叶，三叶的外祖母。宫水神社现任神主。在自己的女儿即三叶的母亲亡故、三叶的父亲离开家后，独自一人抚养三叶和四叶长大。
疑似宫水家族的人年轻时都会与他人在睡梦中互换身体，这在《你的名字。》中一叶与三叶对话时被提及过。</p>
<hr>
<h3>
<img src="images/n-4.jpg" alt="敕使河原克彦" class="big"></h3>
<p>敕使河原克彦<br>配音:成田凌、孟令军（国语）<br>
三叶的同级生。神秘的机械宅。对在当地从事建筑业的父亲抱着复杂的心情。对三叶的事情很在意。<br>身份背景:<br>
对在当地从事建筑业的父亲抱着复杂的心情。对三叶的事情很在意。</p>
<br><br>
<hr>
</div>
<div >
<div id="tab">
<h2>制作人员: </h2>
<table width="1098" border="2" >
<tr>
<td width="154">原作、剧本、监督：</td>
<td width="926">新海诚</td>
</tr>
<tr>
<td>作画监督</td>
<td>安藤雅司</td>
</tr>
<tr>
<td>角色设计:</td>
<td>田中将贺</td>
</tr>
<tr>
<td>音乐：</td>
<td>RADWIMPS</td>
</tr>
<tr>
<td>制作：</td>
<td>市川南、川口典孝、大田圭二</td>
</tr>
<tr>
<td>共同制作:</td>
<td>井上伸一郎、弓矢政法、畠中达郎、善木准二、坂本健</td>
</tr>
<tr>
<td>企划制作</td>
<td>川村元气</td>
</tr>
<tr>
<td>执行制片</td>
<td>古泽佳宽
</td>
</tr>
<tr>
<td>制作人</td>
<td>武井克弘、伊藤耕一郎
</td>
</tr>
<tr>
<td>制作监制</td>
<td>酒井雄一</td>
</tr>
<tr>
<td>音乐监制</td>
<td>成川沙世子</td>
</tr>
<tr>
<td>音响监督</td>
<td>山田阳</td>
</tr>
<tr>
<td>音响效果</td>
<td>森川永子</td>
</tr>
<tr>
<td>制作：</td>
<td>《你的名字》制作委员会（东宝、CoMix Wave Films、KADOKAWA、JR东日本企划、Amuse、voque ting、Lawson HMV Entertainment）</td>
</tr>
<tr>
<td>动画制作</td>
<td>CoMix Wave Films</td>
</tr>
<tr>
<td>配给</td>
<td>东宝</td>
</tr>
</table>
</div>
<div id="top-3">
<h2>影片评价: </h2>
<p>《你的名字。》基于新海的原创剧本，电影围绕三叶，一个女孩不乐意住在农村，泷，一个东京的高中生，是一个建筑迷。这两个人有着命中注定的联系，但电影以不同寻常的方式实现的，至少可以说：他们在梦里交换着身体。新海诚的电影还展示了青春期真实的尴尬和窘迫，当三叶变为泷时，发现自己使用女性的“我”的称呼时朋友表现出的惊讶等，这笑料闲的十分可爱，当然这样的情景也再其他电视剧中出现过。然而这部电影关于的跨性别，是新海诚的独特之处，因为他们有着奇特的处境和陌生的渴望。他们互相留下笔记，甚至争吵。当然，一旦事情来到了这个阶段，就知道爱会绽放。但故事神秘之处是在故事开始前一个月的天空中出现一千年一次彗星。也预示着中心人物关系的萌芽。剧情需要很多的曲折，但把焦点集中在三叶和泷各自的命运。配角人物，如美纪，泷暗恋的对象，和三叶的祖母一叶、妹妹四叶，主要是为突出两主人公特点和困境。但作为最高潮的部分，天空中爆发出耀眼的颜色和光，《你的名字。》就像梦几乎每个人觉得恋人太完美，相遇太短，结局太突然，欣喜溶解在稀薄的空气以保持清醒的生活。但仍有一些东西保留下来——记忆，尽管如此微弱。《你的名字。》得到的是一种痛苦的悲情和超自然美的交融，难以忘怀。 （The Japan Times）
<br> 《你的名字。》讲述了少年少女互换身体，在各自的人生中度过一段时间；少年跨越时空，跨越时间，为了拯救死于陨石坠落的少女……这种浪漫与堪称完美的画面相结合，给观众们带去了一个无比美丽的爱情故事。电影中的小清新音乐也十分契合剧情跟画面，颇有浑然天成的感觉，令人怦然心动。
</p>
</div>
</div>
<div id="Foot">from 20190106 @xingming 学号@171164069
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/name.css" type="text/css">
<title>言叶之庭</title>
</head>
<body>
<audio src="bgsound/言叶之庭.mp3" autoplay=""></audio>
<div id="nide">
<h1>言叶之庭</h1>
</div>
<div id="top-1-y">
<p>
《言叶之庭》<br>由曾执导过《星之声》、《秒速5厘米》、《追逐繁星的孩子》等动画电影的新海诚掌镜，影片于2013年5月31日在台湾、香港、日本同步上映。乐视网也取得了电影的网络同步上映版权。《言叶之庭》的故事发生在现代东京，故事讲述了以制鞋人为目标的少年秋月和神秘女子雪野的恋爱故事。故事源于万叶集开篇的“孤悲”之恋，作品中透露出鞋、万叶集、日本庭园、雨等因素》》》
</p>
</div>
<div id="top-2">
<h2>剧情简介：</h2>
<h3>
<img src="images/y-2.jpg" class="big"></h3>
<p> 年方15岁的高中生秋月孝雄（入野自由 配音），专心学业的过程中不得不为了生计打工赚钱。母亲离家出走，他与哥哥过着看不到前方的生活。入梅之日，孝雄逃课来到日本庭园。在一座安静的小亭子里，27岁的职场女性雪野百香里（花泽香菜 配音）边吃巧克力边饮啤酒的样子引起了孝雄的注意。似曾相识的二人，每到落雨之日便从世俗的烦恼中逃脱出来，相会于这座钢筋铁骨都市丛林中宛若世外桃源的幽静角落。在梅雨季节的日子里，他们的心渐渐向彼此靠拢。志愿成为手工鞋匠的秋月，决心以雪野为模特做一双鞋。雨过天晴，艳阳高照，庭园中久久不见秋月和雪野的身影，相会无期亦有期</p>
</p>
<br><br><hr color="#7BCF62">
<h2>人物简介:</h2>
<h3>
<img src="images/y-x.jpg" class="big"></h3>
<p>秋月孝雄<br>配音:入野自由<br>
15岁的高中一年学生，立志想成为一名优秀的制鞋匠。几乎每天，都会边打工边制作。因为家庭的原因，个性超乎年龄的早熟。某一天下雨的早晨，逃课的孝雄在庭园思考鞋子的设计时，遇到了百香里。<br>个人经历:<br>
十五岁的高中一年生。立志成为一名制鞋师，每日辛勤工作。虽然家庭氛围不错，但是却拥有着大人的性格。在一次下雨的早晨像往常一样逃课了，在一座日本庭园风格的公园里画鞋的素描。在庭院中思考着如何设计鞋，就这样遇到了一边喝酒一边吃巧克力的雪野百香里</p>
<hr>
<h3>
<img src="images/y-xyblx.jpg" class="big"></h3>
<p>雪野百香里<br>配音：花泽香菜<br>
在雨天孝雄偶然遇到的神秘女性（漫画中为27岁），相遇时一边吃着巧克力，一边喝着啤酒。个性温柔善良，因为学校的流言没有勇气上班而逃避，与孝雄相遇后才逐渐释怀。<br>个人经历:<br>雪野百香里是新海诚的作品《言叶之庭》中的女主角，是男主角秋月孝雄就读的高中的古文老师。
由于在学校中的某位男生单恋她，而致使女生统一口径造谣污蔑她的事情，对她造成了巨大的心理压力，致使她不敢到学校上课，并出现了一些生理和心理上的问题，并最终导致了她的辞职。
他与孝雄第一次相遇是在入梅时节的新宿御苑，同时也发现了孝雄是自己所执教的高中的学生一事，于是用高中古文课中所教的一首万叶集短歌作为暗示。
在雨天孝雄偶然遇到的神秘女性，相遇时一边吃着巧克力，一边喝着啤酒。个性温柔善良，因为学校的流言没有勇气上班而逃避，与孝雄相遇后才逐渐释怀。其实雪野百香里吃巧克力喝啤酒就是为了刺激味觉的</p>
<hr>
<h3>
<img src="images/y-xxzm.jpg" class="big"></h3>
<p>孝雄之母<br>配音：平野文<br>
47岁女性，已和孝雄的父亲离婚。虽然热爱家庭，但是比起家庭来说，认为恋爱更为重要，因在外面有男友而时常不在家。</p>
<br><br>
<h3>
<img src="images/y-xxx.jpg" class="big"></h3>
<p>孝雄之兄<br>配音：前田刚<br>
和孝雄一样，对母亲复杂的情感觉得很无奈，所以决定离开家和女朋友同居。</p>
<br><br><br><br><hr>
<h3>
<img src="images/y-xm.jpg" class="big"></h3>
<p>孝雄兄女友<br>配音：寺崎裕香<br>
24岁，在关西长大。个性开朗大方，跟孝雄相处很融洽。</p>
<br><br><br><br><hr>
<h3>
<img src="images/y-x3.jpg" class="big"></h3>
<p>松本<br>配音：井上优<br>
孝雄的同学、朋友，一年级上学期和佐藤恋爱。</p>
<br><br><br><br><hr>
<h3>
<img src="images/y-x4.jpg" class="big"></h3>
<p>相泽（相沢）<br>配音：小松未可子<br>
高中三年生，骄傲且自视很高，总是被人所包围着。
后联合三年级女生集体欺负百香里，并且散播不当流言，使老师被迫离职。</p>
<br><br><br><hr>
<h3>
<img src="images/y-x22.jpg" class="big"></h3>
<p>佐藤<br>配音：潘惠美<br>
高中二年生，松本的女友。有着许多的朋友，对于校内的事情很了解。</p>
<br><br><br><br><hr>
<h2>发行信息:</h2>
<p> 言叶之庭》自2013年5月在日本上映以来，截止到6月27日观影人数突破10万大关。因此，日本多家影片决定延长上映时间，满足更多观众的观影需求。在台湾上映三天吸引近2000人次入场观影，从原定三天9场增一倍变为19场。平均满座率高达90%，成为当周在台北市绝色影城满座率最高的影片。<br>BD发行: <br>《言叶之庭》除了在中国网络播出之外，还在中国大陆发售BD，BD授权福煦影视文化投资旗下上海易元文化传播代理发售。内容上和日版基本没有区别。2013年7月第九届中国国际动漫游戏博览会（CCG EXPO）举办时，未曾到过中国大陆的新海诚也来到上海CCG动漫展现场签售。<br>小说单行本发行：<br> 《言叶之庭》的小说连载始于2013年9月号的杂志《DA VINCI》，内容涵盖电影里没有点出的人物角色的故事，以他们的视角来拓展出另一个《言叶之庭》的世界。
<br> 《言叶之庭》于2013年4月11日发行小说单行本，单行本收录了新海诚从2013年8月开始在杂志上连载的内容以及为单行本特别执笔的部分 [23] 。小说简体中文版由天闻角川代理发行，百花洲文艺出版社出版，于2015年3月在中国大陆地区上市。
<br><br></p><hr>
<h2>影片评价:</h2>
<p>少年恋爱记：<br>
在一次与新海诚的面对面采访中，一个西方人曾把新海诚的作品称为“景色色情片”。新海诚的这部《言叶之庭》回归到他的一贯风格，画面好看。在40多分钟的叙事中，很多人吐槽稀里糊涂就发现少年沦陷了。但这不是重点，重点是一个15岁的高中男生看上了比他大12岁的女教师，执着于帮她设计鞋子，这是一个喜欢做鞋的少年的恋爱故事。相比《秒速五厘米》中，贵树和明里年龄相仿兴趣相投却最终输给了距离和现实。<br>比以前有进步:<br>
新海诚之前的作品，为他赢得一群粉丝。但他的电影也有硬伤，重克制与含蓄，过度地渲染情绪，从而导致叙事能力不足。在新作《言语之庭》中，新海诚虽没有大突破，但小的进步仍是有的。影片讲述年方高中生秋月孝雄与职场女性雪野百香里之间的爱情故事，故事的基调一如新海诚之前所热爱的“悲恋”主题。故事本身有些单薄，所以新海诚将它放入小的背景里。如果人物放在一个更大的背景中，人物的纸片化倾向更被凸显。虽然处理多人互动还是有点捉襟见肘，但叙事手法却简洁流畅很多，比《秒速》、《云之彼端》有进步。此外，从观赏性来说，他运用动画的手法具有不一样的特色。<br>情节略不足:<br> 2013年06月影片在日本雅虎的评分为4分（5分满分），画面唯美，“随便一帧都能做桌面”，是受部分网友赞誉的一个方面。但在不足50分钟的动画里，情节上并不复杂。甚至有一点敷衍，这也是一些观众对影片不满的原因之一。对此，新海诚解释道：“删减了很多内容让内容更紧凑，但46分钟绝对够用了。”
<br><br></p>
<div id="Foot">from 20190106 @xingming 学号@171164069
</div>
</body>
</html>
只是记录一次大作业的情况，上面是部分效果图以及部分代码，有需要整个文件的朋友可以联系资料里的信息（备注好：姓名+来意）
技术菜 勿喷 谢谢（只给有需要的人）
扫一扫
2459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
