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

news2024/12/24 2:43:55

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.想要获取本文源码,点击前往吧

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

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

相关文章

外卖小程序开发指南:从源码开始构建高效的外卖平台

今天&#xff0c;笔者将为您详细讲解如何从源码开始构建一个高效的外卖小程序&#xff0c;帮助您快速进入这一蓬勃发展的市场。 一、需求分析与设计 需求分析包括&#xff1a; 1.用户需求 2.市场需求 3.技术需求 二、前端开发 以下是开发步骤&#xff1a; -使用微信开发…

听说部门来了个00后测试开发,一顿操作给我整麻了

公司新来了个同事&#xff0c;听说大学是学的广告专业&#xff0c;因为喜欢IT行业就找了个培训班&#xff0c;后来在一家小公司实习半年&#xff0c;现在跳槽来我们公司。来了之后把现有项目的性能优化了一遍&#xff0c;服务器缩减一半&#xff0c;性能反而提升4倍&#xff01…

labelme的使用

创建虚拟环境 听说是要用这个3.6版本的python环境 conda create --namelabelme python3.6激活虚拟环境 activate labelme下载labelme pip install labelme #安装labelme组件启动labelme 在你打开文件的时候推荐还是自己先建立一个label.txt 把自己要分的类别放进去 label.…

【CSP CCF】202104-2 邻域均值

题目 过程 前缀和 定义 假定一个数组&#xff0c;前缀和就是该元素前所有元素和。也就是如果我们舌钉一个数组s为前缀和数组&#xff0c;那么s[3]就是我们原数组前三个元素之和。 优势 降低计算复杂度。 如果我们要求一段区间的和&#xff0c;那么我们用普通数组要从第一…

Linux驱动开发笔记(二) 基于字符设备驱动的I/O操作

文章目录 前言一、设备驱动的作用与本质1. 驱动的作用2. 有无操作系统的区别 二、内存管理单元MMU三、相关函数1. ioremap( )2. iounmap( )3. class_create( )4. class_destroy( ) 四、GPIO的基本知识1. GPIO的寄存器进行读写操作流程2. 引脚复用2. 定义GPIO寄存器物理地址 五、…

一个 Go 实现的跨平台 GUI 框架 Fyne

今天&#xff0c;推荐一个 Go 实现的 GUI 库 - fyne。 Go 官方也没有提供标准的 GUI 框架&#xff0c;在 Go 实现的几个 GUI 库中&#xff0c;Fyne 算是最出色的&#xff0c;它有着简洁的API、支持跨平台能力&#xff0c;且高度可扩展。这也就是说&#xff0c;Fyne 是可以开发…

如果直升机一直在空中悬停,24小时后能否绕行地球一圈?

直升机悬停在空中&#xff0c;似乎给了我们一种静止的错觉。但如果直升机一直保持这种状态&#xff0c;24小时后&#xff0c;它是否能够神奇地绕地球一圈&#xff1f; 地球自转&#xff1a;直升机悬停的无形锁链 问题的答案并非像表面上看起来那样简单。要解答这个问题&#…

Win10玩红警黑屏有声音的解决方法

Win10玩红警黑屏怎么解决&#xff1f;红色警戒&#xff0c;可以说是一款深受青少年朋友喜爱的网游&#xff0c;但是&#xff0c;当我们在使用win10电脑运行红色警戒的时候免不了会出现不兼容、权限不足等问题。相信玩过红警的小伙伴都有遇到过黑屏的问题&#xff0c;那该怎么解…

弱密码系统登录之后强制修改密码

在你登录的时候&#xff0c;获取到弱密码&#xff0c;然后将他存到vuex里面&#xff0c;在登录进去之后&#xff0c;index页面再去取&#xff0c;思路是这样的 一、vuex里面定义密码字段 我是直接在user.js里面写的 import { login, logout, getInfo } from /api/login impo…

SQLmap学习以及题解运用

1.简介 SQLmap是一款开源的SQL注入工具&#xff0c;用于检测和利用Web应用程序的SQL注入漏洞。SQLmap支持多种数据库管理系统&#xff0c;包括MySQL、Oracle、PostgreSQL、Microsoft SQL Server、SQLite等&#xff0c;并支持各种不同的操作系统和平台。 这里主要分为四大部分…

计网(部分在session学习章)

TCP/UDP TCP:面向连接,先三次握手建立连接,可靠传输。 UDP:无连接,不可靠,传递的快。 TCP可靠传输 1.分块编号传输; 2.校验和,校验首部和数据的检验和,检测数据在传输中的变化; 3.丢弃重复数据; 4.流量控制,TCP 利⽤滑动窗⼝实现流量控制。TCP的拥塞控制采⽤…

一年前的Java作业,模拟游戏玩家战斗

说明&#xff1a;一年前写的作业&#xff0c;感觉挺有意思的&#xff0c;将源码分享给大家。 刚开始看题也觉得很难&#xff0c;不过写着写着思路更加清晰&#xff0c;发现也没有想象中的那么难。 一、作业题目描述&#xff1a; 题目&#xff1a;模拟游戏玩家战斗 1.1 基础功…

台灯的功能作用有哪些?护眼台灯真的护眼吗?

现在的学生会长时间使用平板、手机、电脑等&#xff0c;这些设备的屏幕会产生一定的频闪和蓝光辐射&#xff0c;也就会影响视力健康&#xff0c;而护眼养眼也成了家长关注的问题&#xff0c;视力疲劳和眼部疾病不仅影响个体的生活质量&#xff0c;还可能导致长期的健康问题。当…

IPIDEA与您分享:代理IP究竟是如何保护用户隐私的?

在信息化、网络化的今天&#xff0c;互联网已成为人们生活中不可或缺的一部分。无论是日常沟通、学习工作&#xff0c;还是娱乐休闲&#xff0c;网络都扮演着举足轻重的角色。然而&#xff0c;随着网络活动的增加&#xff0c;网络安全问题也日益凸显&#xff0c;为了保护个人隐…

Mybatis源码剖析---第二讲

Mybatis源码剖析—第二讲 那我们在讲完了mappedstatement这个类&#xff0c;它的一个核心作用之后呢&#xff1f;那下面我有一个问题想问问各位。作为mappedstatement来讲&#xff0c;它封装的是一个select标签或者insert标签。但是呢&#xff0c;我们需要大家注意的是什么&am…

LeetCode --- 398周赛

题目列表 3151. 特殊数组 I 3152. 特殊数组 II 3153. 所有数对中数位不同之和 3154. 到达第 K 级台阶的方案数 一、特殊数组I 遍历数组&#xff0c;看相邻元素的奇偶性是否相同即可&#xff0c;代码如下 class Solution { public:bool isArraySpecial(vector<int>&…

LangChain - 为何我们选择 ClickHouse 作为 LangSmith 的动力

本文字数&#xff1a;4742&#xff1b;估计阅读时间&#xff1a;12 分钟 作者&#xff1a;Ankush Gola 审校&#xff1a;庄晓东&#xff08;魏庄&#xff09; 本文在公众号【ClickHouseInc】首发 “我们在使用 ClickHouse 方面有着良好的经历。它使我们能够将 LangSmith 扩展到…

centos7.9用docker运行一个nginx容器

首先你的linux 系统里面已经安装好了docker&#xff0c;docker的安装教程看这个 1&#xff0c;下载nginx镜像 有很多文章会把镜像下载说成是拉取镜像&#xff0c; 我觉得就是下载的意思啊&#xff0c;搞不懂为什么要说拉取&#xff1f; docker pull nginx 下载最新版 Nginx …

PostgreSQL基础(二):PostgreSQL的安装与配置

文章目录 PostgreSQL的安装与配置 一、PostgreSQL的安装 二、PostgreSQL的配置 1、远程连接配置

Springboot+Vue项目-基于Java+MySQL的酒店管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…