【大鱼海棠动漫网页制作】

m0_71941456

已于 2024-03-15 14:56:32 修改

阅读量668

点赞数 8

文章标签： css html 前端

于 2024-03-15 14:52:54 首次发布

本文链接：https://blog.csdn.net/m0_71941456/article/details/136739113

版权

目录标题

1.案例需求

制作动漫大鱼海棠网页

2.编程目的

1.掌握制作video和CSS
2.video标签—control、loop、autoplay、width属性、height属性
3.十种选择器的用法
4、CSS中字体、字号、文本对齐方式等的应用
5、锚点的应用，假链接的应用
6、表单的应用

3.案例源码

       <doctype html>
  <html lang="en">
    <head>
      <title>主页1.html</title>
      <meta charset="utf-8" />
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body {
          background-color: Turquoise;
        }

        .header {
          height: 160px;
          width: 100%;
          margin: 0 auto;
          background-color: white;
          text-align: center;
        }
        .header img {
          height: 160px;
          width: 200px;
          margin: 0 auto;
        }

        .nav {
          height: 50px;
          width: 1100px;
          margin: auto;
        }
        .nav span {
          margin-right: 76px;
          color: white;
          font-size: 15px;
          text-align: center;
        }
        .nav .title1 {
          float: right;
        }

        .box {
          height: 1300px;
          width: 1100px;
          margin: 0 auto;
          background-color: white;
          padding-top: 10px;
          border: 1px solid #cccccc;
          /* 圆角 */
          border-radius: 5px;
        }
        .content {
          height: 650px;
          width: 1080px;
          overflow: hidden;
          margin: 0 auto;
        }
        .container {
          width: 3240px;
          animation: switch 10s ease-out infinite;

          /*图片名称 时间 以低速结束 无限循环*/
        }
        .container > img {
          float: left;
          width: 1080px;
          height: 650px;
        }

        @keyframes switch {
          0%,
          30% {
            margin-left: 0px;
          }
          35%,
          65% {
            margin-left: -1080px;
          }
          75%,
          100% {
            margin-left: -2160px;
          }
        }
        .footer {
          height: 531px;
          width: 1100px;
          margin: 0 auto;
        }
        .footer > span {
          color: Turquoise;
          font-size: 30px;
          text-align: center;
          line-height: 100px;
          display: block;
        }
        .footer > .one {
          width: 355px;
          height: 500px;

          margin-left: 8px;

          float: left;
        }
        .footer > .two {
          width: 360px;
          height: 500px;

          margin-left: 8px;

          float: left;
        }
        .footer > .three {
          width: 360px;
          height: 500px;

          margin-left: 8px;

          float: left;
        }
        .footer img {
          width: 355px;
          height: 250px;
        }
        .footer h2 {
          color: Turquoise;
          margin-top: 5px;
          margin-bottom: 10px;
        }
        .footer p {
          color: grey;
          font-size: 16px;
        }
        a {
          text-decoration: none;
          color: white;
        }
      </style>
    </head>
    <body>
      <div class="header"><img src="images/zi.jpg" alt="" /></div>
      <br />
      <div class="nav">
        <span><a href="大鱼首页.html">大鱼首页</a></span
        ><span><a href="剧情简介.html">剧情简介</a></span
        ><span><a href="人物简介.html">人物简介</a></span
        ><span><a href="精彩剧照.html">精彩剧照</a></span
        ><span>精彩片段</span><span>热门影评</span> <span>快速登录</span
        ><span class="title1">粉丝注册</span>
      </div>
      <div class="box">
        <div class="content">
          <div class="container">
            <img src="images/lunbo1.jpg" />
            <img src="images/lunbo2.jpg" />
            <img src="images/lunbo3.jpg" />
          </div>
        </div>
        <div class="footer">
          <span>大鱼海棠故事</span>
          <div class="one">
            <img src="images/dongmanchun1.jpg" alt="" />
            <h2>剧情简介</h2>
            <p>
              《大鱼海棠》是由季冠霖、苏尚卿、许魏洲等担任主要配音，彼岸天文化制作，梁旋、张春执导的奇幻动画电影，于2016年7月8日在中国大陆上映，影片时长105分钟。[1]
              该影片取材于《庄子·逍遥游》《山海经》《搜神记》等古书，融合了“女娲补天”等中国上古神话元素，讲述了掌管海棠花生长的少女“椿”为报恩而努力复活人类男孩“鲲”的灵魂，并在本是天神的少年“湫”的帮助下与彼此纠缠的命运斗争的故事。[1]
            </p>
          </div>
          <div class="two">
            <img src="images/dongman1.jpg" alt="" />
            <h2>人物简介</h2>
            <p>
              椿，动画电影《大鱼海棠》的女主角，掌管海棠花的生长，性格坚强执着。居住在“神之围楼”里的少女，是凤的女儿。[1]
              椿作为生家族的继承人，母亲凤期望她能像自己一样独当一面，在初踏人类世界被一少年所救，为此该少年付出了生命。椿怀着愧疚与感激的心，不惜违背族人戒律，逆天而行，踏上了复活少年的道路，为此不惜牺牲性命。[2]
              该角色少年时期由季冠霖配音，老年时期由潘淑兰配音。
            </p>
          </div>
          <div class="three">
            <img src="images/dongman2.jpg" alt="" />
            <h2>精彩剧照</h2>
            <p>
              电影《大鱼海棠》女主人公，家族的继承人，能让植物生长。性格坚强执着，对人类世界充满好奇，有感恩的心和责任感，虽然外表看上去有些冷漠严肃，但是内心是非常细腻，富有同情心。
            </p>
          </div>
        </div>
      </div>
    </body>
  </html></doctype
>