HTML5+CSS3海绵宝宝网站设计(2)

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

目录

一、作品简介

二、作品思路

三、代码实现

1.角色简介

2.精美图集

3.网站界面图片


一、作品简介

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

二、作品思路

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

三、代码实现

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

1.角色简介


		
  • Alles klar,Kinder? 
  •  海绵宝宝欢迎您!
  • 访问人数
  • 注册人数
  • 关于我们
  • 了解更多
1
1

海绵宝宝

《海绵宝宝》的同名角色及主角

黄色长方形海绵,其身体构成如同清洁用海绵。生日是1986年7月14日。

拥有两只左手,各四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。

具有不死之身,即使身体如何被破坏皆可恢复原状。虽然有正常进食,但纯滤食海水也能继续存活。

体力薄弱,且所谓的哑铃其实是绒毛玩具。

2

派大星

粉红色的海星。

智商极低,头脑与身体仅使用插头连结。

做什么事都会搞砸,但开船却异常厉害,居住乌龟壳底下。

懒惰并相当孩子气,时常在无意间呆滞的流口水,且讨厌洗澡、也不爱洗手、偏爱睡觉。 兴趣是看电视。

跟海绵宝宝的交情最好;并时常鼓励海绵宝宝做出一些危险行动,往往让彼此陷入困境。

3

章鱼哥

大鼻子章鱼,容易愤怒且势利眼,相当自恋,自以为拥有艺术才能。

目前是光头,但曾有过黄色长卷发。

居住在一栋仿复活节岛人像的房屋。

担任"蟹堡王餐厅"的柜台人员,但并不喜欢自己的工作,喜欢吹奏竖笛及采用多种风格画自画像。

讨厌海绵宝宝和派大星,偶尔会对海绵宝宝表达认同,但通常是对他自己有利的时候。

4

蟹老板

红色螃蟹,本名蟹阿金。只要发现能发短财的产品,就会忽视老本美味蟹堡并转换目标。

视金钱如生命,经常为了一块钱而去冒生命危险,极为自私。

快餐店"蟹堡王餐厅的经营者,多次向员工宣导要有时间观念,因为"时间就是金钱"。

营业时间常在办公室看报纸、数钱、洗金钱浴等,喜欢看讽刺戏剧,和痞老板是死对头。

5

痞老板

蟹老板的死对头,《海绵宝宝》的主要反派角色。

由1%的邪恶和99%的热毒气组成。

快餐店“海之霸餐厅”的老板。只有一只眼睛,时常刺痛(因为他忘记眨眼)。

他的妻子是电脑,名叫凯伦。

为了让自己的餐厅生意兴隆,一直偷取蟹堡王著名料理“美味蟹堡”的祖传秘方,却从未成功,最大的希望是统治全世界。

6

珊迪

来自德克萨斯州的雌性松鼠,身兼科学家、探险家和发明家。

热爱运动(尤其空手道和滑沙)和科学,也是牛仔竞技的冠军。

由于松鼠属於陆地生物,需要呼吸空气,在海底须穿著太空衣和头盔。

平常居住在大型圆形强化玻璃防护罩下的海底树屋,内部环境与陆地相同,且可以季节轮替;若海洋生物入内须配戴装水的头盔。

7

珍珍

珍珍是蟹老板的鲸鱼女儿,和蟹老板一起住在比奇堡的船锚屋,喜欢购物,喜欢大把大把的消费,好强爱美,最受不了的是爸爸的小气。

年龄正值青春期,常身穿粉红色短T短裙和白袜子。

8

凯伦

痞老板的 电脑老婆,拥有256G的内存,小时候是 计算器,还没嫁给痞老板时是保全系统。

经常帮助 痞老板想计策,来帮助痞老板偷走美味蟹黄堡秘方——也就是痞老板的一个理想,但是从来没有成功过。

虽然计划失败时, 痞老板总是对她大吵大骂,但她从来没有埋怨过,有时候甚至很温柔,与痞老板的关系还不错。

9

小窝

海绵宝宝的宠物蜗牛,拥有理解自然语言并进行沟通的能力。

虽然是蜗牛,但偶尔会穿布鞋,所以底部是有藏脚的。

内壳藏有海绵宝宝的一些东西小蜗的照片、吃饭用时钟及黏液。

外壳附有降落伞机制。

若是底部卡了东西会因不适而发飙咬人。讨厌洗澡。在梦境可以使用自然语言交谈,智商甚至超过海绵宝宝,是一名哲学家。

2.精美图集


	
  • Alles klar,Kinder? 
  •  海绵宝宝欢迎您!
  • 访问人数
  • 注册人数
  • 关于我们
  • 了解更多
1
1 2 3 4 5 6 7 8 9 10 11 12

3.网站界面图片

 

 

 

 

 

你可能感兴趣的:(html5,css3,css)