做网站建设的技巧/商品推广软文范例300字
📂文章目录
一、📔网站题目
二、✍️网站描述
三、📚网站介绍
四、🌐网站演示
五、⚙️网站代码
🧱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…...
如何参加华为欧拉考试？
华为欧拉考试主要针对的是华为欧拉（EulerOS/openEuler）操作系统的认证考试，这一认证体系旨在培养和认证具备基于欧拉操作系统进行企业级应用运行基础环境搭建、管理和调测能力的工程师以及云计算架构师。以下是对华为欧拉考试的详细介绍&…...
算法预刷题Day9：BM28 二叉树的最大深度
描述： 描述 求给定二叉树的最大深度， 深度是指树的根节点到任一叶子节点路径上节点的数量。 最大深度是所有叶子节点的深度的最大值。 （注：叶子节点是指没有子节点的节点。） 思路： 当前节点的最大高度 ma…...
exp_lr_scheduler理解
1. exp_lr_scheduler理解 这行代码定义了一个学习率调度器，用于动态调整训练过程中优化器的学习率。让我们分解并解释其含义： 1. exp_lr_scheduler 是什么？ exp_lr_scheduler 是一个 学习率调度器（LR Scheduler），由 torch.optim.lr_scheduler.StepLR 创建，旨在按照预…...
Algorithm：河内之塔
1. 说明 河内之塔（Towers of Hanoi）是法国人 M.Claus（Lucas）于1883年从泰国带至法国的，河内为越战时北越的首都，即现在的胡志明市；1883年法国数学家 Edouard Lucas 曾提及这个故事，据…...
集中管理与实时审计：构建Linux集群（1300台服务器）日志平台的最佳实践
简介 随着企业IT基础设施的不断扩大，Linux服务器的数量也日益增多，传统的单机日志管理方式已无法满足对日志数据集中管理、审计和分析的需求。尤其是在大型集群环境中，如何高效地收集、存储和分析日志成为了一项重要的技术挑战。 背景 在实…...
在Scala中Array不可变的学习
package gjhs114import scala.collection.mutable.ArrayBuffer object Arrray114 {// 不可变数组：Array// def main(args: Array[String]): Unit {1 创建不可变数组// val arr1 Array(1,2,3)//2 访问.数组名（下标）。下标是从0开始到…...
vue3+vite 批量引入组件动态使用
import { ref, reactive, toRaw, markRaw, defineAsyncComponent, onMounted } from vue import type { Component } from vue// vue3vite 批量引入组件动态使用 const modules import.meta.glob<Component>(./details/*.vue) // 明确指定导入的模块类型为Component con…...
设计模式——方法链or流式接口
方法链或流式接口是一种编程模式或设计模式。核心思想是通过返回对象自身的应用，使得可以在一个表达式中连续调用多个方法。 c中实现这种模式 1.基本语法规则 （1）每个可链接的方法都返回对象自身的引用（通常是*this）…...
JAVA OPCUA 服务端开发，客户端连接会话监听和订阅事件监听
前言 关于使用milo开源库，开发opc ua服务器，有网友咨询如何设置服务端如何监听客户端的连接或断开事件，如何监听客户端发起订阅事件的代码实现，于是我完善了这部分的空缺整理整了这篇教程，希望能解决有同样需求，但是遇到困难的网友！因为milo没有官方文档的教程且网上详…...
pytest相关总结
1.pytest -v -s -v将测试用例名称和用例中的输出进行展示，将每条用例脚本的内容逐行进行结果展示； -s 参数是为了显示用例执行层级的打印信息 pytest使用总结笔记 - fengf233 - 博客园 2....