HTML5＋CSS3海绵宝宝网站设计（1）
嗨，欢迎来到异星球，我是小怪同志。这篇文章主要讲解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: hotpink
2. 作品介绍
3.网站界面图片
上一篇：
通过多线程提高代码的执行效率例子
下一篇：
java实现动态图片效果