HTML5+CSS3海绵宝宝网站设计(五)

简介: HTML5+CSS3海绵宝宝网站设计(五),一起来学习吧。

 嗨,欢迎来到异星球,我是小怪同志。这篇文章主要讲解HTML5+CSS3制作海绵宝宝网站,请一起学习吧。

一、作品简介

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


二、作品思路

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


三、代码实现(部分)

话不多说,直接上部分代码。需要详细代码请私信我~后续还会继续更新的。

<body><divclass="shortcut"><divclass="w"><divclass="fl"><ul><li>Alles klar,Kinder?&nbsp;</li><li>&nbsp;海绵宝宝欢迎您!</li></ul></div><divclass="fr"><ul><li>访问人数</li><li></li><li>注册人数</li><li></li><li>关于我们</li><li></li><li>了解更多</li></ul></div></div></div><!--nav导航制作--><divclass="nav"><divclass="nav1"><ul><li><ahref="首页.html"target="_blank">首页</a></li><li><ahref="作品介绍.html"target="_blank">作品介绍</a></li><li><ahref="角色简介.html"target="_blank">角色简介</a></li><li><ahref="精彩图集.html"target="_blank">精彩图集</a></li><li><ahref="经典语录.html"target="_blank">经典语录 </a></li><li><ahref="快速登录.html"target="_blank">快速登录</a></li><li><ahref="个人注册.html"target="_blank">个人注册</a></li></ul></div></div><divclass="header"><imgsrc="images/88.jpg"alt="1"></div><divclass="big"id="overflowtest"><p>海绵宝宝我不知道,一般我不在家的时候,你都干些什么啊?派大星:等你回来。</p><p>知识不能替代友谊,比起失去你,我宁愿做个白痴。</p><p>虽然平常一直讨厌你,可是其实我也不想看到你难过的样子,特别是因为我的时候。</p><p>不管你是否愿意相信,在美丽的比基尼海滩,每个岩洞下面,都藏着一个奇迹。</p><p>“猜猜我有几颗糖?猜对了两颗都给你。”“五颗!”“猜对了!先给你两颗,剩下的下次给你。”</p><p>如果你总是让人踩过你的头,你永远都不会得到你想要的东西。</p><p>章鱼哥每一集都会说他有多讨厌海绵宝宝,多想离他远点儿,可他在误以为海绵宝宝吞下了炸弹时陪他做完了数以千计的愿望清单。而自己,唯一的   愿望就是陪海绵宝宝看明天的太阳升起。</p><p>这里埋葬着章鱼哥的希望和梦想。</p><p>海绵宝宝,我只想告诉你一件事情,派大星也是需要人疼的!</p>       <p>海绵宝宝:派大星,你为什么叫派大星?派大星:因为我是上帝派来保护你的大星星。</p>        <p>你可以是一本打开的书,海绵宝宝,但我要比那复杂点儿。</p><p>但是到蟹堡王的人都很高兴,有什么比带给别人快乐更快乐的呢?</p><p>我生下来就是为了与你相遇。</p><p>法律上应该明文规定,在这么阳光灿烂的日子写作文是违法的。</p><p>谁都会犯错误,所以人们才会在铅笔的另一头装上橡皮。</p><p> 我要换个名字,就叫宝宝海绵好了,留个胡子,然后剃掉,逃离这里,开始新的生活。</p><p>谁准备好了,我准备好了。</p><p>你好,这里是未被发现的天才的家。</p><p>如果你们像水手一样说话,那你们就要像水手一样工作。</p><p>提到钱任何人都没有是非对错,海绵宝宝。但重点是有没有情义、道德。</p><p>在我来的路上,我被一只松鼠追。于是我问她:你为什么不去找你的松鼠同伴呢,这样你们就能一起换灯泡了!</p><p>如果你总是让人踩过你的头,你永远都不会得到你想要的东西。</p>         <p>愚蠢不是一种病毒,但它确实像病毒一样具有传染性。</p><p>所以孩子现在去追逐你的梦想吧,除非你是个傻瓜,那就继续躺在床上。</p><p>派大星,你的内裤是黄色的,你没有忘记我。</p><p>派大星,若有来世我还做你的白痴朋友!</p><p>只要我还能再看到你一次,我就能跟你说我有多爱你。</p>         <p>你怎么不问问魔法海螺呢?</p>      <p>我要两个冰淇淋,一个给我吃一个给我的好朋友海绵宝宝。</p><p>大海是这么的神秘,这么的蓝,额,还很湿。</p><p>不管你是否愿意相信,在美丽的比基尼海滩,每个岩洞下面,都藏着一个奇迹。</p><p>这个世界上最大的秘密莫过于你偷偷地把一个秘密告诉给另一个人。</p><p>虽然平常一直讨厌你,可是其实我也不想看到你难过的样子,特别是因为我的时候。</p>  
 
  
</div><divclass="footer"><h3>感谢您的来访~</h3></div></body>

四、网页图片

7.png

8.png

相关文章
|
NoSQL Java 关系型数据库
基于Java swing和mysql实现的学生选课管理系统(源码+数据库+运行指导视频)
基于Java swing和mysql实现的学生选课管理系统(源码+数据库+运行指导视频)
704 0
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
21天前
|
机器学习/深度学习 人工智能 算法
乘AIGC浪潮:把握万亿级机遇
AIGC正加速从技术走向产业落地,万亿市场规模催生全链条人才需求。北京、上海政策加码,算力基建完善,2025-2027年成关键窗口期。七大核心岗位——AIGC工程师、大模型训练师、AI工程师等全面爆发,覆盖技术到应用各层级,高薪抢人成常态。工信部认证加持,职业前景广阔,人人皆可入局,抢占AI时代新风口。
170 1
|
数据采集 数据可视化 算法
【优秀python案例】基于Python的豆瓣电影TOP250爬虫与可视化设计与实现
本文设计并实现了一个基于Python的豆瓣电影TOP250爬虫与可视化系统,通过获取电影评分、评论并应用词云和饼图等可视化技术,为用户提供了电影评价的直观展示和深入分析。
2591 3
【优秀python案例】基于Python的豆瓣电影TOP250爬虫与可视化设计与实现
|
Kubernetes 容器
K8S的Service的LoadBanlance之Metallb解决方案
本文介绍了如何在Kubernetes中使用MetalLB来实现Service的LoadBalancer功能,包括MetalLB的部署、配置、以及通过创建地址池和部署服务来测试MetalLB的过程。
755 2
K8S的Service的LoadBanlance之Metallb解决方案
|
资源调度 前端开发 JavaScript
Python学习二:Python包管理器pip
这篇文章介绍了Python包管理器pip的基本概念、基本操作、如何更改下载源为国内镜像以加速下载,以及如何指定安装包的位置。
556 0
Python学习二:Python包管理器pip
|
域名解析 网络协议
DNS服务工作原理
文章详细介绍了DNS服务的工作原理,包括FQDN的概念、名称解析过程、DNS域名分级策略、根服务器的作用、DNS解析流程中的递归查询和迭代查询,以及为何有时基于IP能访问而基于域名不能访问的原因。
1464 2
DNS服务工作原理
|
传感器 数据采集 物联网
基于STM32的光敏传感器数据采集系统-嵌入式系统与设计课程设计2
基于STM32的光敏传感器数据采集系统-嵌入式系统与设计课程设计
1684 0
|
存储 SQL NoSQL
现代数据库技术:从关系型到NoSQL的演进与比较
随着信息技术的飞速发展,数据库技术也在不断演进和创新。本文将探讨现代数据库技术的发展历程,重点比较了传统的关系型数据库和新兴的NoSQL数据库,分析它们在不同场景下的优缺点及应用推荐。
|
机器学习/深度学习 存储 算法
【一文了解物联网卡】
【一文了解物联网卡】
2457 3

热门文章

最新文章