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.想要获取本文源码,点击前往吧

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

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

相关文章

【前端笔记】记录一个能优化Echarts Geo JSON大小的网站

前端在使用Echarts等可视化图表库会不可避免遇到的问题&#xff0c;渲染地图的数据太大。 而有那么一个网站能给予这个问题一个解决方案&#xff1a;链接在此 使用方法很简单&#xff0c;首先先进入网站&#xff0c;如果进入了会是这个页面&#xff1a; 接着&#xff0c;选择一…

HCIP的学习(25)

VLAN间通讯技术 使用多臂路由的方式 ​ 路由器的物理接口默认是不识别802.1Q标签的&#xff0c;所以&#xff0c;交换机连接路由器的接口在发送数据帧时&#xff0c;应该将标签剥离。----一般常使用Access接口配置。 单臂路由 ​ 所谓的单臂路由&#xff0c;实际上试讲路由器…

【主流分布式算法总结】

文章目录 分布式常见的问题常见的分布式算法Raft算法概念Raft的实现 ZAB算法Paxos算法 分布式常见的问题 分布式场景下困扰我们的3个核心问题&#xff08;CAP&#xff09;&#xff1a;一致性、可用性、分区容错性。 1、一致性&#xff08;Consistency&#xff09;&#xff1a;…

Docker是什么?使用场景作用及Docker的安装和启动详解

目录 Docker是什么&#xff1f; Docker的发展 Docker的安装 Docker使用 Docker的运行机制 第一个Docker容器 进入Docker容器 客户机访问容器 Docker是什么&#xff1f; Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker …

记录深度学习GPU配置,下载CUDA与cuDnn

目标下载: cuda 11.0.1_451.22 win10.exe cudnn-11.0-windows-x64-v8.0.2.39.zip cuda历史版本网址 CUDA Toolkit Archive | NVIDIA Developer 自己下载过11.0.1版本 点击下载local版本,本地安装,有2个多GB,很大,我不喜欢network版本,容易掉线 cuDnn https://developer.nvi…

设置AXI主寄存器切片和AXI数据FIFO

设置AXI主寄存器切片和AXI数据FIFO 打开MHS文件&#xff0c;并为每个AXI主机设置启用寄存器切片/启用数据FIFO。到 确定正确的设置&#xff0c;使用下表中的信息搜索MHS。 进行搜索时&#xff0c;将<intf_name>替换为相关的BUS_INTERFACE名称。 例如&#xff0c;BUS_INTE…

Docker部署SpringBoot项目(jar包+Mysql)

部署Java项目 项目准备准备Java项目镜像准备配置网络 部署项目细节展示 项目准备 准备Java项目 hmall项目是一个maven聚合项目&#xff0c;使用IDEA打开hmall项目&#xff0c;查看项目结构如图&#xff1a; 我们要部署的就是其中的hm-service&#xff0c;其中的配置文件采用…

还在使用Swagger吗?ApifoxHelper插件隆重登场

目录 前言 安装Apifox Idea插件安装 插件令牌配置 获取令牌 Idea配置令牌 快速上手 同步文档 查看文档 结语&#xff1a; 前言 最近发现一款特别好用的插件&#xff0c;帮助开发者快速生成接口文档。ApifoxHelper插件实现代码零侵入&#xff0c;只需要写上相应注释即可…

K8s种的service配置

什么是service 官方的解释是:   k8s中最小的管理单元是pod&#xff1b;而service是 将运行在一个或一组 Pod 上的网络应用程序公开为网络服务的方法;   Kubernetes 中 Service 的一个关键目标是让你无需修改现有应用以使用某种服务发现机制。 你可以在 Pod 集合中运行代码…

K-独立钻石(dfs),G-邪恶铭刻(贪心)

这两题&#xff0c;都是应该赛场上A出来的。 K.独立钻石 当时一直关注点在 I. Path Planning&#xff0c;没关注榜单&#xff0c;K,也能写&#xff0c;也就是dfs,从数据范围可以看出&#xff0c;直接暴力搜索。 代码 #include<bits/stdc.h> #define int long long #d…

读书短视频脚本:四川京之华锦信息技术公司

读书短视频脚本&#xff1a;打造引人入胜的文学世界 随着短视频平台的兴起&#xff0c;各类内容以更加直观、生动的方式呈现在观众面前。在这个信息爆炸的时代&#xff0c;如何将书籍的精华和魅力通过短视频这一新兴媒介传递给更多人&#xff0c;成为了一个值得探讨的话题。四…

C# 正则表达式使用小计

此文档用于记录平时使用正则表达式的心得&#xff0c;不定期更新 基础 实例 替换实例一 //这里匹配以 “( 开头,以 )” 结尾的字符串 private static Regex REGEX_ARG_CONTENT new Regex("""(.*?)""");//此方法用于在匹配到的结果前添加字符…

【教程】利用API接口添加本站同款【每日新闻早早报】-每天自动更新,不占用文章数量

本次分享的是给网站添加一个每日早报的文章&#xff0c;可以看到本站置顶上面还有一个日更的日报&#xff0c;这是利用ALAPI的接口完成的&#xff01;利用接口有利也有弊&#xff0c;因为每次用户访问网站的时候就会增加一次API接口请求&#xff0c;导致文章的请求会因为请求量…

【python】删除一个列表中的所有的1

删除所有的1 x [1, 1, 6, 3, 9, 4, 5, 1, 1, 2, 1, 9, 6, 4] 使用lambda函数和filter来过滤掉x中的1 filtered_x list(filter(lambda n: n ! 1, x)) 不是1的数字&#xff0c;存进x列表&#xff0c;filter用于插入元素到第二个位置 print(filtered_x) # 输出: [6, 3, 9, …

Discourse 编辑没有办法显示更多的 JS 错误

Priority/Severity: High Platform: 3.3.0.beta3-dev UI bugs Description: 昨天升级的时到最新版本的时候就发现有这个错误&#xff0c;是 JS 的错误。 发了一个帖子到官方的网站上&#xff0c;官方说可能是插件的问题。 但是我们实在是没有安装什么插件呀&#xff1f; 官方…

“一带一路”六国国际拳王冠军赛特克斯站新闻发布会顺利举行

实习记者&#xff1a;喀兰姆罕 5月24日&#xff0c;“一带一路”六国国际拳王冠军赛特克斯站新闻发布会在特克斯县阿克塔斯姑娘峰景区举行。这次拳王冠军赛事由新疆广播电视台、特克斯镇人民政府&#xff0c;特克斯县文化体育广播电视和旅游局主办&#xff0c;将于6月15日在特…

宿舍管理系统代码详解(操作界面)

目录 一、前端代码 1.样式展示 2.代码详解 <1>主页面列表部分 &#xff08;1&#xff09;template部分 &#xff08;2&#xff09;script部分 <2>新增页面 &#xff08;1&#xff09;template部分 &#xff08;2&#xff09;script部分 <3>修改页面…

NXP i.MX8系列平台开发讲解 - 3.13 Linux 之Audio子系统(二)

专栏文章目录传送门&#xff1a;返回专栏目录 目录 1. Linux ALSA 内核框架 2. Linux ALSA 代码分析 2.1 声卡驱动初始化 2.2 声卡创建注册 2.3 PCM设备创建 3. ALSA ASoC 3.1 Machine 3.2 Platform 3.3 Codec 上一章节&#xff0c;对于Linux Audio子系统有了大概的了解…

LabVIEW通过以太网控制PLC程序开发

在使用LabVIEW通过以太网控制PLC程序开发时&#xff0c;需要综合考虑硬件、软件和通信协议的协调工作。以下是详细步骤、注意事项、重点和难点分析&#xff0c;以及几种实现方式及其特点的概述。 实现步骤 确定硬件和软件环境&#xff1a; 确定PLC型号和品牌&#xff08;如西门…

WebGL技术在工程控制中的应用

WebGL技术在工程控制中的应用非常广泛&#xff0c;它利用了浏览器内的强大图形处理能力&#xff0c;可以为工程领域提供实时的三维可视化和交互功能。以下是WebGL在工程控制中的几个主要应用领域及其具体应用。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&…