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

相关文章
HTML5+CSS3海绵宝宝网站设计(一)
HTML5+CSS3海绵宝宝网站设计(一),一起来学习吧。
HTML5+CSS3海绵宝宝网站设计(一)
|
3月前
|
前端开发
太惊艳了,这些都是CSS的杰作!
太惊艳了,这些都是CSS的杰作!
|
3月前
|
存储 前端开发 安全
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
34 2
|
3月前
|
Web App开发 前端开发
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
29 2
|
3月前
|
缓存 前端开发 JavaScript
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
32 2
|
5月前
|
存储 移动开发 前端开发
HTML哆啦A梦
HTML哆啦A梦
60 0
|
前端开发 网络架构
利用html和css制作一个简单的网页(端午快乐)
利用html和css制作一个简单的网页(端午快乐)
453 0
利用html和css制作一个简单的网页(端午快乐)
|
前端开发 JavaScript 程序员
用html和css写一个简约的名片
用html和css写一个简约的名片
471 0
|
机器学习/深度学习 前端开发 IDE
「趣学前端」昨天画了一张小滑板,今天看我用CSS让它滑起来
用技术实现梦想,用梦想打开创意之门。今天分享前端CSS中的transform知识点。
142 1
HTML5+CSS3海绵宝宝网站设计(七)
HTML5+CSS3海绵宝宝网站设计(七),一起来学习吧。
HTML5+CSS3海绵宝宝网站设计(七)
下一篇
无影云桌面