HTML5＋CSS3海绵宝宝网站设计（1）
2024-06-05 10:45:05
嗨，欢迎来到异星球，我是小怪同志。这篇文章主要讲解HTML5＋CSS3制作海绵宝宝网站，请一起学习吧。
目录
一、作品简介
二、作品思路
三、代码实现（部分）
1.首页部分
2. 作品介绍
3.网站界面图片
一、作品简介
因为初学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="data: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="data:images/76.jpg" alt="3"></div><div class="imgox"><img src="data:images/77.jpg" alt="4"></div></div></div><!--下盒子--><div class="bt"><h3>作 品 介 绍</h3></div><div class="c2"><div class="left_img_"><img src="data: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.网站界面图片
HTML5＋CSS3海绵宝宝网站设计（1）相关推荐
- HTML5+CSS3海绵宝宝网站设计（3）
嗨,欢迎来到异星球,我是小怪同志.这篇文章主要讲解HTML5+CSS3制作海绵宝宝网站,请一起学习吧.如果你看到HMTL5+CSS3海绵宝宝网站设计(3)恭喜你全部学完了这次网站的设计. 目录 一.作 ...
- HTML5+CSS3海绵宝宝网站设计（2）
嗨,欢迎来到异星球,我是小怪同志.这篇文章主要讲解HTML5+CSS3制作海绵宝宝网站,请一起学习吧. 目录 一.作品简介 二.作品思路 三.代码实现 1.角色简介 2.精美图集 3.网站界面图片 一 ...
- HTML5 网站大观：12个优秀的 HTML5 黑色风格网站设计
本期 HTML5 网站大观向大家分享12个精美的 HTML5 黑色风格网站设计作品欣赏.作为下一代网页语言,HTML5 加入众多的语义化标签,例如 video.audio.section.articl ...
- 基于HTML5+CSS3的网页设计与实现
摘要:随着互联网技术的不断发展,电子设备的广泛应用和高普及度,网页作为互联网信息的重要载体,其网页设计技术将面临新的挑战.HTML和CSS作为网页前端开发所运用的主要核心技术,如何灵活运用,使得web ...
- 跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程 编辑 锁定 讨论 上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
- 349套HTML5+CSS3各行各业网站模板免费下载
场景 349套HTML5+CSS3各行各业网站模板. Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的, ...
- java计算机毕业设计HTML5“守护萌宠”网站设计与实现MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计HTML5"守护萌宠"网站设计与实现MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计HTML5"守护萌宠"网站设计与 ...
- 免费html5 css3大学生网页设计期末作业 网页制作作业成品
html5 css3大学生网页设计期末作业 网页制作作业成品 布局技术:html5 css3 页面个数:6个 网页元素:图文 超链接 表单 效果图: 目录如下: <!DOCTYPE html&g ...
- JAVA毕业设计HTML5“守护萌宠”网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计HTML5"守护萌宠"网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计HTML5"守护萌宠"网站设计与实现计算机源码 ...
最新文章
- linux pytorch 快速安装
- Quartz.Net—配置化
- android adb命令，向开发手机添加文件
- OPEN ERP相关财务的基本概念
- oc调用rest api
- Linux学习笔记（五）
- C#LeetCode刷题之#665-非递减数列（ Non-decreasing Array）
- 2019年网络安全状况_知道吗，如何加强个人的网络安全状况？
- python单词的含义-Python这个单词是什么含义？?????????????
- [转]Windows 下 Apache Virtual hosts 简单配置
- Linux 系统-----vim命令详解
- excel使用教程_火遍全球的14个Excel学习网：大神套路、视频课、软件下载应有尽有...
- 易基因｜3文读懂：m6A甲基化在动物肌肉发育中的重要作用（猪+鸡+山羊）
- FC-SAN存储技术
- PSI_压力阻塞信息
- android psensor测试,android传感器Gsensor和Psensor的使用举例
- 相机标定篇——相机标定
- 微信小程序消息通知简单Demo
- 发挥强大资源优势，移动云助推高校人才培养
- VF03发票凭证增强