HTML+CSS网页基础模板（海绵宝宝）

于 2024-07-09 23:09:19 发布
阅读量522 收藏 3
点赞数 15
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_65798038/article/details/140309054
版权 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>海绵宝宝</title>
</head>

<body>
<div class="wrapin"> 
  <!--头部-->
  <header>
    <ul class="nav clearfix">
      <li><a href="index.html">首页</a></li>
      <li><a href="shouye.html">剧情简介</a></li>
      <li><a href="zuihou.html">角色介绍</a></li>
      <li><a href="zuihou.html">图片鉴赏</a></li>
      <li><a href="zuihou.html">精彩片段</a></li>
    </ul>
  </header>
  <div class="banner"> <img src="./img/Screenshot 2023-12-19 223558.png"/> </div>

  <!--内容-->
  <div class="con">
    <div class="top clearfix">
      <div class="text">
        <h2>海绵宝宝</h2>
        <P>《海绵宝宝》（SpongeBob SquarePants）是一部由舍曼·科恩、沃特·杜赫、山姆·亨德森、保罗·蒂比特等导演，汤姆·肯尼、比尔·法格巴克、罗杰·布帕斯等配音的美国喜剧动画，于1999年7月17日在尼克国际儿童频道开播 。 <br>
          《海绵宝宝》的故事情节主要围绕着主角海绵宝宝和他的好朋友派大星、邻居章鱼哥、上司蟹老板等人展开，场景设定于太平洋海底，一座被称为比奇堡的城市。2005年1月30日，该片荣获第32届安妮奖授予的“最佳TV动画制作”奖  。 <br>
          这部动画除了固定描绘的卡通场景与人物之外，也会穿插一些真实的物件或人物：例如曾出演《海滩游侠》与《霹雳游侠》的大卫·哈塞尔霍夫，以本人的身份出演了几集。但海绵宝宝卡通的内容基本上与海洋知识无关，甚至夸大到完全不合乎科学与常识，例如海底生火、海底冲澡等，剧集内容也会时不时的嘲笑精致艺术和章鱼哥的劳工权益想法。</P>
      </div>
      <div class="pic"> <img src="./img/Screenshot 2023-12-19 223800.png"/> </div>
    </div>
    <div class="tupian">
      <div class="title">
        <h2>图片鉴赏</h2>
      </div>
      <ul class="clearfix">
        <li><img src="./img/Screenshot 2023-12-19 223800.png"/></li>
        <li><img src="./img/Screenshot 2023-12-19 223800.png"/></li>
        <li><img src="./img/Screenshot 2023-12-19 223800.png"/></li>
      </ul>
    </div>
  </div>

  <!--底部-->
  <footer> 

  <p>海绵宝宝</p>
  </footer>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>海绵宝宝</title>
</head>

<body>
<div class="wrapin"> 
  <!--头部-->
  <header>
    <ul class="nav clearfix">
      <li><a href="index.html">首页</a></li>
      <li><a href="shouye.html">剧情简介</a></li>
      <li><a href="zuihou.html">角色介绍</a></li>
      <li><a href="zuihou.html">图片鉴赏</a></li>
      <li><a href="zuihou.html">精彩片段</a></li>
    </ul>
  </header>
  <div class="banner"> <img src="./img/Screenshot 2023-12-19 223558.png"/> </div>
  <div class="banner" style="background-color: aliceblue;">
    <div style="height: 100px; font-size: 30px; line-height: 100px; color: rgb(68, 49, 9); margin-left: 30px;">
      <span>背景</span>
    </div>
    <img style="width: 90%; height: 100%; margin:0 auto;" src="./img/Screenshot 2023-12-19 223558.png"/> </div>

  <!--内容-->
  

  <!--底部-->
  <footer> 

  <p>海绵宝宝</p>
  </footer>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="index.css" />
    <title>海绵宝宝</title>
  </head>

  <body>
    <div class="wrapin">
      <!--头部-->
      <header>
        <ul class="nav clearfix">
          <li><a href="index.html">首页</a></li>
          <li><a href="shouye.html">剧情简介</a></li>
          <li><a href="zuihou.html">角色介绍</a></li>
          <li><a href="zuihou.html">图片鉴赏</a></li>
          <li><a href="zuihou.html">精彩片段</a></li>
        </ul>
      </header>
      <div class="banner">
        <img src="./img/Screenshot 2023-12-19 223558.png" />
      </div>
      <div class="banner" style="background-color: aliceblue">
        <div
          style="
            height: 100px;
            font-size: 30px;
            line-height: 100px;
            color: rgb(68, 49, 9);
            margin-left: 30px;
          "
        >
          <span>背景</span>
        </div>
        <div
          style="display: flex; justify-content: space-evenly; flex-wrap: wrap"
        >
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
          <img
            style="width: 300px; margin-bottom: 20px"
            src="./img/Screenshot 2023-12-19 223800.png"
            alt=""
          />
        </div>

        <div
          style="
            height: 100px;
            font-size: 30px;
            line-height: 100px;
            color: rgb(68, 49, 9);
            margin-left: 30px;
          "
        >
          <span>角色介绍</span>
        </div>
        <div
          style="display: flex; justify-content: space-evenly; flex-wrap: wrap"
        >
          <div class="item">
            <div class="item-left">
              <img
                style="
                  width: 100px;
                  height: 100px;
                  display: block;
                  border-radius: 50%;
                  border: 2px solid;
                "
                src="./img/Screenshot 2023-12-19 223558.png"
                alt=""
              />
            </div>
            <div class="item-right">
              <div style="font-size: 20px">海绵宝宝</div>
              <div style="text-indent: 2px">
                《海绵宝宝》的同名角色及主角。黄色长方形海绵，其身体构成如同清洁用海绵。生日是1986年7月14日。拥有两只左手，各四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。具有不死之身，即使身体如何被破坏皆可恢复原状。虽然有正常进食，但纯滤食海水也能继续存活。体力薄弱，且所谓的哑铃其实是绒毛玩具。
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-left">
              <img
                style="
                  width: 100px;
                  height: 100px;
                  display: block;
                  border-radius: 50%;
                  border: 2px solid;
                "
                src="./img/Screenshot 2023-12-19 223558.png"
                alt=""
              />
            </div>
            <div class="item-right">
              <div style="font-size: 20px">海绵宝宝</div>
              <div style="text-indent: 2px">
                《海绵宝宝》的同名角色及主角。黄色长方形海绵，其身体构成如同清洁用海绵。生日是1986年7月14日。拥有两只左手，各四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。具有不死之身，即使身体如何被破坏皆可恢复原状。虽然有正常进食，但纯滤食海水也能继续存活。体力薄弱，且所谓的哑铃其实是绒毛玩具。
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-left">
              <img
                style="
                  width: 100px;
                  height: 100px;
                  display: block;
                  border-radius: 50%;
                  border: 2px solid;
                "
                src="./img/Screenshot 2023-12-19 223558.png"
                alt=""
              />
            </div>
            <div class="item-right">
              <div style="font-size: 20px">海绵宝宝</div>
              <div style="text-indent: 2px">
                《海绵宝宝》的同名角色及主角。黄色长方形海绵，其身体构成如同清洁用海绵。生日是1986年7月14日。拥有两只左手，各四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。具有不死之身，即使身体如何被破坏皆可恢复原状。虽然有正常进食，但纯滤食海水也能继续存活。体力薄弱，且所谓的哑铃其实是绒毛玩具。
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-left">
              <img
                style="
                  width: 100px;
                  height: 100px;
                  display: block;
                  border-radius: 50%;
                  border: 2px solid;
                "
                src="./img/Screenshot 2023-12-19 223558.png"
                alt=""
              />
            </div>
            <div class="item-right">
              <div style="font-size: 20px">海绵宝宝</div>
              <div style="text-indent: 2px">
                《海绵宝宝》的同名角色及主角。黄色长方形海绵，其身体构成如同清洁用海绵。生日是1986年7月14日。拥有两只左手，各四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。具有不死之身，即使身体如何被破坏皆可恢复原状。虽然有正常进食，但纯滤食海水也能继续存活。体力薄弱，且所谓的哑铃其实是绒毛玩具。
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-left">
              <img
                style="
                  width: 100px;
                  height: 100px;
                  display: block;
                  border-radius: 50%;
                  border: 2px solid;
                "
                src="./img/Screenshot 2023-12-19 223558.png"
                alt=""
              />
            </div>
            <div class="item-right">
              <div style="font-size: 20px">海绵宝宝</div>
              <div style="text-indent: 2px">
                《海绵宝宝》的同名角色及主角。黄色长方形海绵，其身体构成如同清洁用海绵。生日是1986年7月14日。拥有两只左手，各四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。具有不死之身，即使身体如何被破坏皆可恢复原状。虽然有正常进食，但纯滤食海水也能继续存活。体力薄弱，且所谓的哑铃其实是绒毛玩具。
              </div>
            </div>
          </div>
        </div>

        <div
          style="
            height: 100px;
            font-size: 30px;
            line-height: 100px;
            color: rgb(68, 49, 9);
            margin-left: 30px;
          "
        >
          <span>登录</span>
        </div>
        <div
          style="display: flex; justify-content: space-evenly; flex-wrap: wrap"
        >
          <div class="content">
            <div>标 题：<input type="text" /></div>
            <div>
              内容：<textarea
                style="width: 506px; height: 160px"
                name=""
                id=""
                cols="30"
                rows="10"
              ></textarea>
            </div>
            <div>留言者:<input type="text" /></div>
            <div>
              <button>提交</button>
            </div>
          </div>
        </div>
      </div>

      <!--内容-->

      <!--底部-->
      <footer>
        <p>海绵宝宝</p>
      </footer>
    </div>
  </body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Xingxing？！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值