超赞的动漫主题大学生网页html作业带报告 JS轮播图表单视频下拉菜单栏

最新推荐文章于 2024-06-02 12:27:09 发布

从前有个范特西

最新推荐文章于 2024-06-02 12:27:09 发布

阅读量367

点赞数

文章标签： html css 网页设计前端 javascript

本文链接：https://blog.csdn.net/lxidw7/article/details/129957819

版权

这是一个采用HTML和CSS构建的动漫主题网页，包含JavaScript实现的轮播图、下拉菜单和鼠标滑过效果。网页设计精良，子页面采用图文混排，具有独特的排版设计。此外，还包括一份1500字的制作报告，详细描述了制作过程和总结。

摘要由CSDN通过智能技术生成

动漫主题网页设计，制作精良、完成度较高，运用有js轮播图、下拉菜单栏、鼠标滑过效果、js正则表达式等，子页面运用图文混排不重复排版，另有制作报告1500字，描述了制作过程、方法、总结等。预览视频如下：

超赞的动漫主题大学生网页html作业带报告 JS轮播图表单视频下拉菜单栏

<!doctype html>
<html> 
<head>
<meta charset="utf-8">
<title>动漫小站</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/slideshow.css" rel="stylesheet" />
</head>

<body>
<div id="top">
  <div id="above">
    <div id="Logo"><a href="index.html"><img src="images/logo.png" width="180" height="50"></a></div>
    <div id="search">
      <label for="textfield"></label>
      <input name="textfield" type="text" id="textfield" value="  搜索你喜欢的作品" maxlength="15">
    </div>
    <div id="login"><a href="login.html">注册账号</a></div>
  </div>
</div>
 <!-- 导航条代码 开始 -->
<div class="nav">
  <ul class="list">
                <li><a href="index.html">首页</a></li>
                 
                <li><a href="#">精选作品 <img src="images/down.svg" width="12" height="12"></a>
                  <div class="down">
                            <a href="article.html">《龙猫》</a>
                             <a href="page.html">《千与千寻》</a>

                    </div>
                </li>
                 
                <li><a href="list.html">动漫推荐</a></li>
                <li><a href="video.html">在线观看</a></li>
                <li><a href="login.html">注册会员</a><a href="about.html"></a></li>
 
            </ul>
</div>
 <!-- 导航条代码 结束 -->
 <!-- 代码 开始 -->
    <div id="yc-mod-slider">
        <div class="wrapper">
            <div id="slideshow" class="box_skitter fn-clear">
                <ul>
                    <li>
                        <img class="cubeRandom" src="images/slider1.jpg" /></li>
                    <li>
                        <img class="cubeRandom" src="images/slider2.jpg" /></li>
                    <li>
                        <img class="cubeRandom" src="images/slider3.jpg" /></li>
                        <li>
                        <img class="cubeRandom" src="images/slider4.jpg" /></li>
                        <li>
                        <img class="cubeRandom" src="images/slider5.jpg" /></li>
                </ul>
            </div>
            <script type="text/javascript" src="js/slideshow.js"></script>
        </div>
    </div>
    <!-- 代码 结束 -->
    
<div id="im01">
    <div id="text002">说到宫崎骏，那可以说是动画界的半壁江山了。小编认为他完全能称得上是一位大师了。他的作品大多数是有关人类与自然和谐相处，和平主义以及女权运动，故事风格温柔细腻，独树一帜。宫崎骏与他的工作室吉卜力在日本乃至在世界也是相当有名气的，他们的每一部作品都堪称经典。他的作品画风十分优美，精确到每一帧，都可以截下来做壁纸。说了这么多，让我们一起来看看宫崎骏老爷子的作品吧！</div>
    <div id="anniu" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="video.html">观看视频</a></div>
    <div id="anniu1" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="list.html">了解更多</a></div>
  </div>
  
  <div id="main-more"><table width="47%" height="318" border="0">
  <tr>
    <td align="center"><table width="81%" border="0">
      <tr>
        <td><a href="#">宫崎骏八十岁了,为什么人人都爱他?</a><br>
          <a href="#">长大了的你,还记得这些美丽的取景地吗?</a><br>
          <a href="#">动漫作品中,那些温暖的语录,句句浪漫</a><br>
          <a href="#">宫崎骏动漫经典语录,句句在理,值得我们深思!</a><br>
          <a href="#">一大波关于宫崎骏老爷爷的经典动漫影视正向我们驶来!</a><br>
          <a href="#">宫崎骏爷爷动漫里的头像《魔女宅急便》&《千与千寻》 </a><br>
          <a href="#">走进宫崎骏的动漫世界 去樱树下享受午后时光</a><br>
          <a href="#">「探索」沪上剧院1月份不完全观演指南在此</a><br>
          <a href="#">一个梦幻的童年世界,走近宫崎骏的动漫作品</a></td>
      </tr>
    </table></td>
  </tr>
</table>
</div>

<div id="music"><table width="100%" border="0">
  <tr>
    <td width="38%" height="55" align="center"><audio src="media/music.mp3" controls autoplay></audio></td>
    <td width="62%"><marquee>君をのせて (天空の城ラピュタ)</marquee></td>
  </tr>
</table>
</div>

<!-- footer代码 开始 -->
<footer>
<div id="footer_all">
  <div id="f1170-167">
    <div id="logo-175-40"><a href="index.html"><img src="images/logo.png" width="180" /></a></div>
    <div class="aye" id="login">
      <table width="103" border="0">
        <tr>
          <td width="97" height="37" align="left"><a href="list.html" class="ayahei">了解更多</a></td>
        </tr>
      </table>
    </div>
    
    <div class="aye" id="login">
      <table width="103" border="0">
        <tr>
          <td width="97" height="37" align="left"><span class="ayahei"><a href="login.html">注册账号</a></span><a href="Login.html"></a></td>
        </tr>
      </table>
    </div>
    
    <div id="right828-167">
      <div id="l-828-80">
        <div id="r-150-42"><a href="#"><img src="images/fb.png" width="45" height="45"></a></div>
        <div id="r-150-42-1"><a href="#"><img src="images/tw.png" alt="" width="45" height="45"></a></div>
        <div id="r-150-42-1"><a href="#"><img src="images/ins.png" alt="" width="45" height="45"></a></div>
      </div>
      <div id="r-lianjie"><table width="100%" border="0">
  <tr>
    <td align="right">© 动漫小站&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;</td>
  </tr>
</table>
</div>
    </div>
  </div>
</div>
</footer>
<!-- 代码 结束 -->
</body>
</html>

源码及素材包请见视频~