HTML5+CSS3海绵宝宝网站设计（3）_海绵宝宝网页设计论文报告-CSDN博客

本文链接：https://blog.csdn.net/weixin_65445097/article/details/127470628

嗨，欢迎来到异星球，我是小怪同志。这篇文章主要讲解HTML5＋CSS3制作海绵宝宝网站，请一起学习吧。如果你看到HMTL5＋CSS3海绵宝宝网站设计（3）恭喜你全部学完了这次网站的设计。

一、作品简介

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

二、作品思路

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

三、代码实现

话不多说，直接上部分代码。如果你需要详细的代码请私信我~

1.经典语录：包含了海绵宝宝人物的经典对话和台词。

<body>
	<div class="shortcut">
		<div class="w">
			<div class="fl">
				<ul>
					<li>Alles klar,Kinder?&nbsp;</li>
					<li>&nbsp;海绵宝宝欢迎您！</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