HTML5网页设计-----喜羊羊与灰太狼（动画作品）

最新推荐文章于 2024-05-20 15:54:35 发布

wu1113_

最新推荐文章于 2024-05-20 15:54:35 发布

阅读量400

点赞数 10

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/wu1113_/article/details/136180221

版权

文章目录

1.案例需求

利用所学的html5知识，完成喜羊羊与灰太狼网页设计中的动画作品，动画作品页面效果图如下：
在这里插入图片描述

2.编程思路

首先将整个页面分为header、content、和footer三部分，header包括导航栏，导航栏的链接利用无序列表完成，导航栏的背景利用CSS完成。content包括标题和每个作品的介绍，标题部分可用一个div设置图片再利用CSS来实现其效果，每个作品的介绍用一个div包含动画片名称和首播时间，具体可见案例源码。footer部分只包括版本，比较简单。

3.案例源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画片介绍</title>
    <base target="_blank" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .header {
        height: 200px;
        width: 1280px;
        background-image: url(images/logo.JPG);
        background-size: 1280px 200px;
      }
      .header .nav {
        background-color: #78e1dd;
        height: 30px;
        line-height: 30px;
      }
      .header h2 {
        color: orange;
        float: left;
      }
      .header .nav ul {
        list-style: none;
        float: right;
      }
      .header .nav ul li {
        display: inline-block;
      }
      .header .nav ul li a span {
        color: orange;
      }
      .header .nav ul li a {
        text-decoration: none;
        padding-right: 10px;
        color: #fff;
      }
      .header .nav ul li:last-child {
        margin-right: 80px;
      }
      .content {
        margin: 0 auto;
        width: 1064px;
        height: 700px;
        border-radius: 10px;
      }
      .content .p {
        margin-top: 15px;
        background-color: #78e1dd;
      }
      .content .p h3 {
        font-family: "楷体";
      }
      .content .p img {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        float: left;
        margin-right: 5px;
      }
      .content img {
        width: 241px;
        border-radius: 10px;
      }
      .content .one {
        margin-top: 10px;
        text-align: center;
        float: left;
        margin-right: 20px;
        margin-bottom: 10px;
      }
      .content .two {
        margin-top: 10px;
        text-align: center;
        float: left;
        margin-right: 20px;
        margin-bottom: 10px;
      }
      .content .three {
        margin-top: 10px;
        text-align: center;
        float: left;
        margin-right: 20px;
        margin-bottom: 10px;
      }
      .content .f {
        margin-top: 10px;
        text-align: center;
        float: left;
        margin-bottom: 10px;
      }
      .content p span {
        color: gray;
        font-size: 13px;
      }
      .footer {
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="nav">
        <h2>喜羊羊与灰太狼</h2>
        <ul>
          <li>
            <a href="首页.html"><span>首页</span></a>
          </li>
          <li><a href="剧情简介.html">剧情简介</a></li>
          <li><a href="动画作品.html">动画作品</a></li>
          <li><a href="角色介绍.html">角色介绍</a></li>
          <li><a href="联系我.html">联系我</a></li>
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="p">
        <img src="images/little1.jpg" alt="nothing" />
        <h3>动画片作品</h3>
      </div>
      <div class="one">
        <img src="images/t1.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼</p>
        <p><span>首播时间：</span><span>2005年8月3日</span></p>
      </div>
      <div class="two">
        <img src="images/t2.JPG" alt="nothing" />
        <p>.喜羊羊与灰太狼之羊羊运动会</p>
        <p><span>首播时间：</span><span>2008年10月23日</span></p>
      </div>
      <div class="three">
        <img src="images/t3.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之羊羊快乐的一年</p>
        <p><span>首播时间：</span><span>2010年5月1日</span></p>
      </div>
      <div class="f">
        <img src="images/t4.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之奇思妙想喜羊羊</p>
        <p><span>首播时间：</span><span>2011年7月1日</span></p>
      </div>

      <div class="one">
        <img src="images/t5.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之给快乐加油</p>
        <p><span>首播时间：</span><span>2011年10月15日</span></p>
      </div>
      <div class="two">
        <img src="images/t6.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之开心方程式</p>
        <p><span>首播时间：</span><span>2013年7月26日</span></p>
      </div>
      <div class="three">
        <img src="images/t7.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之懒羊羊当大厨</p>
        <p><span>首播时间：</span><span>2013年12月20日</span></p>
      </div>
      <div class="f">
        <img src="images/t8.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之羊羊小心愿</p>
        <p><span>首播时间：</span><span>2014年7月30日</span></p>
      </div>

      <div class="one">
        <img src="images/t9.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之衣橱大冒险</p>
        <p><span>首播时间：</span><span>2014年9月4日</span></p>
      </div>
      <div class="two">
        <img src="images/t10.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之妈妈乐疯狂</p>
        <p><span>首播时间：</span><span>2015年2月12日</span></p>
      </div>
      <div class="three">
        <img src="images/t3.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之懒羊羊当大厨</p>
        <p><span>首播时间：</span><span>2013年12月20日</span></p>
      </div>
      <div class="f">
        <img src="images/t4.JPG" alt="nothing" />
        <p>喜羊羊与灰太狼之羊羊小心愿</p>
        <p><span>首播时间：</span><span>2014年7月30日</span></p>
      </div>
    </div>
    <div class="footer">CopyRight@喜羊羊与灰太狼</div>
  </body>
</html>