基于web的海贼王动漫介绍 html+css静态网页设计6页+设计文档
📂文章目录
一、📔网站题目
二、✍️网站描述
三、📚网站介绍
四、🌐网站演示
五、⚙️网站代码
🧱HTML结构代码
💒CSS样式代码
六、🔧完整源码下载
七、📣更多
一、📔网站题目
⭐ 基于web的海贼王动漫介绍 html+css静态网页设计6页+设计文档。
❤ 我的主页：【🚀获取更多优质源码】
❤ 更多源码：【🔥Web网页设计作业成品源码分享(持续更新)】
二、✍️网站描述
🏷️基于web的海贼王动漫介绍 html+css静态网页设计6页+设计文档，网页成品，其中包含：html文件6个、css文件1个、images图片14个。
其中标签用到了：div、p、h1、a、img、等标签。
其中6个网页包含：海贼王首页、漫画简介页、作者介绍页、漫画角色介绍、最近新闻页、漫画赏析页。
三、📚网站介绍
📔网站布局：采用DIV+CSS进行网页布局，兼容各大浏览器保证可以正常展示；
📘网站素材：图片均采自网络素材，符合了页面主题规范；
📒网站文件：其中HTML是网页的结构、CSS是网页的样式、JS是页面的动态效果；
📙网页编辑：如(DW、HBuilder、NotePAD、VScode、Sublime、Webstorm、Text、Notepad++)都可修改代码。
四、🌐网站演示
五、⚙️网站代码
🧱HTML结构代码
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>欢迎来到海贼王基地，喜欢海贼王的朋友都可以来我们网站参观</title><link rel="stylesheet" type="text/css" href="index.css">
</head><body><center><div class="top"><div id="page"><!--欢迎开始--><div class="huanying"><p>您好，欢迎来到海贼王基地！</p><span><a href="jieshao.html">海贼王介绍</a> </span></div><!--欢迎结束--><!--头部开始--><div class="head"><div class="headA"><img src="images/flashA.jpg" width="700" height="120" /></div><div class="headB"></div></div><!--头部结束--><div class="clearit"></div><div class="hSpace10"></div><!--中部开始--><div class="content"><!--左部分开始--><div class="content_l"><ul><li><a href="index.html">海贼王首页</a></li><li><a href="jieshao.html">漫画简介</a></li><li><a href="zuozhe.html">作者介绍</a></li><li><a href="juese.html">漫画角色介绍</a></li><li><a href="xinwen.html">最近新闻</a></li><li><a href="tupian.html">漫画赏析</a></li></ul><div class="hSpace10"></div><div class="zuo"><img src="images/zuo.jpg" /></div></div><!--左部分结束--><!--右部分开始--><div class="content_r"><!--左尾部开始--><div class="l_weibu"><!--介绍开始--><div class="jieshao"><div class="jieshaoA"><h4>漫画简介</h4></div><div class="clearit"></div><p> 《one piece》（中译《海贼王》/海盗路飞）是尾田荣一郎在《周刊少年JUMP》上连载的漫画。“ONEPIECE”在故事中为“一个大秘宝”之意。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONEPIECE”，许多人为了争夺“ONEPIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，蒙其·D·路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标：当上“海贼王”。</p><p> 故事讲述了主人公路飞立志成为海盗王，为了寻找传说中的秘宝ONEPIECE而展开的凶险无比同时也波澜壮阔的冒险故事。草帽小子路飞带领船员从东海启程经伟大航道到新世界，一路历经各种艰难挫折，不断朝伟大航路的终点站迈进。</p></div><!--介绍结束--></div><!--左尾部结束--><!--右尾部开始--><div class="r_weibu"><!--动态开始--><div class="hSpace5"></div><div class="xundao"><img src="images/xundao.jpg" /></div><!--动态结束--><div class="hSpace5"></div><!--介绍开始--><div class="mingxing"><div class="jieshaoA"><h4>最近新闻</h4></div><div class="clearit"></div><ul><li><a href="xinwen.html"> [新闻] 艾斯不死之理由!!</a></li><li><a href="xinwen.html"> [新闻] 收集各集的细节分析第十人</a></li><li><a href="xinwen.html"> [新闻] 海贼645话分析 鱼人岛和诺亚的命运</a></li><li><a href="xinwen.html"> [新闻] 奇功绝技之Hancoke</a></li><li><a href="xinwen.html"> [新闻] 草帽物语丨OP644：鱼人岛黑暗面的吞噬</a></li></ul></div><!--介绍结束--></div><!--右尾部结束--><div class="hSpace10"></div><!--推荐开始--><div class="tuijian"><div class="tuijianA"><h4>漫画赏析</h4></div><div class="tuijianB"><a href="images/tu1.jpg" target="_blank"><img src="images/tu1.jpg" border="0" /></a><a href="images/tu2.jpg" target="_blank"><img src="images/tu2.jpg" border="0" /></a><a href="images/tu3.jpg" target="_blank"><img src="images/tu3.jpg" border="0" /></a><a href="images/tu4.jpg" target="_blank"><img src="images/tu4.jpg" border="0" /></a></marquee><div class="clearit"></div></div></div><!--推荐结束--></div><!--右部分结束--><div class="clearit"></div><div class="hSpace10"></div><div class="adA"><img src="images/adB.jpg" /></div><div class="hSpace10"></div><div class="hSpace10"></div></div><!--中部结束--></div></div></center>
</body></html>💒CSS样式代码
/* CSS Document */body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {margin: 0;padding: 0;border: 0;
}* {margin: 0;padding: 0;border: 0;
}body {font-family: "宋体";font-size: 12px;color: #000000;line-height: 20px;text-align: left;background: #2b020a;
}td,
th {font-family: "宋体";font-size: 12px;color: #000000;
}a {color: #000000;
}A:link {TEXT-DECORATION: none;
}A:visited {TEXT-DECORATION: none;
}A:hover {text-decoration: underline;
}ul,
li {list-style-type: none;
}li a:hover {text-decoration: underline;
}object {margin: 0;padding: 0;border: 0;
}.clearit {clear: both;
}.hSpace1 {height: 1px;line-height: 1px;overflow: hidden;clear: both;
}.hSpace5 {height: 5px;line-height: 5px;overflow: hidden;clear: both;
}.hSpace10 {height: 10px;line-height: 10px;overflow: hidden;clear: both;
}.hSpace5F {height: 5px;line-height: 5px;background: #FFFFFF;overflow: hidden;clear: both;
}.p5 {padding: 5px;
}.borderU {border-right: 1px solid #75819e;border-left: 1px solid #75819e;border-bottom: 1px solid #75819e;
}.borderU_p5 {border-right: 1px solid #75819e;border-left: 1px solid #75819e;border-bottom: 1px solid #75819e;padding: 5px;
}.borderH {border-right: 1px solid #75819e;border-left: 1px solid #75819e;
}.borderH_p5 {border-right: 1px solid #75819e;border-left: 1px solid #75819e;padding: 5px;
}.line_X {background: url("images/lineX.gif") repeat-x;overflow: hidden;line-height: 1px;
}#page {width: 970px;margin: 0 auto;background: #d9d9d9
}.top {width: 100%;padding-top: 300px;background: url("images/top.jpg") no-repeat top center;
}.head {width: 970px;margin: 0 auto;
}.headA {width: 700px;height: 120px;float: left;
}.headB {width: 270px;height: 120px;float: left;background: url("images/headB.jpg") no-repeat;
}.headB ul li {text-align: center;color: #FFFFFF;
}.content {width: 970px;margin: 0 auto;
}.content_l {width: 159px;float: left;background: #eaf2ff;
}.content_l ul li {width: 159px;height: 30px;display: block;font-weight: bolder;background: url("images/navA_bg.jpg") no-repeat;font-size: 14px;line-height: 30px;margin-top: 10px;
}.content_l ul li a:hover {color: #091e9d;
}.content_r {width: 801px;float: right;
}.l_weibu {width: 398px;height: 338px;border: 1px solid #d5d5d5;float: left
}.dongtai {width: 390px;height: 145px;background: url("images/dongtai_bg.jpg") no-repeat;margin-top: 4px;
}.dongtaiA h4 {font-size: 14px;font-weight: bolder;color: #091e9d;text-align: left;line-height: 30px;margin-left: 10px;float: left;display: inline
}.dongtaiA span {float: left;margin-left: 10px;display: inline;line-height: 30px;color: #091e9d;
}.dongtai ul {text-align: left;line-height: 24px;padding-top: 5px;margin-left: 10px;
}.jieshao {width: 390px;height: 344px;background: #2b0208;
}.jieshaoA {width: 100%;height: 30px;overflow: hidden;border-bottom: 1px solid #FFFFFF;
}.jieshaoA h4 {font-size: 14px;font-weight: bolder;color: #ffffff;text-align: left;line-height: 30px;margin-left: 10px;float: left;display: inline
}.jieshaoA span {float: left;margin-left: 10px;display: inline;line-height: 30px;color: #ffffff;
}.jieshao p {text-align: left;line-height: 22px;width: 368px;padding-top: 5px;color: #FFFFFF
}.r_weibu {width: 389px;height: 338px;border: 1px solid #d5d5d5;float: right
}.xundao {width: 379px;height: 192px;margin: 0 auto;
}.xundao img {border: 1px solid #000000;display: block;
}.mingxing {width: 379px;height: 142px;background: #2b0208;
}.mingxing ul {text-align: left;margin-left: 20px;padding-top: 5px;
}.mingxing ul li a {color: #FFFFFF;
}.nav {width: 970px;height: 25px;background: url("images/zhanshiA_bg.gif") no-repeat;
}.nav ul {margin-left: 120px;
}.nav ul li {display: block;float: left;width: 100px;font-size: 14px;font-weight: bolder;line-height: 25px;margin-left: 20px;
}.lianjie {width: 970px;margin: 0 auto;background: #eaf2ff;height: 60px;
}.lianjie ul {margin-left: 160px;
}.lianjie ul li {width: 100px;height: 30px;border: 1px solid #000000;background: #5c8be7;float: left;display: block;margin-left: 20px;display: inline;font-size: 14px;font-weight: bolder;line-height: 30px;
}.huanying {width: 970px;height: 29px;background: url("images/huanying.gif") repeat-x;line-height: 29px;
}.huanying p {float: left;line-height: 29px;padding-left: 10px;display: inline
}.huanying span {float: right;line-height: 29px;padding-left: 20px;background: url("../compic/shoucang_bg.gif") no-repeat left;margin-right: 10px;display: inline
}.foot {width: 970px;margin: 0 auto;background: #eaf2ff;line-height: 22px;padding: 20px 0;
}.tuijian {width: 796px;background: #ffffff
}.tuijianA {width: 796px;height: 37px;background: #2b0208;
}.tuijianA h4 {font-size: 14px;font-weight: bold;text-align: left;line-height: 37px;padding-left: 30px;color: #ffffff
}.tuijianB {border-bottom: 1px solid #b2c7eb;border-left: 1px solid #b2c7eb;border-right: 1px solid #b2c7eb;padding: 10px 0;
}.tuijianB img {border: 1px solid #000000;float: left;margin-left: 20px;display: inline;width: 160px;height: 113px;
}.new_r {width: 801px;float: right;
}.new {width: 780px;margin: 0 auto;
}.new h1 {font-size: 16px;font-weight: bold;text-align: center;line-height: 30px;padding: 10px 0;
}.new_cont {text-align: left;line-height: 24px;font-size: 14px;padding-bottom: 20px;
}.new_tu {text-align: left;line-height: 24px;font-size: 14px;padding-bottom: 20px;
}.new_tu img {width: 160px;display: block;padding: 2px;border: 1px solid #666666;float: left;margin-left: 20px;display: inline;
}六、🔧完整源码下载
👉🏻点击【下载链接】👈🏻
七、📣更多
👉🏻文章推荐：【修改文件修改日期为最新】
👉🏻文章推荐：【Web网页设计作业成品源码分享(持续更新)】
👉🏻关注我，获取更多源码~
👉🏻html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中..
👉🏻如果我的文章对您有帮助，请“👍点赞”“✍️评论”“💗收藏” 一键三连哦！
相关文章：
基于web的海贼王动漫介绍 html+css静态网页设计6页+设计文档
📂文章目录 一、📔网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站演示 五、⚙️网站代码 🧱HTML结构代码 💒CSS样式代码 六、🔧完整源码下载 七、📣更多 一、&#…...
2022 年 9 月青少年软编等考 C 语言三级真题解析
目录 T1. 课程冲突T2. 42 点思路分析T3. 最长下坡思路分析T4. 吃糖果思路分析T5. 放苹果思路分析T1. 课程冲突 此题为 2021 年 9 月三级第一题原题，见 2021 年 9 月青少年软编等考 C 语言三级真题解析中的 T1。 T2. 42 点 42 42 42 是： 组合数学上的第 5 5 5 个卡特兰数字…...
机器学习算法（六）---逻辑回归
常见的十大机器学习算法： 机器学习算法（一）—决策树 机器学习算法（二）—支持向量机SVM 机器学习算法（三）—K近邻 机器学习算法（四）—集成算法 机器学习算法（五…...
计算机科学中的主要协议
1、主要应用层协议： HTTP、FTP、SMTP、POP、IMAP、DNS、TELNET和SSH等 应用层协议的主要功能是支持网络应用，定义了不同应用程序之间的通信规则。它们负责将用户操作转换为网络可以理解的数据格式，并通过传输层进行传输。应用层协议直接与用…...
下载maven 3.6.3并校验文件做md5或SHA512校验
一、下载Apache Maven 3.6.3 Apache Maven 3.6.3 官方下载链接： 二进制压缩包（推荐）: ZIP格式: https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.zipTAR.GZ格式: https://archive.apache.org/dist/…...
【Android】View工作原理
View 是Android在视觉上的呈现在界面上Android提供了一套GUI库，里面有很多控件，但是很多时候我们并不满足于系统提供的控件，因为这样就意味这应用界面的同类化比较严重。那么怎么才能做出与众不同的效果呢？答案是自定义View&#…...
TIE算法具体求解-为什么是泊松方程和傅里叶变换
二维泊松方程的通俗理解 二维泊松方程 是偏微分方程的一种形式，通常用于描述空间中某个标量场（如位相场、电势场）的分布规律。其一般形式为： ∇ 2 ϕ ( x , y ) f ( x , y ) \nabla^2 \phi(x, y) f(x, y) ∇2ϕ(x,y)f(x,y) 其…...
postman中获取随机数、唯一ID、时间日期（包括当前日期增减）截取指定位数的字符等
在Postman中，您可以使用内置的动态变量和编写脚本的方式来获取随机数、唯一ID、时间日期以及截取指定位数的字符。以下是具体的操作方法： 一、postman中获取随机数、唯一ID、时间日期（包括当前日期增减）截取指定位数的字符等 获取…...
【计算机网络】实验3：集线器和交换器的区别及交换器的自学习算法
实验 3：集线器和交换器的区别及交换器的自学习算法 一、 实验目的 加深对集线器和交换器的区别的理解。 了解交换器的自学习算法。 二、 实验环境 • Cisco Packet Tracer 模拟器 三、 实验内容 1、熟悉集线器和交换器的区别 (1) 第一步：构建网络…...
flink学习（14）—— 双流join
概述 Join:内连接 CoGroup：内连接，左连接，右连接 Interval Join：点对面 Join 1、Join 将有相同 Key 并且位于同一窗口中的两条流的元素进行关联。 2、Join 可以支持处理时间（processing time）和事件时…...
HTTP协议详解：从HTTP/1.0到HTTP/3的演变与优化
深入浅出：从头到尾全面解析HTTP协议 一、HTTP协议概述 1.1 HTTP协议简介 HTTP（HyperText Transfer Protocol，超文本传输协议）是互联网上应用最广泛的通信协议之一。它用于客户端与服务器之间的数据传输，尤其是在Web…...
张量并行和流水线并行在Transformer中的具体部位
目录 张量并行和流水线并行在Transformer中的具体部位 一、张量并行 二、流水线并行 张量并行和流水线并行在Transformer中的具体部位 张量并行和流水线并行是Transformer模型中用于提高训练效率的两种并行策略。它们分别作用于模型的不同部位，以下是对这两种并行的具体说…...
WEB开发： 丢掉包袱，拥抱ASP.NET CORE！
今天的 Web 开发可以说进入了一个全新的时代，前后端分离、云原生、微服务等等一系列现代技术架构应运而生。在这个背景下，作为开发者，你一定希望找到一个高效、灵活、易于扩展且具有良好性能的框架。那么，ASP.NET Core 显然是一个…...
【论文阅读】Federated learning backdoor attack detection with persistence diagram
目的：检测联邦学习环境下，上传上来的模型是不是恶意的。 1、将一个模型转换为|L|个PD,（其中|L|为层数） 如何将每一层转换成一个PD？ 为了评估第𝑗层的激活值，我们需要𝑐个输入来获…...
Gooxi Eagle Stream 2U双路通用服务器：性能强劲 灵活扩展 稳定易用
人工智能的高速发展开启了飞轮效应，实施数字化变革成为了企业的一道“抢答题”和“必答题”，而数据已成为现代企业的命脉。以HPC和AI为代表的新业务就像节节攀高的树梢，象征着业务创新和企业成长。但在树梢之下，真正让企业保持成长…...
【计算机网络】实验2：总线型以太网的特性
实验 2：总线型以太网的特性 一、 实验目的 加深对MAC地址，IP地址，ARP协议的理解。 了解总线型以太网的特性（广播，竞争总线，冲突）。 二、 实验环境 • Cisco Packet Tracer 模拟器 三、 实…...
如何在Spark中使用gbdt模型分布式预测
这目录 1 训练gbdt模型2 第三方包python环境打包3 Spark中使用gbdt模型3.1 spark配置文件3.2 主函数main.py 4 spark任务提交 1 训练gbdt模型 我们可以基于lightgbm快速的训练一个gbdt模型，训练相对比较简单，只要把训练样本处理好，几行代码可…...
Qt-5.14.2 example
官方历程很丰富，modbus、串口、chart图表、3D、视频 共享方便使用 Building and Running an Example You can test that your Qt installation is successful by opening an existing example application project. To run an example application on an Android …...
virtualbox给Ubuntu22创建共享文件夹
1.在windows上的操作，创建共享文件夹Share 2.Ubuntu22上的操作，创建共享文件夹LinuxShare 3.在virtualbox虚拟机设置里，设置共享文件夹 共享文件夹路径：选择Windows系统中你需要共享的文件夹 共享文件夹名称：挂载至wi…...
GPT打字机效果—— fetchEventSouce进行sse流式请求
EventStream基本用法 与 WebSocket 不同的是，服务器发送事件是单向的。数据消息只能从服务端到发送到客户端（如用户的浏览器）。这使其成为不需要从客户端往服务器发送消息的情况下的最佳选择。 const evtSource new EventSource(“/api/v1/…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用： 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests：发送 …...