HTML5+CSS3海绵宝宝网站设计（2）

最新推荐文章于 2023-11-23 19:37:44 发布
VIP文章 最新推荐文章于 2023-11-23 19:37:44 发布
阅读量5.7k 收藏 101
点赞数 25
文章标签： html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65445097/article/details/127470437
版权

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

目录

一、作品简介

二、作品思路

三、代码实现

1.角色简介

2.精美图集

3.网站界面图片

一、作品简介

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

二、作品思路

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

三、代码实现

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

1.角色简介

<body>
		<div class="shortcut">
最低0.47元/天 解锁文章
异星球的小怪同志
关注
  • 25
    点赞
  • 踩
  • 101
    收藏
    觉得还不错? 一键收藏
  • 35
    评论
HTML5＋CSS3海绵宝宝网站设计（1）
weixin_65445097的博客
10-21 4297
HTML5＋CSS3海绵宝宝网站设计，一起来学习吧。
HTML学生个人网站作业设计：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
weixin_BJ050106的博客
03-07 4962
一、作品介绍 1.作品简介 ：html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。 2.作品编辑：作品下载后可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 3.知识应用：技术方面主要应用了大学生网页课程中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，
海绵宝宝网页设计
05-25
海绵宝宝网页设计
web期末作业设计网页：动漫网站设计——海绵宝宝(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业
m0_62153875的博客
04-06 5638
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
HTML5期末大作业：海绵宝宝相关人物介绍
coding加油站
07-11 2576
html5期末作业，html作业，海绵宝宝，派大星
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 6488
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
海绵宝宝的简单HTML与css页面设计
FR0528622的博客
03-21 1823
登 录</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">海绵宝宝
初学党关于html大作业：海绵宝宝网页制作
最新发布
weixin_55397866的博客
11-23 1206
个人实力有限，简单分享一下自己的作业，不喜勿喷，参考学习资料来自B站、CSDN。
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
海绵宝宝
02-18
海绵宝宝
HTML5+CSS3网站设计基础教程 源代码.7z
11-14
HTML5+CSS3网站设计基础教程 全套源代码，小白福音
HTML5+CSS3网页设计模板(30例)zip
03-15
HTML5+CSS3网页设计模板(30例),可供学习设计参考。
HTML5+CSS3网站设计基础教程_动手实践源代码
11-09
HTML5+CSS3网站设计基础教程_动手实践源代码 chapter01 到 chapter10
HTML5+CSS3网站设计基础教程 源代码.rar
05-15
HTML5+CSS网页设计基础教程，传智播客书本中的源代码和练习教程，掌握web开发和设计过程，提高掌握综合能力。
静态网页设计期末课程设计HTML5+css3(初级)
03-09
资源名称:静态网页设计期末课程设计 使用/学习目标：完成期末课设 应用场景：HTM+css相互结合，完美搭建一个静态的网页 特点：使用简单 适用人群：学习静态网页之后的初学者 使用/学习说明：在学习的过程中要结合...
html画海绵宝宝css3,CSS3 海绵宝宝
weixin_29698641的博客
06-28 1407
CSS语言：CSSSCSS确定body {background: #F9ED39;zoom: .5;}.rosto {position: absolute;top: 30%;left: 50%;margin-left: -200px;}.olho {height: 200px;width: 200px;background: #FFF;border-radius: 100%;border: 6px...
python画海绵宝宝_活动招募 | 海绵宝宝主题生日会，一起分享快乐吧!
weixin_39644377的博客
11-11 374
海绵宝宝主题生日会- 活动招募 -AREUREADY喽！我是海绵宝宝，我家住在太平洋比基尼海滩的比奇堡贝壳街124号的菠萝屋邀请你们11月14日来参加我的生日会！我在生日会上准备了很多的惊喜哦！让我来悄悄透露一点点吧~一起抓水母吧水中捞“月”海绵宝宝和派大星最喜欢玩的游戏就是去抓水母啦！我们虽然抓不了水母，但是可以用另一种方式感受“抓水母”的快乐呀，家长用长筷子，宝贝用正常筷子，一起试...
海绵宝宝HTML代码
qq_65678218的博客
05-24 1017
title>海绵宝宝</title>-- 脸上的洞 -->-- 眼睫毛 -->-- 左脸颊 -->-- 右脸颊 -->-- 左嘴角 -->-- 右嘴角 -->/* 脸上的洞 */
HTML5+CSS3网站设计基础教程
11-01
HTML5+CSS3网站设计基础教程是一本介绍如何使用HTML5和CSS3来设计网站的教材。HTML5是一种用于创建网页的标准语言，而CSS3则是一种用于控制网页样式和布局的语言。这本教材主要包括以下内容： 1. HTML5和CSS3的基础知识和语法规则； 2. 如何使用HTML5创建网页结构，包括文本、图像、链接等； 3. 如何使用CSS3控制网页的样式和布局，包括颜色、字体、背景、边框、盒模型等； 4. 如何使用CSS3实现响应式设计，使网页能够适应不同的设备和屏幕尺寸； 5. 如何使用CSS3实现动画和过渡效果，增强网页的交互性和视觉效果。 通过学习这本教材，读者可以掌握HTML5和CSS3的基础知识和技能，能够独立设计和开发简单的网站。同时，这本教材也为读者进一步学习和探索网站设计和开发提供了基础和启示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值