HTML5网页设计-----喜羊羊与灰太狼（剧情简介）

最新推荐文章于 2024-06-12 00:14:31 发布

wu1113_

最新推荐文章于 2024-06-12 00:14:31 发布

阅读量554

点赞数 5

文章标签： html5 前端 html

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

版权

本文介绍了如何使用HTML5和CSS技术实现喜羊羊与灰太狼剧情简介页面的设计，包括页面布局、导航栏制作以及源码展示，重点展示了如何构建header、content和footer部分。

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

文章目录

1.案例需求

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

2.编程思路

首先将整个页面分为header、content、和footer三部分，header包括导航栏，导航栏的链接利用无序列表完成，导航栏的背景利用CSS完成。content包括最上面的标题部分，下面就是简介的文字中间包含一个图片，标题部分可用一个div设置图片再利用CSS来实现其效果，具体可见案例源码。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: 900px;
        border-radius: 10px;
      }
      .content .p {
        margin-top: 15px;
        background-color: #78e1dd;
      }
      .content .p img {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        float: left;
        margin-right: 5px;
      }
      .content .p h3 {
        font-family: "楷体";
      }
      .footer {
        margin-top: 180px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: gray;
      }
      .content .container {
        margin-top: 5px;
        height: 800px;
      }
      .content .container p {
        text-indent: 2em;
        line-height: 2;
      }
    </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="container">
        <p>
          羊历3513年，青青草原上，羊羊族群已经十分兴旺发达。在羊羊一族里面已经有小镇，有学校，有超市，有美容院，所有羊羊族群的羊都幸福快乐地生活。
        </p>
        <p>
          可是在对岸的森林里，灰太狼带着妻子红太狼却对着小肥羊流口水，红太狼看到了羊群，知道丈夫带她离开狼群是对的，问题是灰太狼什么时候到对岸去把肥羊抓回来，让她尝一尝鲜嫩的羊肉大餐。
        </p>
        <img width="1064px" src="images/jianjie.JPG" alt="nothing" />
        <p>
          当灰太狼的身影再次出现在石桥的栏栅前，羊羊族群的喜羊羊、美羊羊、沸羊羊和懒羊羊等一班年轻的小羊才真正的从现实当中看到书上记载的狼的丑陋样子。
        </p>
        <p>
          当然和武大狼一样，灰太狼面对铁栏栅也是没办法跨越，而村长慢羊羊为了防止灰太狼耍什么花招，叫了村里最聪明的喜羊羊守在桥上。
        </p>
        <p>
          灰太狼起初在桥上看到铁栅后面的喜羊羊，以为只要破坏了铁栏栅，就可以把肥羊抓住，没想到铁栏每次都给喜羊羊暗中做了手脚，灰太狼落得个伤痕满身，灰头土脸的回家，在他心中最痛恨的就是那只专门对付他的喜羊羊，简直是一点不把狼群的威风放在眼里，而且每次他都给喜羊羊害得够惨的。从此，灰太狼下定了决心，想尽一切办法要抓喜羊羊回去先下锅，以泄他心头之恨，身心之痛。
        </p>
        <p>
          可是灰太狼不知道，他的对手是全羊羊族群里最聪明的，而且在喜羊羊背后还有村长兼发明家慢羊羊、漂亮亲切的美羊羊、喜欢睡觉的懒羊羊、力大如牛的沸羊羊及一大帮羊羊族群。灰太狼的阴谋诡计虽然不断变换，但是最后还是自讨苦吃，落得一个失败的下场，而且受伤回家以后，太太红太狼并不会给他安慰，还会狠狠地教训他一顿。
        </p>
      </div>
    </div>
    <div class="footer">CopyRight@喜羊羊与灰太狼</div>
  </body>
</html>