HTML5期末大作业：海绵宝宝相关人物介绍

html5期末作业，html作业，海绵宝宝，派大星

coding加油站

2931人浏览 · 2022-07-11 20:18:57

coding加油站 · 2022-07-11 20:18:57 发布

这里只展示部分网页和部分代码，如需全部代码，关注公众号（coding加油站）领取。

作品介绍
1、本站点以动漫海绵宝宝为主题，为大家介绍了海绵宝宝的相关人物。

2 、页面结构：页面主要有首页以及几个相关动漫人物的信息网页，网页中使用了hover的一些知识来美化网页

3、功能说明：

(1) 使用html+css实现简单的网页设计

(2) 使用hover对跳转进行一些美化

(3) 使用float对一些元素进行布局

4、技术指标：网站现在兼容谷歌浏览器，IE 浏览器以及微软自带的Microsoft Edge浏览器。html 版本主要使用的是 html ，其中音频使用的是 html5 ，css 并未加入css3 新特性。编辑网站的工具所使用的是Hbuilder ，这是一款十分棒的软件，操作简单，页面简介，还提供了一些十分便利的操作，类似与整理代码，开发视图一边做一边看效果等等。
下面是效果图：

首页主要是由导航组成，导航中能够展示相关动漫人物的跳转链接，相关代码如下：

  <section class="et-hero-tabs">
    <h1><a href="index.html">比奇堡</a></h1>
    <h3>（点击比奇堡可返回寝室主页）</h3>
    <div class="et-hero-tabs-container">
      <a class="et-hero-tab" href="#tab-1">海绵宝宝</a>
      <a class="et-hero-tab" href="#tab-2">派大星</a>
      <a class="et-hero-tab" href="#tab-3">章鱼哥</a>
      <a class="et-hero-tab" href="#tab-4">蟹老板</a>
      <a class="et-hero-tab" href="#tab-5">痞老板</a>
      <a class="et-hero-tab" href="#tab-6">最后</a>
      <span class="et-hero-tab-slider"></span>
    </div>
  </section>

  <!-- Main -->
  <main class="et-main">
    <section class="et-slide" id="tab-1">
      <h1>黄色方块</h1>
      <h3>勤恳的员工 乐观主义者</h3>
      <a href="./web/1.html" a>click for more</a>
    </section>
    <section class="et-slide" id="tab-2">
      <h1>红色海星</h1>
      <h3>愚蠢的天才 住在石头里</h3>
      <a href="./web/2.html" a>click for more</a>
    </section>
    <section class="et-slide" id="tab-3">
      <h1>社畜章鱼</h1>
      <h3>现实的败者 艺术的弃儿</h3>
      <a href="./web/3.html" a>click for more</a>
    </section>
    <section class="et-slide" id="tab-4">
      <h1>财迷螃蟹</h1>
      <h3>纯粹的财迷 黑心资本家</h3>
      <a href="./web/4.html" a>click for more</a>
    </section>
    <section class="et-slide" id="tab-5">
      <h1>浮游生物</h1>
      <h3>失败野心家 命运失宠者</h3>
      <a href="./web/5.html" a>click for more</a>
    </section>
    <section class="et-slide" id="tab-6">
      <h1>聊以纪念童年</h1>
      <h3>见过世界的残酷才更想守护天真</h3>
    </section>
  </main>

海绵宝宝的相关介绍，有一些hover的相关美化

 <div class="main">
        <div class="title"><h1>海绵宝宝（SpongeBob SquarePants)</h1></div>
        <div class="img_list">
            <ul class="clearfix">
                <li>
                    <div class="w-simImg simImg_spec specFull captionbgFadeInDefault imgScaleBig simImg_spec1">
                        <div class="image-w "><a href="#">
                            <div class="imgBB">
                                <div class="img"><img src="../image/808306b88c08285022290b8f3a57cea7_720w.png"/></div>
                            </div>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>海绵宝宝</h3>
                                        <p>一块黄色的海绵，工作于蟹堡王餐厅。他养了一只蜗牛，是一个厨师，爱好是抓水母和空手道，他彷佛就是无忧无虑的化身，让每个人都回想起童年</p>
                                    </div>
                                </div>
                            </div>
                            </a> </div>
                    </div>
                </li>
                <li>
                    <div class="w-simImg simImg_spec specFull imgScaleBig imgTextA simImg_spec2">
                        <div class="image-w "><a href="#">
                            <divclass="imgBB">
                                <div class="img"><img src="../image/Gary_looking_up_stock_art.png"/></div>
                            </divclass=>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>小蜗</h3>
                                        <p>一只蜗牛，很聪明。可他却愿意呆在不聪明，甚至有点笨的主人身边，接受着一些有时候会令其不愉快的事情。他并没有因此而对主人产生芥蒂，而是陪着不聪明却很爱它的主人一起犯傻</p>
                                    </div>
                                </div>
                            </div>
                            </a> </div>
                    </div>
                </li>
                <li>
                    <div class="w-simImg simImg_spec simImg_spec3">
                        <div class="image-w"><a href="#">
                            <div class="imgBB">
                                <div class="img"><img src="../image/1638451264366-ckt-抠图.png"/></div>
                            </div>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>菠萝屋</h3>
                                        <p>海绵宝宝的房子，是比奇堡的特产（也有说是从船上掉下来的，说法不一，剧中也没有统一解释）</p>
                                    </div>
                                </div>
                            </div>
                            </a> </div>
                    </div>
                </li>

<body>
    <div class="main">
        <div class="title"><h1> 派大星（Patrick Star）</h1></div>
        <div class="img_list">
            <ul class="clearfix">
                <li>
                    <div class="w-simImg simImg_spec specFull captionbgFadeInDefault imgScaleBig simImg_spec1">
                        <div class="image-w "><a href="#">
                            <div class="imgBB">
                                <div class="img"><img src="../image/220a3492b3270e62df4e119589a1cb6c_720w.png"/></div>
                            </div>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>派大星</h3>
                                        <p>傻里傻气外表下，他孤独地一个人狂欢，他抽象，他自闭，他既是个白痴，也是个哲学家。“你可以是一本打开的书，海绵宝宝，但我要比那复杂点儿。”他本可以很聪明，但他带着一张愚钝的面具，一直陪着海绵宝宝。“他们都放弃你了，可是我没有，因为我不是很聪明。”</p>
                                    </div>
                                </div>
                            </div>
                            </a> </div>
                    </div>
                </li>
                <li>
                    <div class="w-simImg simImg_spec specFull imgScaleBig imgTextA simImg_spec2">
                        <div class="image-w "><a href="#">
                            <divclass="imgBB"></divclass=>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>石头屋</h3>
                                        <p>派大星的房子，里面的家具都是用沙子做的，是一只睡了很久的乌龟的壳</p>
                                    </div>
                                </div>
                            </div>
                            </a> <a href="#">
                            <div class="img"><img src="../image/1638452162170-ckt-抠图.png"/></div>
                            </a></div>
                    </div>
                </li>
                <li>
                    <div class="w-simImg simImg_spec simImg_spec3">
                        <div class="image-w"><a href="#">
                            <div class="imgBB">
                                <div class="img"><img src="../image/1638452988027-ckt-抠图.png"/></div>
                            </div>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>抓水母</h3>
                                        <p>派大星和海绵宝宝最爱的活动，在水母田进行</p>
                                    </div>
                                </div>
                            </div>
                            </a> </div>
                    </div>
                </li>
</body>

相关代码：

<body>
    <div class="main">
        <div class="title"><h1>章鱼哥（Squidward Tentacles）</h1></div>
        <div class="img_list">
            <ul class="clearfix">
                <li>
                    <div class="w-simImg simImg_spec specFull captionbgFadeInDefault imgScaleBig simImg_spec1">
                        <div class="image-w "><a href="#">
                            <div class="imgBB">
                                <div class="img"><img src="../image/555333abee07874b40e500d134551a87_720w.png"/></div>
                            </div>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>章鱼哥</h3>
                                        <p>每个人小时候可能都恨过章鱼哥，可长大了又发现自己又都是章鱼哥。他冷漠无情，尖酸刻薄，对工作不上心，有一个抠门的老板，一个夭折的梦想，甚至烦人的邻居和看不起自己的同学。但他又是最像正常人的一个角色。他也有自己的爱好，自己的底线，自己的血性和坚守。挫折并没有使他变得麻木不仁，这就是最不容易的事了。</p>
                                    </div>
                                </div>
                            </div>
                            </a> </div>
                    </div>
                </li>
                <li>
                    <div class="w-simImg simImg_spec specFull imgScaleBig imgTextA simImg_spec2">
                        <div class="image-w "><a href="#">
                            <divclass="imgBB">
                                <div class="img"><img src="../image/Squidward_with_clarinet_stock_art.png"/></div>
                            </divclass=>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>竖笛</h3>
                                        <p>翻译问题，这个乐器应该是黑管（单簧管），是章鱼哥最喜欢的乐器。有一集中，章鱼哥吹过一首童谣<玛丽有只小羊羔> 这基本就是单簧管考级教程一级曲目的水平（可见技术不高，但可以理解，毕竟社畜哪有时间培养兴趣爱好）</p>
                                    </div>
                                </div>
                            </div>
                            </a> </div>
                    </div>
                </li>
                <li>
                    <div class="w-simImg simImg_spec simImg_spec3">
                        <div class="image-w"><a href="#">
                            <div class="imgBB">
                                <div class="img"><img src="../image/1638612956706-ckt-抠图.png"/></div>
                            </div>
                            <div class="caption w-img-caption">
                                <div class="captionbg bg_main"></div>
                                <div class="caption-text">
                                    <div class="caption-text-in">
                                        <h3>人像屋</h3>
                                        <p>章鱼哥的房子，充满艺术气息。貌似是章鱼这类生物居住场所的统一建筑风格</p>
                                    </div>
                                </div>
                            </div>
                            </a> </div>
                    </div>
                </li>
</body>

这里只展示部分网页和部分代码，如需全部代码，关注公众号（coding加油站）领取。