HTML5动漫主题网站——天空之城 10页 html+css+设计报告成品项目模版

📂文章目录

一、📔网站题目

二、✍️网站描述

三、📚网站介绍

四、🌐网站演示

五、⚙️网站代码

🧱HTML结构代码

💒CSS样式代码

六、🔧完整源码下载

七、📣更多

一、📔网站题目

⭐ HTML5动漫主题网站天空之城 10页 html+css+设计报告成品项目模版。

❤ 我的主页：【🚀获取更多优质源码】

❤ 更多源码：【🔥Web网页设计作业成品源码分享(持续更新)】

二、✍️网站描述

🏷️HTML5动漫主题网站天空之城 10页 html+css+设计报告成品项目模版，其中包含：html文件10个、css文件1个、images图片22个。

其中标签用到了：div、p、h1、a、img、h3、b等标签。

其中5个网页包含：漫画简介页、乔巴简介页、乔巴图集页、漫画欣赏页、网站介绍页。

三、📚网站介绍

📔网站布局：采用DIV+CSS进行网页布局，兼容各大浏览器保证可以正常展示；

📘网站素材：图片均采自网络素材，符合了页面主题规范；

📒网站文件：其中HTML是网页的结构、CSS是网页的样式、JS是页面的动态效果；

📙网页编辑：如(DW、HBuilder、NotePAD、VScode、Sublime、Webstorm、Text、Notepad++)都可修改代码。

四、🌐网站演示

五、⚙️网站代码

🧱HTML结构代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天空之城网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head><body><div class="container"><div class="header"><a href="index.html"><img src="images/logo.png"><span>天空之城</span></a></div><div class="nav"><a href="index.html">天空之城</a><a href="info.html">影片信息</a><a href="plot.html">剧情简介</a><a href="person.html">人物简介</a><a href="auto.html">登场机器</a><a href="gag.html">幕后花絮</a><a href="mean.html">影片意义</a><a href="word.html">热门影评</a><a href="register.html">影迷注册</a><a href="login.html">影迷登录</a></div><div class="wrapper"><div class="focus"><a href="info.html"><img src="images/focus.jpg"/></a></div><div class="line"><p><b><a href="plot.html">剧情简介</a></b><span><a href="plot.html">小姑娘希达（SHEETA）是传说中“天空之城拉普达（Laputa）”王族的后裔，那曾是超越地上文明不知几千年的空中文明，但不知为何，希达的祖先离开“天空之城”，抛弃发达的科技，在地面上过起隐居的生活。然而一天，几个不明身份的男子出现在她家门口。故事由希达所坐的军队飞行船遭到空中海盗的袭击而开始。争斗中希达从万米高空的飞行船上跌落下来……故事另外一个主人公少年巴鲁（PASU）是矿工机师的学徒，这一天收工时，发现天上有个亮晶晶的东西正在慢慢地下落。。。。。</a></span></p><a href="plot.html"><img src="images/plot.jpg"/></a></div><div class="item"><a href="person.html"><img src="images/person1.jpg"/></a><h3>希达全</h3><p><a href="person.html">希达全，名罗希达·多耶鲁·乌鲁·拉普达。希达是一位身世不明的少女。</a></p></div><div class="item"><a href="person.html"><img src="images/person2.jpg"/></a><h3>巴鲁</h3><p><a href="person.html">巴鲁是一位住在有矿坑的小型城镇附近的少年，男主角，本身个性直接且豪爽。</a></p></div><div class="item"><a href="person.html"><img src="images/person3.jpg"/></a><h3>穆斯卡</h3><p><a href="person.html">穆斯卡是拉普达王族另一分支的后裔。为政府的情报机关之特务头领，军衔是上校。</a></p></div><div class="item"><a href="person.html"><img src="images/person4.jpg"/></a><h3>穆罗将军</h3><p><a href="person.html">穆罗将军是探索拉普达任务的指挥官，军中阶级为将军，有着一副军队指挥官的身材。</a></p></div><div class="item"><a href="person.html"><img src="images/person5.jpg"/></a><h3>朵拉</h3><p><a href="person.html">朵拉是空中海贼的首领，是个面恶心善的老海盗，精通天文地理和密码破解。</a></p></div><div class="item"><a href="person.html"><img src="images/person6.jpg"/></a><h3>查尔斯</h3><p><a href="person.html">朵拉的长男，是一个有着丰厚胡子的大男人，身体很强壮，平日里一副很凶的样子。</a></p></div><div class="item"><a href="person.html"><img src="images/person7.jpg"/></a><h3>路易</h3><p><a href="person.html">朵拉的次男。留有一小撮的胡子，穿着一件白色的西服，里边是一件紫色的衬衣。</a></p></div><div class="item"><a href="person.html"><img src="images/person8.jpg"/></a><h3>亨利</h3><p><a href="person.html">朵拉的三男。虎蛾号的成员。帽子时常把眼睛遮起来，脸颊上长有雀斑。</a></p></div><div class="item"><a href="person.html"><img src="images/person9.jpg"/></a><h3>波姆爷爷</h3><p><a href="person.html">巴鲁的友人，一名在废弃矿坑里生活的老者，知晓矿石知识与飞行石相关的传说。</a></p></div><div class="list"><h3><a href="gag.html">幕后花絮</a></h3><p><a href="gag.html">《天空之城》是吉卜力工作室的开山之作。宫崎骏是受到了小说《格列佛游记》的启发才写出了该片的故事，并亲自担任导演将其制作成动画电影推出。该片是宫崎骏的第三部作品，也是吉卜力工作室推出的首部动画电影。</a></p><a href="gag.html"><img src="images/gag.jpg"/></a></div><div class="list"><h3><a href="mean.html">影片意义</a></h3><p><a href="mean.html">《天空之城》是一部纯粹的宫崎骏式风格的电影。女性角色一直是宫崎骏影片塑造人物的重点，也许女性柔美刚强的性格更易于吸引我们，唯美的画面所隐藏的沉重的命题似乎解释了为什么宫崎骏对女性角色塑造的忠贞不渝。</a></p><a href="mean.html"><img src="images/mean.jpg"/></a></div><div class="list"><h3><a href="word.html">热门影评</a></h3><p><a href="word.html">《天空之城》比人们所期望的宫崎骏作品更加倾向于公式化，但他后期作品中梦幻般的光辉已经在该片中初见雏形，而且该片中还有着惊人的科幻元素，足以比肩当代的一些优秀科幻电影作品。（《偏锋杂志》评）</a></p><a href="word.html"><img src="images/word.jpg"/></a></div></div><div class="footer">Copyright @ 2022 tkzc.com 天空之城网 版权所有</div></div></body>
</html>

💒CSS样式代码

@charset "utf-8";*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:14px;color:#333;background-color:#dceefc;
}
a{color:#555;text-decoration:none;
}
a:hover{color:#4ea4c7;text-decoration:underline;
}.container{width:1000px;margin:0 auto;overflow:hidden;background-color:#fff;
}.header{float:left;width:1000px;height:100px;line-height:100px;font-size:34px;background-color:#4ea4c7;
}
.header a{color:#fff;
}
.header img{float:left;width:55px;height:55px;margin:24px 0 0 380px;
}
.header span{margin-left:10px;
}.nav{float:left;width:1000px;height:40px;line-height:40px;font-weight:bold;background-color:#0483b1;
}
.nav a{color:#fff;margin:0 20px 0 20px;
}.wrapper{float:left;width:1000px;
}.focus{float:left;width:1000px;height:480px;
}
.focus img{float:left;width:1000px;height:480px;
}.line{float:left;width:960px;margin:30px 0 0 20px;
}
.line p{float:left;width:635px;
}
.line p b{float:left;width:635px;height:20px;line-height:20px;margin-top:5px;font-size:16px;
}
.line p span{float:left;width:635px;line-height:27px;margin-top:8px;
}
.line img{float:right;width:306px;height:170px;
}.item{float:left;width:306px;margin:30px 0 0 20px;
}
.item img{float:left;width:100px;height:100px;
}
.item h3{float:right;width:190px;height:20px;line-height:20px;font-size:16px;
}
.item p{float:right;width:190px;line-height:25px;margin-top:5px;
}.list{float:left;width:306px;margin:25px 0 0 20px;
}
.list h3{float:left;width:306px;height:25px;line-height:25px;
}
.list p{float:left;width:306px;line-height:27px;margin-top:5px;
}
.list img{float:left;width:306px;height:170px;margin-top:10px;
}.info{float:left;width:1000px;padding-bottom:10px;
}
.info h2{float:left;width:1000px;height:30px;line-height:30px;margin:20px 0;text-align:center;
}
.info img{float:left;width:900px;margin:20px 0 10px 50px;
}
.info p{float:left;width:266px;margin-left:50px;border-bottom:1px dotted #cccccc;
}
.info p b{float:left;width:80px;height:58px;line-height:58px;
}
.info p span{float:left;width:186px;height:58px;line-height:58px;
}.text{float:left;width:1000px;padding-bottom:10px;
}
.text h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;text-align:center;
}
.text img{float:left;width:900px;margin:20px 0 10px 50px;
}
.text p{float:left;width:900px;line-height:28px;margin-left:50px;text-indent:25px;
}.person{float:left;width:1000px;
}
.person h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;text-align:center;
}
.person p{float:left;width:306px;margin:20px 0 0 20px;padding-bottom:15px;border:1px solid #f1f1f1;
}
.person p img{float:left;width:160px;height:160px;margin:15px 0 0 73px;border-radius:50%;
}
.person p b{float:left;width:276px;height:25px;line-height:25px;margin:12px 0 0 15px;font-size:16px;text-align:center;
}
.person p span{float:left;width:276px;line-height:25px;margin:5px 0 0 15px;
}.auto{float:left;width:1000px;
}
.auto h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;text-align:center;
}
.auto p{float:left;width:468px;margin:20px 0 0 20px;padding-bottom:15px;border:1px solid #f1f1f1;
}
.auto p img{float:left;width:160px;height:160px;margin:15px 0 0 150px;border-radius:50%;
}
.auto p b{float:left;width:438px;height:25px;line-height:25px;font-size:16px;text-align:center;margin:12px 0 0 15px;
}
.auto p span{float:left;width:438px;line-height:25px;margin:5px 0 0 15px;
}.into{float:left;width:1000px;padding:130px 0 150px 0;
}
.into p{float:left;width:990px;
}
.into p b{float:left;width:300px;height:65px;line-height:65px;text-align:right;
}
.into p input{float:left;width:330px;height:35px;margin:15px 0 0 20px;
}
.into p input.submit{color:#fff;background-color:#4ea4c7;border:0;
}.footer{float:left;width:1040px;height:80px;line-height:80px;margin-top:30px;text-align:center;color:#fff;background-color:#4ea4c7;
}