HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		
		
		
		
		<div class="box">
			<div class="header">
				<a href="index.html">网站首页</a>
				<a href="jianjie.html">作品简介</a>
				<a href="juese.html">角色介绍</a>
				<a href="tu.html">精美图片</a>
				<a href="shipin.html">精彩视频</a>
			</div>
			
			<div class="pic">
				<img src="./images/banner.jpg" alt="">		
			</div>
			
			<div class="main">
				<div class="main1">
					<p><img src="./images/1.jpeg" alt="" style="float: left;">
					<span style="display: inline-block;">海绵宝宝</span>
					<br>
						&nbsp;&nbsp;&nbsp;&nbsp;《海绵宝宝》(SpongeBob SquarePants)是一部由史蒂芬·海伦伯格原创,舍曼·科恩、沃特·杜赫、山姆·亨德森、保罗·蒂比特、沃尔特·道恩 [21] 等导演,汤姆·肯尼、比尔·法格巴克、罗杰·布帕斯等配音的美国喜剧动画,于1999717日在尼克国际儿童频道开播。<br>
						&nbsp;&nbsp;&nbsp;&nbsp;央视少儿频道从2006129日大年初一晚20:00开始播出。<br>
						&nbsp;&nbsp;&nbsp;&nbsp;《海绵宝宝》的故事情节主要围绕着主角海绵宝宝和他的好朋友派大星、邻居章鱼哥、上司蟹老板等生物展开,场景设定于太平洋海底,一座被称为比奇堡的城市。2005130日,该片荣获第32届安妮奖授予的“最佳TV动画制作”奖。<br>
						
						&nbsp;&nbsp;&nbsp;&nbsp;这部动画除了固定描绘的卡通场景与人物之外,也会穿插一些真实的物件或人物:例如曾出演《海滩游侠》与《霹雳游侠》的大卫·哈塞尔霍夫,以本人的身份出演了几集。但海绵宝宝卡通的内容基本上与海洋知识无关,甚至夸大到完全不合乎科学与常识,例如海底生火、海底冲澡等,剧集内容也会时不时的嘲笑精致艺术和章鱼哥的劳工权益想法。
						
					</p>
				</div>
				
				<div class="main2">
					<img src="./images/11.png" alt="">
					<img src="./images/22.png" alt="">
					<img src="./images/33.png" alt="">
					<img src="./images/44.png" alt="">
				</div>
			</div>
			
			<div class="footer">
				
				海绵宝宝
				
			</div>
		</div>
	</body>
</html>

五、源码获取

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++贪心算法(3)

整数区间 #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;int a[110][10]{0};for(int i0;i<n;i){cin>>a[i][1]>>a[i][2];}int cnt[110]{0};int mi99999;int mii-1;bool f[110]{false,false,false,false,false,false,false,…

mybatis-plus代码生成器【一看就会,复制即用】

环境 jdk 17、mysql 8、springboot 3.1.2 POM依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-core</artifactId><version>3.5.6</version></dependency> <!-- mybatis-plus代码生成依…

建筑施工突发事故应急处置vr安全培训平台

在不断发展的时代背景下&#xff0c;掌握必要的应急安全知识已成为我们生活中不可或缺的一部分。由央企携手我们华锐推出的3D线上应急宣教虚拟体验馆&#xff0c;标志着民众应急安全教育的全新里程碑&#xff0c;不仅突破了传统学习模式的局限&#xff0c;还让每个人都能在灵活…

深入了解时间处理:当前时间显示与格式化

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、显示当前时间 1. 导入时间模块 2. 使用time模块获取当前时间 3. 格式化当前…

Python爬虫入门到进阶:解锁网络数据的钥匙

Python爬虫入门到进阶&#xff1a;解锁网络数据的钥匙 一、Python爬虫基础1.1 爬虫基本概念1.2 Python爬虫必备库1.3 第一个爬虫示例 二、实战爬虫实例2.1 爬取天气数据2.2 高级技巧&#xff1a;异步爬虫 三、反爬机制与应对策略3.1 常见反爬机制3.2 应对策略 四、性能优化与安…

oracle 12c GI卸载流程

集群节点停止服务 [crsctl stop crs -f grid运行deinstall [rootprimary1 bin]# su - grid [gridprimary1 ~]$ cd $ORACLE_HOME/deinstall [gridprimary1 deinstall]$ ls bootstrap_files.lst bootstrap.pl deinstall deinstall.pl deinstall.xml jlib readme.txt …

前端canvas实现图片涂鸦(Vue2、Vue3都支持)

先看一下效果图吧 代码组成&#xff1a;画笔大小、颜色、工具按钮都是组件&#xff0c;通俗易懂&#xff0c;可以按照自己的需求调整。 主要代码App.vue <template><div class"page"><div class"main"><div id"canvas_panel&qu…

CR渲染噪点严重怎么办?常见噪点来源+排查方法

使用Corona渲染器进行渲染时&#xff0c;画面出现噪点是常见现象&#xff0c;尤其是在渲染初期。轻微的高频噪点通常是正常的&#xff0c;但如果经过多次渲染或长时间渲染后噪点依然明显&#xff0c;就可能意味着渲染设置或场景本身存在问题。虽然我们可以利用降噪功能模糊噪点…

电脑记事软件哪款安全?好用且安全的桌面记事工具

在快节奏的现代生活中&#xff0c;我们每天都要用电脑处理大量的工作。电脑不仅提升了工作效率&#xff0c;还成为了我们记录重要事项和灵感的得力助手。比如&#xff0c;在策划项目时&#xff0c;我会直接在电脑上列出要点和步骤&#xff1b;在开会时&#xff0c;我也会用电脑…

浅谈桌面数控铣床在中职数控专业教学中的运用

目前大多数中职院校的数控铣床实训教学均采用工业数控机床设备&#xff0c;基本存在实训耗材费用高、教学成本高、实操危险性大、学生独立操作时间少,教学效率不高,教学质量也因设备数量原因较难提高等问题&#xff0c;桌面数控铣床具有成本低&#xff0c;体积小,操作灵活结构简…

Unity3D插件开发教程(二):制作批处理工具

Unity3D插件开发教程&#xff08;二&#xff09;&#xff1a;制作批处理工具 文章来源&#xff1a;Unity3D插件开发教程&#xff08;二&#xff09;&#xff1a;制作批处理工具 - 知乎 (zhihu.com) 声明&#xff1a; 题图来自于Gratisography | Free High Resolution Pictures…

STL源码刨析:序列式容器之list

目录 1.前言 2.list的节点定义和结构 3.list的迭代器定义和结构 4.list的定义和结构 5.list的内存管理 6.list的元素操作 前言 在刨析了vector容器的源码后&#xff0c;list容器相比与vector容器&#xff0c;其元素的插入和删除较快&#xff0c;不需要对原本容器中的元…

集合的交集、并集和差集运算

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 集合最常用的操作就是进行交集、并集、差集和对称差集运算。进行交集运算时使用“&”符号&#xff0c;进行并集运算时使用“&#xff5c;”符号&…

SQL数据库多层嵌套 json转sql建表语句,SQL数据库里数组里对象数据怎么创建

1. uniapp sqlite 一个数组包含对象嵌套对象通过主外键方式插入数据库&#xff1a; // 假设有一个对象数组&#xff0c;对象中包含嵌套对象 const objectsArray [{parentObject: {id: 1,name: Parent 1,// 其他父对象属性},childObject: {id: 11,parentId: 1,name: Child 1 o…

vue中的$nextTick和过渡与动画

一.vue中的$nextTick 简述与用法&#xff1a;这是一个生命周期钩子 1.语法&#xff1a;this.$nextTick(回调函数) 2.作用&#xff1a;在下一次DOM更新结束后执行其指定的回调 3.什么时候用&#xff1a;当修改数据后&#xff0c;要基于更新后的新dom进行某些操作时&#xff0c;…

精酿啤酒:品质与口感在不同消费人群中的差异与共性

在啤酒市场中&#xff0c;不同消费人群对品质与口感的喜好存在一定的差异。然而&#xff0c;Fendi club啤酒凭借其卓着的品质和与众不同的口感&#xff0c;在不同消费人群中都展现出一定的共性。 从性别差异来看&#xff0c;男性消费者通常更注重啤酒的品质和口感&#xff0c;而…

Llama 3 模型家族构建安全可信赖企业级AI应用之使用 Llama Guard 保护大模型对话 (八)

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

机器学习(七) ----------聚类(K-means)

目录 1 核心思想 2 K-means算法 2.1 算法概述 2.2 算法步骤 2.3 数学原理 2.4 ‘肘’方法确定K值 2.4.1 原理 2.4.2 步骤 2.4.3 代码实现 2.5 聚类评估方法 2.5.1 SC轮廓系数&#xff08;Silhouette Coefficient&#xff09; 计算方法 解读 注意事项 2.5.2 Cal…

Windows UWP ContentDialog去掉阴影(全透明)的实现

一、前言 在WIndows开发中&#xff0c;使用UWP&#xff08;Universal WIndows&#xff09;项目开发过程中&#xff0c;使用ContentDialog 的过程中&#xff0c;我们可能并不满足现有的样式&#xff0c;这时就需要自定义样式。笔者在自定义样式过程中&#xff0c;遇到了一个难题…

数据库多表查询

多表查询&#xff1a; SELECT *FROM stu_table,class WHERE stu_table.c_idclass.c_id; 多表查询——内连接 查询两张表交集部分。 隐式内连接&#xff1a; #查询学生姓名&#xff0c;和班级名称&#xff0c;隐式调用 SELECT stu_table.s_name,class.c_name FROM stu_table…