HTML5＋CSS3海绵宝宝网站设计（1）

已于 2023-06-17 18:05:36 修改
阅读量4.3k 收藏 61
点赞数 21
文章标签： css html5 前端 学习
于 2022-10-21 08:21:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65445097/article/details/127417863
版权

 嗨，欢迎来到异星球，我是小怪同志。这篇文章主要讲解HTML5＋CSS3制作海绵宝宝网站，请一起学习吧。

目录

一、作品简介

二、作品思路

三、代码实现（部分）

1.首页部分 

2. 作品介绍

3.网站界面图片 

一、作品简介

因为初学HTML5＋CSS3，学的知识还只是皮毛，因此这次的海绵宝宝网站有许多不足的地方，还请大家多多包涵。海绵宝宝网站主要讲了与海绵宝宝的简介，朋友，语录，图集等。

二、作品思路

海绵宝宝网站包括了七个网页，分别是：首页，作品介绍，角色简介，精彩图集，经典语录，个人注册，快速登录，网站的整体结构大方面的结构也就只是三个区域，分别是头部，中部，底部。详细的讲解就是首先是开头的快捷导航栏，其次是导航栏，导航栏主要就是表达网站有七个小页面，方便快速跳转到想要去的页面，接着就是banner设计，可以增加网站视觉效果，也可以更好的突出网站宣传区域，中间就是个整体的大框架，可以添加想要的图片文字等等一系列的效果，最后就是footer底部，这样就是一个完整的网站区域布局。

三、代码实现（部分）

话不多说，直接上部分代码。需要详细代码请私信我~后续还会继续更新的。

1.首页部分 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
	<style type="text/css">
		body{margin: 0px;padding: 0px;lis
最低0.47元/天 解锁文章
异星球的小怪同志
关注
  • 21
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 29
    评论
海绵宝宝网页设计
05-25
海绵宝宝网页设计
海绵宝宝HTML代码
qq_65678218的博客
05-24 1077
title>海绵宝宝</title>-- 脸上的洞 -->-- 眼睫毛 -->-- 左脸颊 -->-- 右脸颊 -->-- 左嘴角 -->-- 右嘴角 -->/* 脸上的洞 */
网页设计期末课程设计大作业 HTML、CSS 海绵宝宝动漫网页作业
qq_365392777
10-04 2466
????文章目录​​二、????网站介绍​​​​三、????网站效果​​​​▶️1.视频演示​​​​???? 2.图片演示​​​​四、???? 网站代码​​​​????HTML结构代码​​​​????CSS样式代码​​​​五、????更多源码​​二、????网站介绍????网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。????网站程序方面：计划采...
海绵宝宝 动漫主题网页设计 html源码
m0_37916936的博客
05-08 426
采用浮动布局 float dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。【网页成品】海绵宝宝五页HTML+CSS。
web期末作业设计网页：动漫网站设计——海绵宝宝(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业
m0_62153875的博客
04-06 6055
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
初学党关于html大作业：海绵宝宝网页制作
weixin_55397866的博客
11-23 1516
个人实力有限，简单分享一下自己的作业，不喜勿喷，参考学习资料来自B站、CSDN。
海绵宝宝的简单HTML与css页面设计
FR0528622的博客
03-21 1887
登 录</a></td><td class="left"> 请输入密码:</td><td class="left">请输入手机号:</td><li><a href="1.html">用户登录</a></li><li><a href="2.html">人物介绍</a></li><li><a href="3.html">经典语录</a></li><p><a href="3.html">海绵宝宝
HTML5+CSS3海绵宝宝网站设计（2）
weixin_65445097的博客
10-23 5813
HTML5＋CSS3海绵宝宝网站设计，欢迎大家一起交流学习。
HTML5+CSS3网站设计基础教程 源代码.7z
11-14
HTML5+CSS3网站设计基础教程 全套源代码，小白福音
HTML5+CSS3网页设计模板(30例)zip
03-15
HTML5+CSS3网页设计模板(30例),可供学习设计参考。
HTML5+CSS3网站设计基础教程_动手实践源代码
11-09
HTML5+CSS3网站设计基础教程_动手实践源代码 chapter01 到 chapter10
海绵宝宝
02-18
海绵宝宝
canvas简易绘图的实现（海绵宝宝篇）
12-30
最近在研究canvas，简单的用canvas绘制了一下卡通人物–海绵宝宝。 图片如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>canvas海绵宝宝</title> </head> <body> <canvas id=canvas width=1000 height=700 xss=removed></canvas> </body> [removed] var canvas = document.getElementById(
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML5+CSS3网站设计基础教程 源代码.rar
05-15
HTML5+CSS网页设计基础教程，传智播客书本中的源代码和练习教程，掌握web开发和设计过程，提高掌握综合能力。
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页设计制作(3个页面)
最新发布
weixin_42283461的博客
05-18 558
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页设计制作(3个页面)
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 6821
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
HTML学生个人网站作业设计：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
weixin_BJ050106的博客
03-07 5076
一、作品介绍 1.作品简介 ：html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。 2.作品编辑：作品下载后可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 3.知识应用：技术方面主要应用了大学生网页课程中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，
html期末作业网站设计海绵宝宝
12-28
根据提供的引用内容，你使用CSS+HTML搭建了一个属于自己的网站，展示了海绵宝宝动漫。你使用了HTML和HTML5的音频标签，并且使用了Hbuilder作为编辑网站的工具。下面是一个关于如何设计海绵宝宝的HTML期末作业网站的示例： ```html <!DOCTYPE html> <html> <head> <title>海绵宝宝动漫展示网页</title> <style> /* CSS样式 */ body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { text-align: center; color: #ff6600; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .image { text-align: center; margin-bottom: 20px; } .image img { max-width: 100%; height: auto; } .description { text-align: justify; line-height: 1.5; } .audio { text-align: center; margin-top: 20px; } </style> </head> <body> <div class="container"> <h1>海绵宝宝动漫展示网页</h1> <div class="image"> <img src="spongebob.jpg" alt="海绵宝宝"> </div> <div class="description"> <p>海绵宝宝是一部非常受欢迎的动漫片，讲述了海绵宝宝和他的朋友们在比基尼海滩的冒险故事。</p> <p>在这个网页中，你可以了解海绵宝宝的故事，观看海绵宝宝的图片，并且还可以听到海绵宝宝的主题曲。</p> </div> <div class="audio"> <audio controls> <source src="spongebob_theme.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </div> </body> </html> ``` 这个示例网页使用了CSS样式来设置背景颜色、字体、标题颜色等。网页中包含了海绵宝宝的图片和描述，并且还添加了海绵宝宝的主题曲，你可以通过控制音频播放器来播放主题曲。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 29
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值