html期末静态页面设计_设计给的1480 px-CSDN博客

本文链接：https://blog.csdn.net/m0_71772930/article/details/134896755

前言

前言

html+css练习网页

一、剧情简介

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>樱桃小丸子剧情简介</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #f4b7d2;
        }

        .zong {
            width: 1480px;
            margin: 0 auto;
        }

        .header {
            width: 1490px;
            height: 100px;
            background-image: url(images/header.png);
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .nav {
            width: 1490px;
            height: 50px;
            padding: 20px auto;
            padding-top: 10px;
            box-sizing: border-box;
            background-color: white;
        }

        .nav img {
            display: inline-block;
            float: left;
            margin-left: 210px;
        }

        .nav table {
            margin-left: 800px;

        }

        .content {
            width: 1100px;
            height: 700px;
            margin: 20px auto;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
        }

        h2 {
            margin-bottom: 20px;
        }

        p {
            color: #ababab;
            margin-bottom: 20px;
            line-height: 30px;
        }

        #t2 span {
            font: bold 20px "微软雅黑";
            color: pink;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="zong">
    <div class="header"></div>
    <div class="nav">
        <img src="images/logo.png" alt="" width="100px" height="40px">
        <table>
            <tr align="center">
                <td width="100" id="t1"> <a href="樱桃小丸子首页.html"><span>首页</span></a></td>
                <td width="100" id="t2"> <a href="樱桃小丸子剧情简介.html"><span>剧情简介</span></a></td>
                <td width="100" id="t3"> <a href="樱桃小丸子角色介绍.html"><span>角色介绍</span></a></td>
                <td width="100" id="t4"> <a href="樱桃小丸子精彩剧情.html"><span>精彩剧情</span></a></td>
                <td width="100" id="t5"> <a href="樱桃小丸子快速登录.html"><span>快速登录</span></a></td>
            </tr>
        </table>
    </div>
    <div class="content">
        <h2>樱桃小丸子 </h2>
        <p>樱桃小丸子是日本动画公司制作的电视动画。其动西连安二十余年高居日本动国收视车的三位，到2013年时已超过1000集，仍于每园日黄金时段下年六点在日本富土电视台上进行连我热插，是日本男女老少心中的国民动画。
            本作品是以作者的童年生活为蓝本，故事国烧看小丸子以及其家人和同学展开
            存关于东價，友谊，或是一些生活小亚，其中有笑有泪，今人回想起南年的雅气。在1990年至1992年，《慢挑小丸子》第一次动画化，于富士电视台插出，井曾于1990年10月28日达到39.9%的收视率，在1991年9月26日成为有纪录以来日本史上最高收视的动画。而第二次动国化于1995年开始，直至
            2005年现仍攝放中，并于2005年1月9日迎来了攝放15月年纪念p>
        <p>该作品是以作者的童年(1974年)生活为西本的故事，其中一事一物均充满巷70年代的不旧气电，故事发生的期台是日本峰风县清水市
            (以2005年起成为静冈县静冈市清水区），环足一个足个交通便利，渔产丰省，又与高士山为邻的地方。《接桃小丸子》红這亚洲得益于它次沿却有哲理的故事，而创作小丸子的作者三酒美记，也有一段北常有近的放事，1965年5月8日出生于日本静风县清水市的三浦美纪，血型A型，金牛座。她于1984年出道，使用笔岔慢据子，创作了以自己童年的家身经历为蓝本的漫画《慢桃小丸子），井黑予主角相同的名字、出生年月日，血型、星座等。（受桃小丸子）这部动画片有很多小女孩的心思在里面，足个类似小品文的动西，它叙述简单却内西丰盒，思实反映了日本家定生活-而目能引1起广大观众的共吗。就供《哆啦A参）给了观众参想一样，《
            挑小丸子）带给观众的是怀旧的记记，作品是用白描手法描绘日第生活的漫画，小丸子的那些事足观众小时候做过的，耶种纯真的心都足 一样的。
            一个文化作品，要么提供幻规，要么引起共吗，小丸子做到了这一点，她的故事是一种生活的理想扶态，传递给观众的是特圳美好的东西。</p>
        <p>该片进达了小九子上幼儿园和小学任年级的故雪，大家已经然知了这个们皮。童其、联惠，省有创意叉缺点一大把的女孩子。而在第一部中，小丸子已经升入了三年级，放要自然还界国绕看她在生活和学习中与家人，朋友，老师同学之间发生的一班护有知的情鼠展开，有关丁家情，爱心以及回学之间的友
            價。小九子是一名小学二年吸的女生，她活没。好动。我情。什么事情相面到最后一列才做。学司不认真，成肉平平。经范和姐烟斗气。發幻想。做严没恒
            …在小九子身上我们城多城少都看到了自己童年的路子。如果小丸子身是一个“堡人，的店，那么地电可调“堡人，
            路盛。有点神经西的班长丸居回学，权利花吸理的女到街长，经第和小九子一起质的节节，讨人天的就治同关等等，这联性格名昇。精力在河的小孩。大人们，每天都在滿鲜看生活的遇事，件随看小九子一天天长大</p>
    </div>
</div>
</body>

</html>

二、角色介绍

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>樱桃小丸子角色介绍</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #f4b7d2;
        }

        .zong {
            width: 1480px;
            margin: 0 auto;
        }

        .header {
            width: 1480px;
            height: 100px;
            background-image: url(images/header.png);
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .nav {
            width: 1480px;
            height: 50px;
            padding: 20px auto;
            padding-top: 10px;
            box-sizing: border-box;
            background-color: white;
        }

        .nav img {
            display: inline-block;
            float: left;
            margin-left: 210px;
        }

        .nav table {
            margin-left: 800px;

        }

        .content {
            width: 1300px;
            height: 1000px;
            margin: 0 auto;
            border-radius: 10px;
        }

        .role1 {
            background-image: url(images/role1.jpg);
            background-repeat: no-repeat;
            background-size: 300px 200px;
            width: 300px;
            height: 200px;
            margin-top: 40px;
            margin-left: 20px;
            padding-top: 160px;
            box-sizing: border-box;
            display: inline-block;
            float: left;

        }

        .content p {
            font-size: 20px;
            line-height: 40px;
            background-color: black;
            opacity: 40%;
        }

        .content span {
            color: white;
        }

        .role2 {
            background-image: url(images/role2.png);
            background-repeat: no-repeat;
            background-size: 300px 200px;
            width: 300px;
            height: 200px;
            margin-top: 40px;
            margin-left: 20px;
            padding-top: 160px;
            box-sizing: border-box;
            display: inline-block;
            float: left;
        }

        .role3 {
            background-image: url(images/role3.jpg);
            background-repeat: no-repeat;
            background-size: 300px 200px;
            width: 300px;
            height: 200px;
            margin-top: 40px;
            margin-left: 20px;
            padding-top: 160px;
            box-sizing: border-box;
            display: inline-block;
            float: left;
        }

        .role4 {
            background-image: url(images/role4.jpg);
            background-repeat: no-repeat;
            background-size: 300px 200px;
            width: 300px;
            height: 200px;
            margin-top: 40px;
            margin-left: 20px;
            padding-top: 160px;
            box-sizing: border-box;
            display: inline-block;
            float: left;
        }

        .role5 {
            background-image: url(images/role5.jpg);
            background-repeat: no-repeat;
            background-size: 300px 200px;
            width: 300px;
            height: 200px;
            margin-top: 40px;
            margin-left: 20px;
            padding-top: 160px;
            box-sizing: border-box;
            display: inline-block;
            float: left;
        }

        .role6 {
            background-image: url(images/role6.jpg);
            background-repeat: no-repeat;
            background-size: 300px 200px;
            width: 300px;
            height: 200px;
            margin-top: 40px;
            margin-left: 20px;
            padding-top: 160px;
            box-sizing: border-box;
            display: inline-block;
            float: left;
        }

        .role7 {
            background-image: url(images/role7.jpg);
            background-repeat: no-repeat;
            background-size: 300px 200px;
            width: 300px;
            height: 200px;
            margin-top: 40px;
            margin-left: 20px;
            padding-top: 160px;
            box-sizing: border-box;
            display: inline-block;
            float: left;
        }

        .role8 {
            background-image: url(images/role8.jpg);
            background-repeat: no-repeat;
            background-size: 300px 200px;
            width: 300px;
            height: 200px;
            margin-top: 40px;
            margin-left: 20px;
            padding-top: 160px;
            box-sizing: border-box;
            display: inline-block;
            float: left;
        }

        /* .role1 img {
            cursor: pointer;
            transition: all 1s linear;
        }

        .role1:hover img {
            transform: scale(0.8);
            box-shadow: 0 3px 5px 2px;
        } */

        #t3 span {
            font: bold 20px "微软雅黑";
            color: pink;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="zong">
        <div class="header"></div>
        <div class="nav">
            <img src="images/logo.png" alt="" width="100px" height="40px">
            <table>
                <tr align="center">
                    <td width="100" id="t1"> <a href="樱桃小丸子首页.html"><span>首页</span></a></td>
                    <td width="100" id="t2"> <a href="樱桃小丸子剧情简介.html"><span>剧情简介</span></a></td>
                    <td width="100" id="t3"> <a href="樱桃小丸子角色介绍.html"><span>角色介绍</span></a></td>
                    <td width="100" id="t4"> <a href="樱桃小丸子精彩剧情.html"><span>精彩剧情</span></a></td>
                    <td width="100" id="t5"> <a href="樱桃小丸子快速登录.html"><span>快速登录</span></a></td>
                </tr>
            </table>
        </div>
        <div class="content">
            <div class="role1">
                <p><span>樱桃子（小丸子）</span></p>
            </div>
            <div class="role2">
                <p><span>樱杏子</span></p>
            </div>
            <div class="role3">
                <p><span>小林堇</span></p>
            </div>
            <div class="role4">
                <p><span>樱宏志</span></p>
            </div>
            <div class="role5">
                <p><span>樱友藏</span></p>
            </div>
            <div class="role6">
                <p><span>樱小竹</span></p>
            </div>
            <div class="role7">
                <p><span>穗波玉</span></p>
            </div>
            <div class="role8">
                <p><span>花轮和彦</span></p>
            </div>
        </div>
    </div>
</body>

</html>

三、精彩剧情

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>樱桃小丸子精彩剧情</title>
            <style>
                * {
                    margin: 0px;
                    padding: 0px;
                }

                body {
                    background-color: #f4b7d2;
                }

                .zong {
                    width: 1480px;
                    margin: 0 auto;
                }

                .header {
                    width: 1480px;
                    height: 100px;
                    background-image: url(images/header.png);
                }

                a {
                    text-decoration: none;
                    color: #000;
                }

                .nav {
                    width: 1480px;
                    height: 50px;
                    padding: 20px auto;
                    padding-top: 10px;
                    box-sizing: border-box;
                    background-color: white;
                }

                .nav img {
                    display: inline-block;
                    float: left;
                    margin-left: 210px;
                }

                .nav table {
                    margin-left: 800px;

                }

                .content {
                    width: 1100px;
                    height: 1200px;
                    margin: 0 auto;
                    border-radius: 10px;
                }

                .foot1,
                .foot2,
                .foot3,
                .foot4,
                foot5 {
                    width: 1100px;
                    height: 200px;
                    margin: 40px 0;
                }

                .content img {
                    display: inline-block;
                    float: left;
                    width: 300px;
                    height: 220px;
                }

                .con {
                    display: inline-block;
                    float: left;
                    padding: 10px;
                    background-color: white;
                    height: 200px;
                    width: 700px;
                }

                h2 {
                    margin-bottom: 20px;
                }

                .con p {
                    line-height: 30px;
                    color: #777777;
                }

                #t4 span {
                    font: bold 20px "微软雅黑";
                    color: pink;
                    text-decoration: underline;
                }
            </style>
        </head>

<body>
    <div class="zong">
        <div class="header"></div>
        <div class="nav">
            <img src="images/logo.png" alt="" width="100px" height="40px">
            <table>
                <tr align="center">
                    <td width="100" id="t1"> <a href="樱桃小丸子首页.html"><span>首页</span></a></td>
                    <td width="100" id="t2"> <a href="樱桃小丸子剧情简介.html"><span>剧情简介</span></a></td>
                    <td width="100" id="t3"> <a href="樱桃小丸子角色介绍.html"><span>角色介绍</span></a></td>
                    <td width="100" id="t4"> <a href="樱桃小丸子精彩剧情.html"><span>精彩剧情</span></a></td>
                    <td width="100" id="t5"> <a href="樱桃小丸子快速登录.html"><span>快速登录</span></a></td>
                </tr>
            </table>
        </div>
        <div class="content">
            <div class="foot1"><img src="images/footer3.png" alt="">
                <div class="con">
                    <h2>运动会的便当</h2>
                    <p>因为弟弟太郎发烧的缘故永泽的家人井没有来运动会，到了午餐的时间善良的小丸子无法放下永泽便邀请他一起吃便当，但永泽似乎对楼家的饭莱很不满意。知道此事的藤木专门过来邀请永泽，看着一旁的花轮同学永泽打算普时留下，但事情
                        井没有按照他的意愿发展，虽然永泽因为自己的原因还饿着肚子，但同学们依1日没有忘记他。</p>
                </div>
            </div>
            <div class="foot2"><img src="images/footer2.png" alt="">
                <div class="con">
                    <h2>小丸子挑战背书</h2>
                    <p>今天老师布置了背通作业，小丸子在回家的路上、家里、洗澡的时候都无时无刻不在背书，而爷爷也为了让她能診记住课文出谋划策。来到学校的小丸子询问大家记住课文的方法，丸尾等人奇怪的方法井不适合她，虽然小丸子感觉课文非常难
                        背，但家里每天吃的晚饭她却都记得很牢</p>
                </div>
            </div>
            <div class="foot3"><img src="images/footer1.png" alt="">
                <div class="con">
                    <h2>山田的笑容大奖</h2>
                    <p>报纸上面刊登了山田的照片，和平常一样的傻笑竟然获得了笑容摄影大赛的一等奖，这件事情很快便在全校传播开来，而获得这个奖项的就是小丸子认识的小宏。不小心吧小宏说出来的小丸子非第内疚，她害怕会因此给小宏带来不必要的麻烦，但小宏似乎并不在意，而真正让小宏头零的是想要当模特的美环同学。
                    </p>
                </div>
            </div>
            <div class="foot4"><img src="images/footer4.png" alt="">
                <div class="con">
                    <h2>和杉山同学投接球</h2>
                    <p>面外玩投接球的杉山同学让加代看的很入迷，在小丸子和小玉的询问下加代終于说出了自己的愿望，她无论如何也想要和 杉山同学一起玩投接球。
                        爱管闲事的小丸子为了达成加代的愿望缠上了杉山，在几次央求后杉山终于答应了她的清求，但 好不客易才能和杉山同学玩投接球的加代井没有因此留下美好的回忆。</p>
                </div>
            </div>
            <div class="foot5"><img src="images/footer5.png" alt="">
                <div class="con">
                    <h2>小丸子穿越时空之旅</h2>
                    <p>滨崎和猪太郎在打扫卫生的时候遇到了奇怪的事情，滨崎不管怎样也找不到一直在楼梯上等待自己的猪太郎，刚刚看过《旁越时空》这本书的滨崎怀疑自己寺越了时空。借回书的小丸子认真的读了起来，而关于时空的话题让她越来越感兴趣，但让她没想到的是书中的情景真的发生在了她的身边。
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

四、快速登录

源码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>樱桃小丸子快速登录</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    body {
      background-color: #f4b7d2;
    }

    .zong {
      width: 1480px;
      margin: 0 auto;
    }

    .header {
      width: 1490px;
      height: 100px;
      background-image: url(images/header.png);
    }

    a {
      text-decoration: none;
      color: #000;
    }

    .nav {
      width: 1490px;
      height: 50px;
      padding: 20px auto;
      padding-top: 10px;
      box-sizing: border-box;
      background-color: white;
    }

    .nav img {
      display: inline-block;
      float: left;
      margin-left: 210px;
    }

    .nav table {
      margin-left: 800px;

    }

    .content {
      width: 1100px;
      height: 500px;
      margin: 0 auto;
      border-radius: 10px;
    }

    .box1 {
      height: 500px;
      width: 400px;
      padding-left: 40px;
      padding-top: 80px;
      float: left;
      box-sizing: border-box;
    }

    .box2 {
      height: 500px;
      width: 400px;
      padding-left: 185px;
      padding-top: 80px;
      float: left;
      box-sizing: border-box;
      line-height: 30px;
      text-align: center;

    }

    .boxb {
      border: 0.5px solid black;
      width: 500px;
      height: 400px;
    }

    #dl {
      background-color: pink;
      color: white;
    }

    input[type] {
      width: 300px;
      height: 30px;
      margin-bottom: 60px;
    }

    #t5 span {
      font: bold 20px "微软雅黑";
      color: pink;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="zong">
  <div class="header"></div>
  <div class="nav">
    <img src="images/logo.png" alt="" width="100px" height="40px">
    <table>
      <tr align="center">
        <td width="100" id="t1"> <a href="樱桃小丸子首页.html"><span>首页</span></a></td>
        <td width="100" id="t2"> <a href="樱桃小丸子剧情简介.html"><span>剧情简介</span></a></td>
        <td width="100" id="t3"> <a href="樱桃小丸子角色介绍.html"><span>角色介绍</span></a></td>
        <td width="100" id="t4"> <a href="樱桃小丸子精彩剧情.html"><span>精彩剧情</span></a></td>
        <td width="100" id="t5"> <a href="樱桃小丸子快速登录.html"><span>快速登录</span></a></td>
      </tr>
    </table>
  </div>
  <div class="content">
    <div class="box1"><img src="images/R-C (1).jpg" alt="" width="500px" height="400px"></div>
    <div class="box2">
      <div class="boxb">
        <table align="center">
          <form action="">
            <br>
            <br>
            <p><label for="username">账号:&nbsp&nbsp</label><input type="text" id="username" name="name"></p>
            <p><label for="ps">密码:&nbsp&nbsp</label><input type="password" id="ps" name="mima"></p>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="submit" value="登录" id="dl">
          </form>
        </table>
      </div>
    </div>
  </div>
</div>
</body>

</html>