HTML5+CSS3海绵宝宝网站设计（2）
2024-05-22 07:36:58
嗨，欢迎来到异星球，我是小怪同志。这篇文章主要讲解HTML5＋CSS3制作海绵宝宝网站，请一起学习吧。
目录
一、作品简介
二、作品思路
三、代码实现
1.角色简介
2.精美图集
3.网站界面图片
一、作品简介
因为初学HTML5＋CSS3，学的知识还只是皮毛，因此这次的海绵宝宝网站有许多不足的地方，还请大家多多包涵。海绵宝宝网站主要讲了与海绵宝宝的简介，朋友，语录，图集等。
二、作品思路
海绵宝宝网站包括了七个网页，分别是：首页，作品介绍，角色简介，精彩图集，经典语录，个人注册，快速登录，网站的整体结构大方面的结构也就只是三个区域，分别是头部，中部，底部。详细的讲解就是首先是开头的快捷导航栏，其次是导航栏，导航栏主要就是表达网站有七个小页面，方便快速跳转到想要去的页面，接着就是banner设计，可以增加网站视觉效果，也可以更好的突出网站宣传区域，中间就是个整体的大框架，可以添加想要的图片文字等等一系列的效果，最后就是footer底部，这样就是一个完整的网站区域布局。
三、代码实现
话不多说，直接上部分代码。需要详细代码请私信我~后续还会继续更新的。
1.角色简介
<body><div class="shortcut"><div class="w"><div class="fl"><ul><li>Alles klar,Kinder? </li><li> 海绵宝宝欢迎您！</li></ul></div><div class="fr"><ul><li>访问人数</li><li></li><li>注册人数</li><li></li><li>关于我们</li><li></li><li>了解更多</li></ul> </div></div></div><!--nav导航制作--><div class="nav"><div class="nav1"><ul><li><a href="首页.html" target="_blank">首页</a></li><li> <a href="作品介绍.html" target="_blank">作品介绍</a> </li><li> <a href="角色简介.html" target="_blank">角色简介</a> </li><li> <a href="精彩图集.html" target="_blank">精彩图集</a> </li><li> <a href="经典语录.html" target="_blank">经典语录 </a> </li><li> <a href="快速登录.html" target="_blank">快速登录</a> </li><li> <a href="个人注册.html" target="_blank">个人注册</a> </li></ul></div></div><div class="header"><img src="data:images/banner.jpg" alt="1"></div><div class="center" id="overflowtest"><div class="big"><div class="c1"><img src="data:images/hmbb.png" alt="1" width="200px" height="200px"></div><div class="c2"><h3>海绵宝宝</h3> <p>《海绵宝宝》的同名角色及主角</p><p>黄色长方形海绵,其身体构成如同清洁用海绵。生日是1986年7月14日。</p><p>拥有两只左手,各四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。</p><p>具有不死之身,即使身体如何被破坏皆可恢复原状。虽然有正常进食,但纯滤食海水也能继续存活。</p><p>体力薄弱,且所谓的哑铃其实是绒毛玩具。</p></div></div><div class="big"><div class="c1"><img src="data:images/pdx.png" alt="2" width="200px" height="200px"></div><div class="c2"><h3>派大星</h3><p>粉红色的海星。</p><p>智商极低，头脑与身体仅使用插头连结。</p><p>做什么事都会搞砸，但开船却异常厉害，居住乌龟壳底下。</p><p>懒惰并相当孩子气，时常在无意间呆滞的流口水，且讨厌洗澡、也不爱洗手、偏爱睡觉。 兴趣是看电视。</p><p>跟海绵宝宝的交情最好；并时常鼓励海绵宝宝做出一些危险行动，往往让彼此陷入困境。</p></div></div><div class="big"><div class="c1"><img src="data:images/zyg.png" alt="3" width="200px" height="200px"></div><div class="c2"> <h3>章鱼哥</h3><p>大鼻子章鱼，容易愤怒且势利眼，相当自恋，自以为拥有艺术才能。</p><p>目前是光头，但曾有过黄色长卷发。</p><p>居住在一栋仿复活节岛人像的房屋。</p><p>担任"蟹堡王餐厅"的柜台人员，但并不喜欢自己的工作，喜欢吹奏竖笛及采用多种风格画自画像。</p><p>讨厌海绵宝宝和派大星，偶尔会对海绵宝宝表达认同，但通常是对他自己有利的时候。</p></div></div><div class="big"><div class="c1"><img src="data:images/xlb.png" alt="4" width="200px" height="200px"></div><div class="c2"> <h3>蟹老板</h3><p>红色螃蟹，本名蟹阿金。只要发现能发短财的产品，就会忽视老本美味蟹堡并转换目标。</p><p>视金钱如生命，经常为了一块钱而去冒生命危险，极为自私。</p><p>快餐店"蟹堡王餐厅的经营者，多次向员工宣导要有时间观念，因为"时间就是金钱"。</p><p>营业时间常在办公室看报纸、数钱、洗金钱浴等，喜欢看讽刺戏剧，和痞老板是死对头。</p></div></div><div class="big"><div class="c1"><img src="data:images/plb.png" alt="5" width="200px" height="200px"></div><div class="c2"><h3>痞老板</h3><p>蟹老板的死对头,《海绵宝宝》的主要反派角色。</p><p>由1%的邪恶和99%的热毒气组成。</p><p>快餐店“海之霸餐厅”的老板。只有一只眼睛，时常刺痛（因为他忘记眨眼）。</p><p>他的妻子是电脑，名叫凯伦。</p><p>为了让自己的餐厅生意兴隆，一直偷取蟹堡王著名料理“美味蟹堡”的祖传秘方，却从未成功，最大的希望是统治全世界。</p></div></div><div class="big"><div class="c1"><img src="data:images/sd.png" alt="6" width="200px" height="200px"></div><div class="c2"><h3>珊迪</h3><p>来自德克萨斯州的雌性松鼠,身兼科学家、探险家和发明家。</p><p>热爱运动（尤其空手道和滑沙）和科学,也是牛仔竞技的冠军。</p><p>由于松鼠属於陆地生物,需要呼吸空气,在海底须穿著太空衣和头盔。</p><p>平常居住在大型圆形强化玻璃防护罩下的海底树屋,内部环境与陆地相同,且可以季节轮替;若海洋生物入内须配戴装水的头盔。</p></div></div><div class="big"><div class="c1"><img src="data:images/zz.png" alt="7" width="200px" height="200px"></div><div class="c2"><h3>珍珍</h3><p>珍珍是蟹老板的鲸鱼女儿,和蟹老板一起住在比奇堡的船锚屋,喜欢购物,喜欢大把大把的消费,好强爱美,最受不了的是爸爸的小气。</p><p>年龄正值青春期,常身穿粉红色短T短裙和白袜子。</p></div></div><div class="big"><div class="c1"><img src="data:images/kl.png" alt="8" width="200px" height="200px"></div><div class="c2"><h3>凯伦</h3><p>痞老板的 电脑老婆,拥有256G的内存,小时候是 计算器,还没嫁给痞老板时是保全系统。</p><p>经常帮助 痞老板想计策,来帮助痞老板偷走美味蟹黄堡秘方——也就是痞老板的一个理想,但是从来没有成功过。</p><p>虽然计划失败时, 痞老板总是对她大吵大骂,但她从来没有埋怨过,有时候甚至很温柔,与痞老板的关系还不错。</p></div></div><div class="big"><div class="c1"><img src="data:images/xw.png" alt="9" width="200px" height="200px"></div><div class="c2"><h3>小窝</h3><p>海绵宝宝的宠物蜗牛,拥有理解自然语言并进行沟通的能力。</p><p>虽然是蜗牛,但偶尔会穿布鞋,所以底部是有藏脚的。</p><p>内壳藏有海绵宝宝的一些东西小蜗的照片、吃饭用时钟及黏液。</p><p>外壳附有降落伞机制。</p><p>若是底部卡了东西会因不适而发飙咬人。讨厌洗澡。在梦境可以使用自然语言交谈,智商甚至超过海绵宝宝,是一名哲学家。</p></div></div></div><div class="footer"><h4>感谢您的来访~</h4></div></body>
</html>2.精美图集
<body><div class="shortcut"><div class="w"><div class="fl"><ul><li>Alles klar,Kinder? </li><li> 海绵宝宝欢迎您！</li></ul></div><div class="fr"><ul><li>访问人数</li><li></li><li>注册人数</li><li></li><li>关于我们</li><li></li><li>了解更多</li></ul> </div></div></div><!--nav导航制作--><div class="nav"><div class="nav1"><ul><li><a href="首页.html" target="_blank">首页</a></li><li> <a href="作品介绍.html" target="_blank">作品介绍</a> </li><li> <a href="角色简介.html" target="_blank">角色简介</a> </li><li> <a href="精彩图集.html" target="_blank">精彩图集</a> </li><li> <a href="经典语录.html" target="_blank">经典语录 </a> </li><li> <a href="快速登录.html" target="_blank">快速登录</a> </li><li> <a href="个人注册.html" target="_blank">个人注册</a> </li></ul></div></div><div class="header"><img src="data:images/102.jpg" alt="1"></div><div class="center"><div class="big"><img src="data:images/104.jpg" alt="1"><img src="data:images/105.jpg" alt="2"><img src="data:images/106.jpg" alt="3"><img src="data:images/107.jpg" alt="4"><img src="data:images/86.jpg" alt="5"><img src="data:images/54.jpg" alt="6"><img src="data:images/68.jpg" alt="7"><img src="data:images/41.jpg" alt="8"><img src="data:images/29.jpg" alt="9"><img src="data:images/58.jpg" alt="10"><img src="data:images/60.jpg" alt="11"><img src="data:images/61.jpg" alt="12"></div></div><div class="footer"><h3>感谢您的来访~</h3></div></body>
</html>
3.网站界面图片
HTML5+CSS3海绵宝宝网站设计（2）相关推荐
- HTML5+CSS3海绵宝宝网站设计（3）
嗨,欢迎来到异星球,我是小怪同志.这篇文章主要讲解HTML5+CSS3制作海绵宝宝网站,请一起学习吧.如果你看到HMTL5+CSS3海绵宝宝网站设计(3)恭喜你全部学完了这次网站的设计. 目录 一.作 ...
- HTML5＋CSS3海绵宝宝网站设计（1）
嗨,欢迎来到异星球,我是小怪同志.这篇文章主要讲解HTML5+CSS3制作海绵宝宝网站,请一起学习吧. 目录 一.作品简介 二.作品思路 三.代码实现(部分) 1.首页部分 2. 作品介绍 3.网站界 ...
- HTML5 网站大观：12个优秀的 HTML5 黑色风格网站设计
本期 HTML5 网站大观向大家分享12个精美的 HTML5 黑色风格网站设计作品欣赏.作为下一代网页语言,HTML5 加入众多的语义化标签,例如 video.audio.section.articl ...
- 基于HTML5+CSS3的网页设计与实现
摘要:随着互联网技术的不断发展,电子设备的广泛应用和高普及度,网页作为互联网信息的重要载体,其网页设计技术将面临新的挑战.HTML和CSS作为网页前端开发所运用的主要核心技术,如何灵活运用,使得web ...
- 跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程 编辑 锁定 讨论 上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
- 349套HTML5+CSS3各行各业网站模板免费下载
场景 349套HTML5+CSS3各行各业网站模板. Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的, ...
- java计算机毕业设计HTML5“守护萌宠”网站设计与实现MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计HTML5"守护萌宠"网站设计与实现MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计HTML5"守护萌宠"网站设计与 ...
- 免费html5 css3大学生网页设计期末作业 网页制作作业成品
html5 css3大学生网页设计期末作业 网页制作作业成品 布局技术:html5 css3 页面个数:6个 网页元素:图文 超链接 表单 效果图: 目录如下: <!DOCTYPE html&g ...
- JAVA毕业设计HTML5“守护萌宠”网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计HTML5"守护萌宠"网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计HTML5"守护萌宠"网站设计与实现计算机源码 ...
最新文章
- weblogic 部署后出现Error 404–Not Found
- split | notes in java
- php可选缓存APC
- pythonlocust使用方法_使用python的locust库进行性能测试
- 作者：黄媛洁（1992-），女，食品安全大数据技术北京市重点实验室、北京工商大学计算机与信息工程学院硕士生...
- SUPERSET使用笔记
- Docker本地私有仓库的建立
- 提出建议Do you want to..._44
- it 脑裂_脑裂官方版下载
- Spark-on-YARN
- 使用FFMPEG类库分离出多媒体文件中的音频码流
- matlab选择语句函数,Matlab基本语句和基本函数
- [2018.03.29 T2] 公交旅行
- 利用WinDriver开发PCI设备驱动程序
- 【连载】draft伦理
- 香橙派 lite 2 使用OV5640
- Web前端开发技术课程大作业_ 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面_
- python学习笔记（二十九）网络通信之模仿qq的在线聊天工具
- Linux-002-常用命令02
- CSDN的会员等级和推荐卡规则