HTML静态网页成品作业(HTML+CSS)——动漫海贼王介绍网页(1个页面)

news2024/11/16 0:42:56

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<header class="logo ">
				<img src="./images/logo.png" alt="">
			</header>
			<!-- 展示图片 -->
			<div class="show ">
				<img src="./images/banner.jpeg" alt="">
			</div>
			<!-- 前言 -->
			<div class="content ">
				<h2>简介</h2>
				<div class="title">
					<p>
						拥有财富、名声、权力,这世界上的一切的男人 “海贼王”哥尔·D·罗杰,在被行刑受死之前说了一句话,让全世界的人都涌向了大海。“想要我的宝藏吗?如果想要的话,那就到海上去找吧,我全部都放在那里。”,世界开始迎接“大海贼时代”的来临 
					</p>
					<p>
						时值“大海贼时代”,为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”,无数海贼扬起旗帜,互相争斗。有一个梦想成为海贼王的少年叫路飞,他因误食“恶魔果实”而成为了橡皮人,在获得超人能力的同时付出了一辈子无法游泳的代价。十年后,路飞为实现与因救他而断臂的香克斯的约定而出海,他在旅途中不断寻找志同道合的伙伴,开始了以成为海贼王为目标的冒险旅程。
					</p>
					<p>
						<img src="./images/a1.png" alt="">
					</p>
				</div>
				<h2>视频</h2>
				<div class="title">
					<p>
						<video src="./video/1.mp4" controls width="100%"></video>
					</p>
				</div>
			</div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

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

相关文章

VSCode 报错 之 运行 js 文件报错 ReferenceError: document is not defined

1. 背景 持续学习ing 2. 遇到的问题 在VSCode 右键 code runner js 文件报错 ReferenceError: document is not defined eg&#xff1a; // 为每个按钮添加点击事件监听器 document.querySelectorAll(button).forEach(function (button) {button.addEventListener(click, f…

全面盘点多模态融合算法及应用场景

关注作者&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕博&#xff0c;复旦机器人智能实验室成员&#xff0c;阿里云认证的资深架构师&#xff0c;项目管理专业人士&#xff0c;上亿营收AI产品研发负责人 多…

AI 绘图要如何入门?有哪些好用的软件推荐?(附工具+教程+变现模式)

1.Ai绘画如何入门 不需要把Ai绘画想的很复杂 抛去复杂的应用 使用现成简单的工具 只需要学会提示词 描述你想要的画面即可 提示词 不需要太复杂&#xff0c;也不能太简单&#xff0c;太简单依赖于ai的基本样式&#xff0c;关键是要抓住你想要的核心描述 AI不太擅长理解人类的…

Flask和Django的对比

文章目录 1. 简介FlaskDjango 2. 安装和创建项目FlaskDjango 3. URL路由FlaskDjango 4. 数据库支持FlaskDjango 5. 管理后台FlaskDjango 6. 总结 Flask和Django都是Python Web框架&#xff0c;它们在开发Web应用程序时都能提供强大的功能。本文将对这两个框架进行对比&#xff…

PPT 隐藏开启对象图层

目录预览 一、问题描述二、解决方案三、参考链接 一、问题描述 制作PPT的时候&#xff0c;有时候需要在一张PPT放置多个依次出现的内容&#xff0c;然后设置对应的动画&#xff0c;要是需要对某个内容进行修改的话&#xff0c;就会很不方便&#xff0c;这个时候就需要使用&…

微信小程序上架,AI类目审核(AI问答、AI绘画、AI换脸)

小程序对于生成式AI类目的产品上架审核较为严格&#xff0c;这也是近两年新增了几个类目&#xff0c;一旦小程序中涉及生成式AI相关的内容&#xff0c;如果你选择相应类目&#xff0c;但审核被划归为这一类&#xff0c;都需要准备此类目的审核&#xff0c;才能正常上架。 如果…

淘宝API探秘:一键获取店铺所有商品的魔法之旅

在数字时代的今天&#xff0c;数据已经成为了商业世界中的魔法石。而对于淘宝店主或者那些想要深入探索淘宝数据的人来说&#xff0c;淘宝API就像是打开阿里巴巴宝藏库的钥匙。今天&#xff0c;我们就来一起探索如何使用淘宝API&#xff0c;特别是如何获取店铺所有商品的接口&a…

倩女幽魂手游攻略:新人入坑必看指南!

《倩女幽魂》是一款经典的MMORPG游戏&#xff0c;凭借其丰富的剧情、精美的画面和多样的玩法&#xff0c;吸引了众多玩家。在游戏中&#xff0c;提升角色等级和战斗力是每个玩家的核心目标。本文将详细介绍如何在游戏中快速提升角色等级、增强实力&#xff0c;并提供一些实用的…

MT2076 小码哥处理订单

思路&#xff1a; 使用二分&#xff1a;题目中隐含条件&#xff1a;如果不满足&#xff0c;需要找到第一个不满足的订单。 二分法需要满足单调性or有一个界线使前后两部分性质相反。这里的”界线“为&#xff1a;是否满足条件。假设第i天无法满足&#xff0c;则后面的所有天都…

【跟着例子学MySQL】SQL进阶 – 视图、事务和变量

文章目录 前言回顾视图事务用户变量未完待续 前言 举例子&#xff0c;是最简单有效的学习方法。本系列文章以一个贯穿始终的场景&#xff0c;结合多个实例讲解MySQL的基本用法。 ❔ 为什么要写这个系列&#xff1f; 模仿是最好的老师&#xff0c;实践是检验成果的方法。本系列…

OWASP top10--SQL注入(四、sqlmap安装及使用)

目录 sqlmap工具安装&#xff1a; 工具说明&#xff1a; 主要功能特性包括&#xff1a; 基本使用示例&#xff1a; 先下载python2.7.9版本 sqlmap运行 sqlmap工具使用 -u -r –-levelLEVEL扫描深度级别 --riskRISK 执行测试的风险 -threads 线程数 -batch-smart智能…

【源码】多语言H5聊天室/thinkphp多国语言即时通讯/H5聊天室源码/在线聊天/全开源

多语言聊天室系统&#xff0c;可当即时通讯用&#xff0c;系统默认无需注册即可进入群聊天&#xff0c;全开源 【海外聊天室】多语言H5聊天室/thinkphp多国语言即时通讯/H5聊天室源码/在线聊天/全开源 - 吾爱资源网

Java集合—Set(Collection子接口)及其子类(HashSet、LinkedHashSet)包括HashMap源码分析

Set接口是 Collection接口的子接口。 1、无序&#xff0c;即添加元素和去除元素的顺序不一致。 但是每次取出的顺序是一致的。 2、不允许重复元素&#xff0c;可以有null&#xff0c;但只能有一个。 3、实现类很多&#xff0c;主要介绍HashSet、LinkedHashSet 和 TreeSet。 常用…

四、.Net8对接Ollama实现文字翻译(.Net8+SemanticKernel+Ollama)本地运行自己的大模型

.Net8SemanticKernelOllama 一、Semantic Kernel官方定义SK能做什么&#xff1f; 二、基本使用1、普通对话2、使用插件实现文本翻译功能 三、IChatCompletionService、ITextGenerationService、ITextEmbeddingGenerationService 很多情况都有这样的需求&#xff0c;使用自有系统…

PS系统教学02

多个图片同时进行打开 在素材库里面选中两张图片&#xff0c;直接拖进PS软件中&#xff0c;此时会显示其中一张。当按下回车键会显示另一张。 当图层过多&#xff0c;需要进行选择&#xff0c;其中某一张图片&#xff0c;按住Ctrl键&#xff0c;进行选择点击&#xff0c;可以移…

Windows下切换不同版本的CUDA

在环境变量处将需要使用的CUDA版本的如图所框选的环境变量移到其他版本环境变量的前方即可 PS&#xff1a;改环境变量后重启命令行再查看版本~

【Jmeter】性能测试之压测脚本生成,也可以录制接口自动化测试场景

准备工作-10分中药录制HTTPS脚本&#xff0c;需配置证书 准备工作-10分中药 以https://www.baidu.com/这个地址为录制脚本的示例。 录制脚本前的准备工作当然是得先把Jmeter下载安装好、JDK环境配置好、打开Jmeter.bat&#xff0c;打开cmd&#xff0c;输入ipconfig&#xff0c;…

SpringMVC枚举类型字段处理

在日常的项目开发中经常会遇到一些取值范围固定的字段&#xff0c;例如性别、证件类型、会员等级等&#xff0c;此时我们可以利用枚举来最大程度减少字段的乱定义&#xff0c;统一管理枚举的值。 SpringMVC中对于枚举也有默认的处理策略&#xff1a; 对于RequestParam&#xf…

将金融文件转化为ASP.NET Core C#中的智能且安全的表单

在财务流程中&#xff0c;法律要求所有协议和合同均需有纸质副本。无论您使用的是移动数据采集前端、功能强大的文档查看器还是任何其他数据采集流程&#xff0c;最终结果都是经过数字签名的 PDF 或纸质副本。 在大流行期间&#xff0c;数字文档处理变得流行且必要。这些年来&…

高边坡监测常用的主要仪器设备

随着人类的发展&#xff0c;近几年由于人类生活生产的破坏&#xff0c;地球环境不断恶化。鉴于这一现象&#xff0c;监测行业也随之应运而生。常见的监测类型有&#xff1a;边坡监测&#xff0c;地灾监测&#xff0c;水库监测&#xff0c;大坝监测&#xff0c;矿山监测&#xf…