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…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...