嗨，欢迎来到异星球，我是小怪同志。这篇文章主要讲解HTML5＋CSS3制作海绵宝宝网站，请一起学习吧。
目录
一、作品简介
因为初学HTML5＋CSS3，学的知识还只是皮毛，因此这次的海绵宝宝网站有许多不足的地方，还请大家多多包涵。海绵宝宝网站主要讲了与海绵宝宝的简介，朋友，语录，图集等。
二、作品思路
海绵宝宝网站包括了七个网页，分别是：首页，作品介绍，角色简介，精彩图集，经典语录，个人注册，快速登录，网站的整体结构大方面的结构也就只是三个区域，分别是头部，中部，底部。详细的讲解就是首先是开头的快捷导航栏，其次是导航栏，导航栏主要就是表达网站有七个小页面，方便快速跳转到想要去的页面，接着就是banner设计，可以增加网站视觉效果，也可以更好的突出网站宣传区域，中间就是个整体的大框架，可以添加想要的图片文字等等一系列的效果，最后就是footer底部，这样就是一个完整的网站区域布局。
三、代码实现（部分）
话不多说，直接上部分代码。需要详细代码请私信我~后续还会继续更新的。
1.首页部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<style type="text/css">
body{margin: 0px;padding: 0px;list-style: none}
div,ul,h1,h3,li,p{margin: 0px;padding:0px;list-style: none}
body{background: url( "images/sponge.png") no-repeat 0px -100px;background-attachment: fixed}
.w{width:1200px;margin: 0px auto}
.shortcut{background-color:#E2E0E0;width: 100%;height:30px;line-height: 30px}
.shortcut li{float: left}
.fl{float: left}
.style_black{color: black}
.fr{float: right}
.style_red{color: red}
/*所有偶数*/
.shortcut .fr ul li:nth-last-child(even){width: 1px;height: 12px;background-color: darkgray;margin: 9px 15px 0px}
.nav{width: 100%;height: 50px;background-color:antiquewhite}
.nav1{width:1000px;height: 50px;margin: 0px auto;padding-left:30px}
.nav1{width:800px;height: 50px}
.nav1 ul li{float: left;height: 50px;line-height: 50px}
.nav1 ul li a{float: left;text-decoration: none;padding: 0px 20px;color:cornflowerblue;font-weight: 700;font-size:18px}
.nav1 ul li a:hover{background-color: darksalmon}
.header{width: 1200px;height: 600px;margin:30px auto}
.header img{width: 100%;height: 100%}
.big{width: 1200px;margin: 0px auto;overflow: hidden}
.ts{text-align: center;border-bottom: 2px solid #f1f2f3;margin-bottom: 20px}
.box1_content{width: 100%;margin: 10px 0px}
.box1_content_left{float: left;width: 500px}
.box1_content_left p{font-size: 17px;line-height: 32px;color: darkgoldenrod}
.box1_content_right{float: right;width: 680px}
.box1_content_right .right_img_item{width: 100%;text-align: center}
.box1_content_right .right_img_item img{ width:317px;height:300px;margin: 10px}
.footer{width: 100%;height: 50px;background-color:antiquewhite}
h3{line-height: 50px;text-align: center;color: hotpink2. 作品介绍
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作品介绍</title>
<style type="text/css">
body{margin: 0px;padding: 0px;list-style: none}
div,ul,h1,h3,h4，li,p{margin: 0px;padding:0px;list-style: none}
body{background:url( "images/sponge.png")no-repeat 0px -100px;background-attachment: fixed}
.w{width:1200px;margin: 0px auto}
.shortcut{background-color:#E2E0E0;width: 100%;height:30px;line-height: 30px}
.shortcut li{float: left}
.fl{float: left}
.style_black{color: black}
.fr{float: right}
.style_red{color: red}
/*所有偶数*/
.shortcut .fr ul li:nth-last-child(even){width: 1px;height: 12px;background-color: darkgray;margin: 9px 15px 0px}
.nav{width: 100%;height: 50px;background-color:antiquewhite}
.nav1{width:1000px;height: 50px;margin: 0px auto;padding-left:30px}
.nav1{width:800px;height: 50px}
.nav1 ul li{float: left;height: 50px;line-height: 50px}
.nav1 ul li a{float: left;text-decoration: none;padding: 0px 20px;color:cornflowerblue;font-weight: 700;font-size:18px}
.nav1 ul li a:hover{background-color: darksalmon}
.header{width: 1200px;height: 600px;margin: 30px auto}
.header img{width: 100%;height: 100%}
.center{width: 1200px;margin: 0px auto;overflow: hidden}
.big{width: 1200px;text-align: center;margin: 0px auto; overflow: hidden}
.big img{ width: 260px; height: 250px; margin: 15px;}
.header{width: 1200px;height: 600px;margin: 30px auto}
.header img{width: 100%;height: 100%}
.center{width: 1200px;margin: 0px auto;overflow: hidden}
.big{width: 1200px;text-align:center;margin: 0px auto; overflow: hidden}
.big img{ width: 260px;height: 250px; margin: 15px;}
.bt{ text-align: center;border-bottom: solid 2px #f1f2f3;margin-bottom: 20px;}
.c1{width: 100%;margin: 0 auto;overflow: hidden;}
.c1 .c1_item{float: left}
.c1 .c1_item .line_box{box-sizing: border-box;/*不用加边框和内边距的值*/border-bottom:1px solid #f1f2f5;padding: 15px;font-size: 15px;color:darkgoldenrod;font-weight: 550;}
.c1 .c1_left{width: 380px;margin: 10px;}
.c1 .c1_center{width: 380px;margin: 10px;}
.c1 .c1_right{width: 390px;text-align: center;}
.c1 .c1_right .imgox{margin: 10px 0px;}
.c1 .c1_right img{width: 350px;height: 340px;}
.c2{width: 100%;overflow: hidden;}
.c2 .left_img_{float: left;width: 250px;height: 250px;}
.c2 .left_img_ img{float: left;width: 100%;height: 240px;border-radius: 20px;}
.c2 .right_txtbox{float: right;width: 900px;box-sizing: border-box;line-height: 38px;font-size: 18px;font-weight: 500;padding: 15px;box-sizing: border-box;border:1px solid #f2f3f5;color:darkgoldenrod;}
.footer{width: 100%;height: 50px;background-color:antiquewhite}
h4{line-height: 50px;text-align: center;color:hotpink;font-size: 18px}
</style>
</head>
<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/36.jpg" alt="1"></div>
<div class="center">
<div class="bt">
<h3>作 品 概 述</h3>
</div>
<!--上盒子-->
<div class="c1">
<div class="c1_item c1_left">
<div class="line_box">
<p>中文名: 海绵宝宝</p>
</div>
<div class="line_box">
<p>原版名称: SpongeBob SquarePants</p>
</div>
<div class="line_box">
<p>别 名: 棉球方块历险记，海绵波波，顽皮小海绵</p>
</div>
<div class="line_box">
<p>类 型:动画，搞笑，家庭，剧情</p>
</div>
<div class="line_box">
<p>原作者: 史蒂芬·海伦伯格，蒂姆·希尔</p>
</div>
<div class="line_box">
<p>地 区: 美国</p>
</div>
<div class="line_box">
<p>导 演: 舍曼·科恩、沃特·杜赫、山姆·亨德森等、</p>
</div>
<div class="line_box">
<p>编 剧: 史蒂芬·海伦伯格、蒂姆·希尔、肯特·奥斯本等 </p>
</div>
</div>
<div class="c1_item c1_center">
<div class="line_box">
<p>制片人: 尼克卡通制片公司，浮游生物联合影业</p>
</div>
<div class="line_box">
<p>集 数:241 集</p>
</div>
<div class="line_box">
<p>主要配音:汤姆·肯尼、比尔·法格巴克、罗杰·布帕斯</p>
</div>
<div class="line_box">
<p>首播电视台: 尼克国际儿童频道</p>
</div>
<div class="line_box">
<p>播放期间: 1999年7月17日至今</p>
</div>
<div class="line_box">
<p>其他电视台: 中央电视台少儿频道</p>
</div>
<div class="line_box">
<p>网络播放: 央视网（中国大陆）爱奇艺、搜狐</p>
</div>
<div class="line_box">
<p>每集时间: 11至25分钟左右</p>
</div>
</div>
<div class="c1_item c1_right">
<div class="imgox">
<img src="images/76.jpg" alt="3">
</div>
<div class="imgox">
<img src="images/77.jpg" alt="4">
</div>
</div>
</div>
<!--下盒子-->
<div class="bt">
<h3>作 品 介 绍</h3>
</div>
<div class="c2">
<div class="left_img_">
<img src="images/28.jpg" alt="5">
</div>
<div class="right_txtbox">
<p>
【名称】《海绵宝宝（第一季）》
【英文】《SpongeBob SquarePants-Season 1》 [21]
【首发日期】1999年5月1日
【碟片数量】3片
【收录集数】20集
【剧集片长】474分钟
【发行公司】派拉蒙家庭视频文件公司
《海绵宝宝》是美国电视节目历史上最受孩子们喜爱的动画系列片之一，当这个可爱的海绵方块形象在1999年一推出，就受到小朋友乃至成人观众的疯狂喜爱，曾获全美儿童电视动画片收视冠军，连续八年在美国有线电视网中排名第一，每个月都有将近6千万观众收看，除了儿童观众以外，还有一半观众都是成年人。
</p>
</div>
</div>
</div>
<div class="footer">
<h4>感谢您的来访~</h4>
</div>
</body>
</html>3.网站界面图片
