html+css网页设计 动漫 海绵宝宝网页设计1个页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/89677338
2，点击上方下载
目录1
项目视频
html+css网页设计 海绵宝宝网页设计1个页面
页面1
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="header">
<div class="heart w">
<a href="#" class="first">首页</a>
<a href="#footer">关于我们</a>
<a href="#banner2">剧照欣赏</a>
<a href="#banner3">角色简介</a>
<a href="#banner1">精美壁纸</a>
</div>
</div>
<!--top1-->
<div class="top w" id="banner1">
<h2>精美壁纸</h2>
<span><a href="#">查看更多></a></span>
</div>
<!--精美壁纸banner1-->
<div class="banner1 w">
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<div class="img1"></div>
</div>
<!--top3-->
<div class="top w" id="banner3">
<h2>角色简介</h2>
<span><a href="#">查看更多></a></span>
</div>
<!--角色简介banner3-->
<div class="banner3 w">
<div class="charactor">
<div class="c1 c">
<img src="images/hmbb.png" alt="">
<div class="c1p cp">
<img src="images/hmbb.png" alt="">
<h3>海绵宝宝</h3>
<p>《海绵宝宝》的同名角色及主角。</p>
<p>黄色长方形海绵,其身体构成如同清洁用海绵。生日是1986年7月14日。</p>
<p>拥有两只左手,各四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。</p>
<p> 具有不死之身,即使身体如何被破坏皆可恢复原状。虽然有正常进食,但纯滤食海水也能继续存活。</p>
<p>体力薄弱,且所谓的哑铃其实是绒毛玩具。</p>
</div>
<div class="talk">
Hi!我是海绵宝宝~
<div class="sanjiao"></div>
</div>
</div>
<div class="c2 c">
<img src="images/pdx.png" alt="">
<div class="c2p cp">
<img src="images/pdx.png" alt="">
<h3>派大星</h3>
<p>粉红色的海星。</p>
<p>智商极低，头脑与身体仅使用插头连结。</p>
<p>做什么事都会搞砸，但开船却异常厉害，居住乌龟壳底下。</p>
<p>懒惰并相当孩子气，时常在无意间呆滞的流口水，且讨厌洗澡、也不爱洗手、偏爱睡觉。 兴趣是看电视。</p>
<p>跟海绵宝宝的交情最好；并时常鼓励海绵宝宝做出一些危险行动，往往让彼此陷入困境。</p>
</div>
<div class="talk">
~~我是派大星！
<div class="sanjiao"></div>
</div>
</div>
<div class="c3 c">
<img src="images/zyg.png" alt="">
<div class="c3p cp">
<img src="images/zyg.png" alt="">
<h3>章鱼哥</h3>
<p>大鼻子章鱼，容易愤怒且势利眼，相当自恋，自以为拥有艺术才能。</p>
<p>目前是光头，但曾有过黄色长卷发。</p>
<p>居住在一栋仿复活节岛人像的房屋。</p>
<p>担任"蟹堡王餐厅"的柜台人员，但并不喜欢自己的工作，喜欢吹奏竖笛及采用多种风格画自画像。</p>
<p>讨厌海绵宝宝和派大星，偶尔会对海绵宝宝表达认同，但通常是对他自己有利的时候。</p>
</div>
<div class="talk">
大家好,我是章鱼哥~
<div class="sanjiao"></div>
</div>
</div>
<div class="c4 c">
<img src="images/xlb.png" alt="">
<div class="c4p cp">
<img src="images/xlb.png" alt="">
<h3>蟹老板</h3>
<p>红色螃蟹，本名蟹阿金。只要发现能发短财的产品，就会忽视老本美味蟹堡并转换目标。</p>
<p>视金钱如生命，经常为了一块钱而去冒生命危险，极为自私。</p>
<p>快餐店"蟹堡王餐厅的经营者，多次向员工宣导要有时间观念，因为"时间就是金钱"。</p>
<p>营业时间常在办公室看报纸、数钱、洗金钱浴等，喜欢看讽刺戏剧，和痞老板是死对头。</p>
</div>
<div class="talk">
haha~我是蟹老板
<div class="sanjiao"></div>
</div>
</div>
<div class="c5 c">
<img src="images/plb.png" alt="">
<div class="c5p cp">
<img src="images/plb.png" alt="">
<h3>痞老板</h3>
<p>蟹老板的死对头,《海绵宝宝》的主要反派角色。</p>
<p>由1%的邪恶和99%的热毒气组成。</p>
<p>快餐店“海之霸餐厅”的老板。只有一只眼睛，时常刺痛（因为他忘记眨眼）。</p>
<p>他的妻子是电脑，名叫凯伦。</p>
<p>为了让自己的餐厅生意兴隆，一直偷取蟹堡王著名料理“美味蟹堡”的祖传秘方，却从未成功，最大的希望是统治全世界。</p>
</div>
<div class="talk">
我是痞老板
<div class="sanjiao"></div>
</div>
</div>
<div class="c6 c">
<img src="images/kl.png" alt="">
<div class="c6p cp">
<img src="images/kl.png" alt="">
<h3>凯伦</h3>
<p>痞老板的 电脑老婆,拥有256G的内存,小时候是 计算器,还没嫁给痞老板时是保全系统。</p>
<p>经常帮助 痞老板想计策,来帮助痞老板偷走美味蟹黄堡秘方——也就是痞老板的一个理想,但是从来没有成功过。</p>
<p>虽然计划失败时, 痞老板总是对她大吵大骂,但她从来没有埋怨过,有时候甚至很温柔,与痞老板的关系还不错。</p>
</div>
<div class="talk">
大家好~我是凯伦
<div class="sanjiao"></div>
</div>
</div>
<div class="c7 c">
<img src="images/sd.png" alt="">
<div class="c7p cp">
<img src="images/sd.png" alt="">
<h3>珊迪</h3>
<p>来自德克萨斯州的雌性松鼠,身兼科学家、探险家和发明家。</p>
<p>热爱运动（尤其空手道和滑沙）和科学,也是牛仔竞技的冠军。</p>
<p>由于松鼠属於陆地生物,需要呼吸空气,在海底须穿著太空衣和头盔。</p>
<p>平常居住在大型圆形强化玻璃防护罩下的海底树屋,内部环境与陆地相同,且可以季节轮替;若海洋生物入内须配戴装水的头盔。</p>
</div>
<div class="talk">
Hi~我是珊迪~
<div class="sanjiao"></div>
</div>
</div>
<div class="c8 c">
<img src="images/zz.png" alt="">
<div class="c8p cp">
<img src="images/zz.png" alt="">
<h3>珍珍</h3>
<p>珍珍是蟹老板的鲸鱼女儿,和蟹老板一起住在比奇堡的船锚屋,喜欢购物,喜欢大把大把的消费,好强爱美,最受不了的是爸爸的小气。</p>
<p>年龄正值青春期,常身穿粉红色短T短裙和白袜子。</p>
</div>
<div class="talk">
你们好~我是珍珍
<div class="sanjiao"></div>
</div>
</div>
<div class="c9 c">
<img src="images/xw.png" alt="">
<div class="c9p cp">
<img src="images/xw.png" alt="">
<h3>小蜗</h3>
<p>海绵宝宝的宠物蜗牛,拥有理解自然语言并进行沟通的能力。</p>
<p>虽然是蜗牛,但偶尔会穿布鞋,所以底部是有藏脚的。</p>
<p>内壳藏有海绵宝宝的一些东西小蜗的照片、吃饭用时钟及黏液。</p>
<p>外壳附有降落伞机制。</p>
<p>若是底部卡了东西会因不适而发飙咬人。讨厌洗澡。在梦境可以使用自然语言交谈,智商甚至超过海绵宝宝,是一名哲学家。</p>
</div>
<div class="talk">
emmm~~~
<div class="sanjiao"></div>
</div>
</div>
</div>
<div class="intro">
<img src="images/intro.png" alt="" class="outimg">
<img src="images/001.jpg" alt="" class="bgimg1">
<img src="images/002.jpg" alt="" class="bgimg2">
<img src="images/003.jpg" alt="" class="bgimg3">
<img src="images/005.jpg" alt="" class="bgimg4">
<img src="images/101.jpg" alt="" class="bgimg5">
<img src="images/102.jpg" alt="" class="bgimg6">
<img src="images/103.jpg" alt="" class="bgimg7">
</div>
</div>
<!--top2-->
<div class="top w" id="banner2">
<h2>剧照欣赏</h2>
<span><a href="#">查看更多></a></span>
</div>
<!--剧照欣赏banner2-->
<div class="banner2 w">
<div class="box0">
<img src="images/006.jpg" alt="" width="300px">
</div>
<div class="box1 small">
<img src="images/007.jpg" alt="" width="240px">
</div>
<div class="box2 small">
<img src="images/013.jpg" alt="" height="300px">
</div>
<div class="box3 small">
<img src="images/009.jpg" alt="" width="240px">
</div>
<div class="box4 small">
<img src="images/010.jpg" alt="" height="300px">
</div>
<div class="box5 small">
<img src="images/011.jpg" alt="" height="300px">
</div>
<div class="box6 small">
<img src="images/012.jpg" alt="" height="300px">
</div>
</div>
<div class="footer w" id="footer">
<p>感谢您的来访~</p>
<p class="pink">目前功能尚未开发完整,请谅解~</p>
<p>本网站内容参考百度百科,供初学者学习交流使用。</p>
</div>
</body>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
