HTML5＋CSS3海绵宝宝网站设计1
异星球的小怪同志
帮助4人
目录
一、作品简介
因为初学HTML5＋CSS3，学的知识还只是皮毛，因此这次的海绵宝宝网站有许多不足的地方，还请大家多多包涵。海绵宝宝网站主要讲了与海绵宝宝的简介，朋友，语录，图集等。
二、作品思路
海绵宝宝网站包括了七个网页，分别是：首页，作品介绍，角色简介，精彩图集，经典语录，个人注册，快速登录，网站的整体结构大方面的结构也就只是三个区域，分别是头部，中部，底部。详细的讲解就是首先是开头的快捷导航栏，其次是导航栏，导航栏主要就是表达网站有七个小页面，方便快速跳转到想要去的页面，接着就是banner设计，可以增加网站视觉效果，也可以更好的突出网站宣传区域，中间就是个整体的大框架，可以添加想要的图片文字等等一系列的效果，最后就是footer底部，这样就是一个完整的网站区域布局。
三、代码实现（部分）
话不多说，直接上部分代码。需要详细代码请私信我~后续还会继续更新的。
1.首页部分
-
-
-
<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. 作品介绍
-
-
<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>
3.网站界面图片
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhfiabcf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
