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

news2024/12/27 8:08:57

📂文章目录

一、📔网站题目

二、✍️网站描述

三、📚网站介绍

四、🌐网站演示

五、⚙️网站代码

🧱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网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中..

👉🏻如果我的文章对您有帮助，请“👍点赞”“✍️评论”“💗收藏” 一键三连哦！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2252814.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

day2 美化后的登录

day2 美化后的登录

import sysfrom PyQt6.QtGui import QIcon, QPixmap from PyQt6.QtWidgets import QApplication, QWidget, QLabel from PyQt6 import uicclass MyWidget(QWidget):def __init__(self):super().__init__()self.setWindowTitle("猫咪乐园")uiuic.loadUi("./untit…
阅读更多...
uniapp 自定义导航栏增加首页按钮，仿微信小程序操作胶囊

uniapp 自定义导航栏增加首页按钮，仿微信小程序操作胶囊

实现效果如图 抽成组件navbar.vue&#xff0c;放入分包 <template><view class"header-nav-box":style"{height:Props.imgShow?:statusBarHeightpx,background:Props.imgShow?:Props.bgColor||#ffffff;}"><!-- 是否使用图片背景 false…
阅读更多...
Android KEY的哪些事儿

Android KEY的哪些事儿

目录 一、APK应用签名 1、什么是APK应用签名&#xff1f; 1.1 目的和作用&#xff1f; 1.2 长什么样子&#xff1f; 2、APK应用签名使用流程 步骤一&#xff1a;如何生成APK应用签名文件&#xff1f; 步骤二&#xff1a;如何集成APK应用签名文件&#xff1f; 步骤三&am…
阅读更多...
Docker中安装GeoServer

Docker中安装GeoServer

一、准备工作 #创建数据持久化目录 mkdir -p /usr/local/application/geoserver/data_dir#授权 chmod 777 -R /usr/local/application/ 这一步是为了在容器外部管理GeoServer的数据&#xff0c;使得数据能够持久化存储。 二、拉取GeoServer镜像 从Docker Hub拉取GeoServer的…
阅读更多...
Create Stunning Word Clouds with Ease!

Create Stunning Word Clouds with Ease!

Looking to craft breathtaking word clouds? WordCloudStudio is your go-to solution! Whether you’re a marketer, educator, designer, or simply someone who loves visualizing data, this app has everything you need. Download now: https://apps.apple.com/app/wor…
阅读更多...
【JavaEE初阶】落霞与孤鹜齐飞，秋水共长天一色 - (重点)线程

【JavaEE初阶】落霞与孤鹜齐飞，秋水共长天一色 - (重点)线程

本篇博客给大家带来的是线程的知识点, 由于时间有限, 分三天来写, 本篇为线程第二篇. &#x1f40e;文章专栏: JavaEE初阶 &#x1f680;若有问题 评论区见 ❤欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅…
阅读更多...
java_判断语句——acwing

java_判断语句——acwing

题目一&#xff1a;倍数 665. 倍数 - AcWing题库 代码 import java.util.Scanner;public class Main{public static void main(String[] args) {Scanner sc new Scanner(System.in);int a sc.nextInt(), b sc.nextInt();if(a%b0 || b%a0) System.out.printf("Sao Mu…
阅读更多...
深度解析棋牌游戏开发：从搭建到运营的全流程实战分享

深度解析棋牌游戏开发：从搭建到运营的全流程实战分享

作为从事游戏开发十五年的技术老兵&#xff0c;经历了国内游戏市场从端游到手游的全流程变迁。市面上大多数棋牌产品&#xff0c;无论是传统房卡模式还是创新竞技玩法&#xff0c;自己曾经都参与设计和研发过。今天&#xff0c;我将结合多年的实战经验&#xff0c;分享棋牌游戏…
阅读更多...
mfc110u.dll是什么意思，mfc110u.dll丢失解决方法大全详解

mfc110u.dll是什么意思，mfc110u.dll丢失解决方法大全详解

mfc110u.dll是Microsoft Foundation Classes (MFC)库的一个特定版本&#xff08;版本11.0&#xff09;的Unicode动态链接库文件。MFC是Microsoft为C开发者设计的一个应用程序框架&#xff0c;主要用于简化Windows应用程序的开发工作。这个框架封装了很多Windows API函数&#x…
阅读更多...
【C++跬步积累】—— 继承

【C++跬步积累】—— 继承

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;C跬步积累 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日一题 &#x1f7e1; Linux跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0…
阅读更多...
爬虫专栏第二篇：Requests 库实战：从基础 GET 到 POST 登录全攻略

爬虫专栏第二篇：Requests 库实战：从基础 GET 到 POST 登录全攻略

简介&#xff1a;本文聚焦 Requests 库的强大功能与应用实战。首先介绍其安装步骤及版本选择要点&#xff0c;随后深入讲解 GET 请求&#xff0c;以百度页面为例&#xff0c;展示如何发起基本 GET 请求、巧妙添加 headers 与参数以精准搜索&#xff0c;以及正确设置 encoding 避…
阅读更多...
计算机网络：IP协议详细讲解

计算机网络：IP协议详细讲解

目录 前言 一、IP网段划分 二、IP报头 三、解决IP地址不足-->NAT技术 前言 在之前&#xff0c;我们学习了传输层中的TCP和UDP&#xff0c;重点是TCP协议&#xff0c;他帮我们解决具体到主机的哪个应用&#xff08;端口&#xff09;、传输的可靠&#xff08;序列号、校验和…
阅读更多...
Proteus8.17下载安装教程

Proteus8.17下载安装教程

Proteus是一款嵌入式系统仿真开发软件&#xff0c;实现了从原理图设计、单片机编程、系统仿真到PCB设计&#xff0c;真正实现了从概念到产品的完整设计&#xff0c;其处理器模型支持8051、HC11、PIC10/12/16/18/24/30/DsPIC33、AVR、ARM、8086和MSP430等&#xff0c;能够帮助用…
阅读更多...
C++设计模式（装饰模式）

C++设计模式（装饰模式）

一、介绍 1.动机 在某些情况下我们可能会“过度地使用继承来扩展对象的功能”&#xff0c;由于继承为类型引入的静态特质&#xff0c;使得这种扩展方式缺乏灵活性&#xff1b;并且随着子类的增多&#xff08;扩展功能的增多&#xff09;&#xff0c;各种子类的组合&#xff0…
阅读更多...
【VMware】Ubuntu 虚拟机硬盘扩容教程（Ubuntu 22.04）

【VMware】Ubuntu 虚拟机硬盘扩容教程（Ubuntu 22.04）

引言 想装个 Anaconda&#xff0c;发现 Ubuntu 硬盘空间不足。 步骤 虚拟机关机 编辑虚拟机设置 扩展硬盘容量 虚拟机开机 安装 gparted sudo apt install gparted启动 gparted sudo gparted右键sda3&#xff0c;调整分区大小 新大小拉满 应用全部操作 调整完成
阅读更多...
03-12、SpringCloud Alibaba第十二章，升级篇，服务注册与配置中心Nacos

03-12、SpringCloud Alibaba第十二章，升级篇，服务注册与配置中心Nacos

SpringCloud Alibaba第十二章&#xff0c;升级篇&#xff0c;服务注册与配置中心Nacos 一、为什么SpringCloud Alibaba 1、为什么 有了spring cloud这个微服务的框架&#xff0c;为什么又要使用spring cloud alibaba这个框架了&#xff1f;最重要的原因在于spring cloud中的…
阅读更多...
java网络通信（三）：TCP通信、实现客户端-服务端消息通信

java网络通信（三）：TCP通信、实现客户端-服务端消息通信

目录 1、什么是 TCP协议&#xff1f; 2、代码实现TCP协议的一发一收 2.1、客户端 2.2、服务端 2.3 结果演示 3、代码实现TCP协议的多发多收 3.1 客户端 3.2 服务端 3.3 结果演示 简介&#xff1a;本文章主要是演示如何用java代码以及TCP协议实现网络通信&#xff0c;实…
阅读更多...
剖析go协程池实现原理

剖析go协程池实现原理

go协程池实现 在go语言编程中有一种池肯定避免不了&#xff0c;那就是-协程池&#xff0c;无论你是日常工作还是面试中面试官都无法避免协程池&#xff0c;掌握协程池你也就算是入门go的并发编程了&#xff0c;打一波广告后面会有专门的文章来介绍如何在go中进行并发编程。 协…
阅读更多...
华为关键词覆盖应用市场ASO优化覆盖技巧

华为关键词覆盖应用市场ASO优化覆盖技巧

在我国的消费者群体当中&#xff0c;华为的品牌形象较高&#xff0c;且产品质量过硬&#xff0c;因此用户基数也大。与此同时&#xff0c;随着影响力的增大&#xff0c;华为不断向外扩张&#xff0c;也逐渐成为了海外市场的香饽饽。作为开发者和运营者&#xff0c;我们要认识到…
阅读更多...
万能门店小程序管理系统 onepic_uploade 任意文件上传漏洞复现

万能门店小程序管理系统 onepic_uploade 任意文件上传漏洞复现

0x01 产品简介 万能门店小程序管理系统是一款功能强大的工具，旨在为各行业商家提供线上线下融合的全方位解决方案。是一个集成了会员管理和会员营销两大核心功能的综合性平台。它支持多行业使用，通过后台一键切换版本，满足不同行业商家的个性化需求。该系统采用轻量后台，搭…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023