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;
}六、🔧完整源码下载
👉🏻点击【下载链接】👈🏻
七、📣更多
👉🏻文章推荐：【修改文件修改日期为最新】
👉🏻文章推荐：【Web网页设计作业成品源码分享(持续更新)】
👉🏻关注我，获取更多源码~
👉🏻html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中..
👉🏻如果我的文章对您有帮助，请“👍点赞”“✍️评论”“💗收藏” 一键三连哦！
相关文章：
HTML5动漫主题网站——天空之城 10页 html+css+设计报告成品项目模版
📂文章目录 一、📔网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站演示 五、⚙️网站代码 🧱HTML结构代码 💒CSS样式代码 六、🔧完整源码下载 七、📣更多 一、&#…...
分布式会话 详解
分布式会话详解 在分布式系统中，用户的会话状态需要在多个服务器或节点之间共享或存储。分布式会话指的是在这种场景下如何管理和存储会话，以便在多个节点上都能正确识别用户状态，从而保证用户体验的一致性。 1. 为什么需要分布式会话 在单…...
探索仓颉编程语言：官网上线，在线体验与版本下载全面启航
文章目录 每日一句正能量前言什么是仓颉编程语言仓颉编程语言的来历如何使用仓颉编程语言在线版本版本下载后记 每日一句正能量 当你被孤独感驱使着去寻找远离孤独的方法时，会处于一种非常可怕的状态。因为无法和自己相处的人也很难和别人相处，无法和别人…...
Ubuntu无法连接Linux
检查网络连接 确保你的机器能够正常连接互联网。你可以尝试 ping 一下 GitHub 或其他网站，确认是否有网络问题： ping github.com如果无法 ping 通 GitHub，检查一下你的网络连接。 检查 GitHub 状态 有时候 GitHub 本身可能会出现服务故障。你…...
【Spring】注解开发
为了提高开发效率，从 Spring 2.0 开始引入了多种注解，而在 Spring 3.0 中则实现了纯注解的开发方式。 一、注解的使用 在 Spring 2.0 之后，使用注解进行开发主要分为两个步骤： 定义 Bean：使用 Component 注解来定义…...
数字图像稳定DIS介绍目录
之前用OpenCV做过防抖，OpenCV处理时，先处理一遍，再输出视频。二者相差还是挺大的。 前 言.......................................................................................................................................... …...
【人工智能-基础】SVM中的核函数到底是什么
文章目录 支持向量机（SVM）中的核函数详解1. 什么是核函数？核函数的作用：2. 核技巧：从低维到高维的映射3. 常见的核函数类型3.1 线性核函数3.2 多项式核函数3.3 高斯径向基函数（RBF核）4. 总结支持向量机（SVM）中的核函数详解 支持向量机（SVM，Support Vector Machine）…...
字节青训Marscode——8：找出整形数组中超过一半的数
问题描述 小R从班级中抽取了一些同学，每位同学都会给出一个数字。已知在这些数字中，某个数字的出现次数超过了数字总数的一半。现在需要你帮助小R找到这个数字。 测试样例 样例1： 输入：array [1, 3, 8, 2, 3, 1, 3, 3, 3] 输出…...
C++ 异步编程的利器std::future和std::promise
1、背景 在现代计算机系统中，许多任务可能需要花费较长时间才能完成，例如网络请求、文件读取、大规模数据计算等。如果在程序中同步地执行这些任务，会导致主线程被阻塞，整个程序在任务执行期间无法响应其他操作，用户体…...
CRM 系统中的 **知识库功能** 的设计与实现
CRM 系统中的 **知识库功能** 旨在为用户提供一个集中的平台，用于存储、组织和管理有关系统功能、常见问题、使用技巧、操作文档等信息。它能够帮助用户高效解决问题、快速获取所需信息，从而提升使用体验并减少客户支持负担。 ### 一、知识库功能的设计…...
重学设计模式-工厂模式（简单工厂模式，工厂方法模式，抽象工厂模式）
在平常的学习和工作中，我们创建对象一般会直接用new，但是很多时候直接new会存在一些问题，而且直接new会让我们的代码变得非常繁杂，这时候就会巧妙的用到设计模式，平常我们通过力扣学习的算法可能并不会在我们工作中用到…...
【C语言】结构体（四）
本篇重点是typedef关键字 一，是什么？ typedef用来定义新的数据类型，通常typedef与结构体的定义配合使用。 简单来说就是取别名 ▶ struct 是用来定义新的数据类型——结构体 ▶ typedef是给数据类型取别名。 二，为什么…...
swift类方法为什么使用表派发？
直接上答案：因为表派发允许子类重写父类的方法，并在运行时根据对象的实际类型调用正确的方法实现。 什么是表派发？ 首先我们先知道的是，swift当中函数的派发机制主要分为静态派发和动态派发。动态派发又分为表派发和消息派发。 …...
php实现AES/CBC/PKCS5Padding加密
接口文档 文档给过来的案例是java程序的，参照其思路，造一个php版本 构造aes对称加密 public static function encry($data){$data "要加密的数据";$key 你的256位密钥; // 密钥应该是16字节（128位），24字节…...
Anaconda3安装及使用
Anaconda3安装及使用 Linux中安装Anaconda31.安装 Anaconda32.配置环境变量3.验证是否成功 Conda环境和包管理1.Conda 环境初始化2.Conda Env 管理3.Conda 软件包管理 Linux中安装Anaconda3 下面是在Linux中安装Anaconda3-2021.05的教程，其他版本Anaconda更换名字即…...
Argon2-cffi与argon2-cffi-bindings：深入理解及其应用
Argon2-cffi与argon2-cffi-bindings的关系 在Python密码学领域，argon2-cffi和argon2-cffi-bindings是两个经常被提及的库。尽管它们的名字相似，但它们在实现和用途上有所不同。argon2-cffi是一个提供Argon2哈希算法的Python库，而argon2-cffi-…...
spring boot+jpa接入达梦数据库
文章目录 前言依赖配置对应的domain类和repository 前言 最近有一个新项目，由于信息安全等要求只能使用达梦数据库（dm8），之前从来没用过，特此开一个笔记记录一下spring bootjpa如何使用达梦数据库完成开发。 依赖 p…...
Vite构建，用NodeJS搭建一个简单的Vite服务
Vite 是一个现代的前端构建工具，由 Vue.js 作者尤雨溪创建。它主要用于开发和构建现代 JavaScript 应用，尤其是单页应用（SPA）。Vite 相比于传统的构建工具（如 Webpack）有几个显著的优势： 即时开…...
R语言机器学习论文（六）：总结
文章目录 介绍参考文献介绍 本文采用R语言对来自进行数据描述、数据预处理、特征筛选和模型构建。 最后我们获得了一个能有效区分乳腺组织的随机森林预测模型，它的性能非常好，这意味着它可能拥有非常好的临床价值。 在本文中，我们利用R语言对来自美国加州大学欧文分校的B…...
python---面向对象---综合案例（4）
案例描述 实现加减乘法运算 # _*_ encoding:utf-8 _*_# 计算器, 实现一些基本的操作, 加减乘除运算, 以及打印结果操作# ------------------------------------代码1-------------------------------------- def jia(n1, n2):return n1 n2def jian(n1, n2):return n1 - n2de…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...
C++：多态机制详解
目录 一. 多态的概念 1.静态多态（编译时多态） 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1）.协变 2）.析构函数的重写 5.override 和 final关键字 1&#…...
CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
LRU 缓存机制详解与实现（Java版） + 力扣解决
📌 LRU 缓存机制详解与实现（Java版） 一、📖 问题背景 在日常开发中，我们经常会使用 缓存（Cache） 来提升性能。但由于内存有限，缓存不可能无限增长，于是需要策略决定&am…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...