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;选择一…

代码随想录算法训练营第四十三天|

518.零钱兑换II 典型的完全背包问题&#xff0c;但这里是求有多少种组合方式&#xff0c;所以递推公式变为 dp[j] dp[j - coins[i]]; 377. 组合总和 Ⅳ 也是完全背包问题&#xff0c;但是需要求排列而不是组合&#xff0c;所以需要先遍历背包容量&#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;其中的配置文件采用…

《一地霜白》读书笔记

1.3.6 街灯明灭&#xff0c;勾缀成行&#xff0c;为了生者与死者 “很多年过去了。回头看&#xff0c;沿着一排暗中的街灯&#xff0c;两三盏灭了&#xff0c;郁闷中有意外的欣喜&#xff1a;街灯明灭&#xff0c;勾缀成行&#xff0c;为了生者与死者。” 童年、青少年在人的…

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

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

K8s种的service配置

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

一个程序员的牢狱生涯(42)事件

星期一 事件 老郅安排我一个人在内班办公室等着,并没让我去女号子,我一个人来回踱着步,着急的等待着。 在老郅进入女号子后,我悄悄地踱着步走到里间办公室听。只听见老郅在询问着丽姐是怎么回事,丽姐有点着急地说道: “我发现杨x躺着,而且精神不好,就‘打博’(北方方言…

【Linux】使用 Telnet 测试 IP 和端口的通畅性及其他高级用法

路过了学校花店 荒野到海边 有一种浪漫的爱 是浪费时间 徘徊到繁华世界 才发现你背影 平凡得特别 绕过了城外边界 还是没告别 爱错过了太久 反而错得完美无缺 幸福兜了一个圈 想去的终点 就在原点 &#x1f3b5; 林宥嘉《兜圈》 前言 Telnet 是一种用于在…

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;成为了一个值得探讨的话题。四…

Android studio 拉取代码报错 提示 master has no tracked branch

本地分支没有与远程分支建立追踪关系&#xff1a;你可能需要在本地 master 分支与远程 master 分支之间建立追踪关系。你可以使用以下命令手动建立追踪关系&#xff1a; 使用如下命令 git branch --set-upstream-toorigin/master master提示 branch ‘master’ set up to tra…

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; 官方…