嗨，欢迎来到异星球，我是小怪同志。这篇文章主要讲解HTML5＋CSS3制作海绵宝宝网站，请一起学习吧。
目录
一、作品简介
因为初学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="images/banner.jpg" alt="1"></div>
<div class="center" id="overflowtest">
<div class="big">
<div class="c1"><img src="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="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="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="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="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="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="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="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="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="images/102.jpg" alt="1"></div>
<div class="center">
<div class="big">
<img src="images/104.jpg" alt="1">
<img src="images/105.jpg" alt="2">
<img src="images/106.jpg" alt="3">
<img src="images/107.jpg" alt="4">
<img src="images/86.jpg" alt="5">
<img src="images/54.jpg" alt="6">
<img src="images/68.jpg" alt="7">
<img src="images/41.jpg" alt="8">
<img src="images/29.jpg" alt="9">
<img src="images/58.jpg" alt="10">
<img src="images/60.jpg" alt="11">
<img src="images/61.jpg" alt="12">
</div>
</div>
<div class="footer">
<h3>感谢您的来访~</h3>
</div>
</body>
</html>
3.网站界面图片
