精华内容
下载资源
问答
  • 网页设计期末作业
    万次阅读 多人点赞
    2021-11-14 18:38:21

    纯HTML+CSS网页设计期末作业(个人网站)

    源码链接

    https://github.com/1075461847/pagedemo

    效果展示

    index 页面

    在这里插入图片描述

    about 页面

    在这里插入图片描述

    hobbies 页面

    在这里插入图片描述

    书籍介绍页面

    其他介绍类似
    在这里插入图片描述

    元曲介绍页面

    其他介绍类似
    在这里插入图片描述

    源码

    index.html

    <!DOCTYPE html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <div class="home">
            <div class="content">
                <div class="stars"></div>
                <img class="bgc" src="https://img.lccyj.ltd/img/tongnian.JPG" width="100%" alt="">
                <h3 class="title">欢迎来到我的个人网站</h3>
                <h3 class="titles">我时常回到童年,用一片童心思考问题,很多烦恼的问题就变得易解。</h3>
                <img class="icon" src="https://img.lccyj.ltd/img/down.png" alt="">
                <div class='ribbon'>
                    <a href='./index.html'><span>Home</span></a>
                    <a href='./about.html'><span>About</span></a>
                    <a href='./hobbies.html'><span>Hobbies</span></a>
                </div>
    
            </div>
            <div class="icons">
                <div class="icons_items">
                    <img class="icons_items_imgs" src="https://img.lccyj.ltd/img/tongxin (2).png" alt="">
                    <span>守住童心</span>
                </div>
                <div class="icons_items">
                    <img class="icons_items_imgs" src="https://img.lccyj.ltd/img/huli (2).png" alt="">
                    <span>那些小王子教会我的</span>
                </div>
                <div class="icons_items">
                    <img class="icons_items_imgs" src="https://img.lccyj.ltd/img/xiaowangzi (2).png" alt="">
                    <span>狐狸---温暖了一生</span>
                </div>
                <div class="icons_items">
                    <img  class="icons_items_imgs" src="https://img.lccyj.ltd/img/meigui (2).png" alt="">
                    <span>玫瑰---惊艳了时光</span>
                </div>
            </div>
            <div class="introduce">
                <div class="introduce_item">
                    <img class="introduce_item_img" src="https://img.lccyj.ltd/img/tongxin (2).png" alt="">
                    <span class="introduce_item_title">
                        我们整天忙忙碌碌,像一群群没有灵魂的苍蝇,喧闹着,躁动着,听不到灵魂深处的声音。时光流逝,童年远去,我们渐渐长大,岁月带走了许许多多的回忆,也消蚀了心底曾今拥有的那份童稚的纯真,我们不顾心灵桎梏,沉溺于人世浮华,专注于利益法则,我们把自己弄丢了。<br><br>
                        所有的大人都曾经是小孩,虽然,只有少数的人记得。<br><br>
                        只有用心灵才能看得清事物本质,真正重要的东西是肉眼无法看见的
                    </span>
    
                </div>
                <div class="introduce_item">
    
                    <span class="introduce_item_titles">小王子在离开了玫瑰后才明白爱的道理:“我那时什么也不懂!我应该根据她的行为,而不是她的话来判断她。她使我的生活芬芳多彩,我真不该离开她跑出来。我本应该猜出在她那笨拙的假话背后所隐藏的情爱。玫瑰花是多么的自相矛盾!可是我当时太年轻,还不懂得去爱她。”
                        <br><br>我的花生命是短暂的,她只有四根刺可以保护自己,抵御世界,我却将她独自留在我的星球上了!
                    </span>
                    <img class="introduce_item_img" src="https://img.lccyj.ltd/img/huli (2).png" alt="">
                </div>
                <div class="introduce_item">
                    <img class="introduce_item_img" src="https://img.lccyj.ltd/img/xiaowangzi (2).png" alt="">
                    <span class="introduce_item_title">狐狸说:“对我来说,你只是一个小男孩,就像其他成千上万个小男孩一样没有什么两样。我不需要你。你也不需要我。对你来说,我也只是一只狐狸,和其他成千上万的狐狸没有什么不同。但是,如果你驯养了我,我们就会彼此需要。对我来说,你就是我的世界里独一无二的了;我对你来说,也是你的世界里的唯一了。”</span>
                </div>
                <div class="introduce_item">
                    <span class="introduce_item_titles">玫瑰花:"我并非如此的弱不禁风...夜晚的凉风对我倒有好处。我是一朵花啊。"<br><br>
                        她天真地显露出她那四根刺,随后又说道: “别这么磨蹭了。真烦人!你既然决定离开这儿,那么,快走吧!” 她其实是不愿意让小王子看到自己哭泣。她曾经是多么高傲的一朵花……<br><br>
                        玫瑰在小王子离开时这样说,我当然爱你,没有让你感觉到,是我的不对。
                    </span>
                    <img class="introduce_item_img" src="https://img.lccyj.ltd/img/meigui (2).png" alt="">
                </div>
            </div>
            <!-- <audio autoplay="autoplay" id="audio" loop="loop">
                    <source src="./video/music.mp3" type="audio/MP3">
                   
            </audio>
            <img class="music_img" src="./img/music.png" alt=""> -->
        </div>
    
    </body>
    <!-- <script>
        let mucics = document.getElementById('audio')
        document.body.addEventListener('mousemove', function() {
            setTimeout(() => {
                mucics.play();
            }, 2000);
        }, false);
    </script> -->
    
    </html>
    

    index.css

    * {
        margin: 0;
        padding: 0
    }
    
    .home {
        height: 100%;
        overflow: hidden;
    }
    
    .content {
        perspective: 340px;
        width: 100%;
        position: relative;
    }
    
    h1 {
        color: white;
        text-align: center;
    }
    
    span {
        display: block;
        text-align: center;
    }
    
    .stars {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 2px;
        z-index: 999;
        border-radius: 50%;
        box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
        animation: fly 15s linear infinite;
        transform-style: preserve-3d;
    }
    
    .stars:before,
    .stars:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
    }
    
    .stars:before {
        transform: translateZ(-300px);
        opacity: .6;
    }
    
    .stars:after {
        transform: translateZ(-600px);
        opacity: .4;
    }
    
    @keyframes fly {
        from {
            transform: translateZ(0px);
            opacity: .6;
        }
        to {
            transform: translateZ(200px);
            opacity: .8;
        }
    }
    
    .title {
        position: absolute;
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        top: 300px;
        margin: auto;
        bottom: 0;
        color: #fff;
        font-size: 24px;
        font-weight: 500;
    }
    
    .titles {
        position: absolute;
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        top: 350px;
        margin: auto;
        bottom: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
    }
    
    .icon {
        width: 15px;
        height: 15px;
        padding: 5px;
        border: 2px solid #fff;
        border-radius: 100%;
        position: absolute;
        bottom: 50px;
        animation: downs 2s linear infinite;
    }
    
    @keyframes downs {
        from {
            transform: translatey(0px);
            opacity: .6;
        }
        to {
            transform: translatey(30px);
            opacity: .8;
        }
    }
    
    .ribbon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 300px;
        top: 50px;
        margin: auto;
    }
    
    .ribbon:after,
    .ribbon:before {
        margin-top: 0.5em;
        content: "";
        display: flex;
        ;
        border: 1.5em solid #fff;
    }
    
    .ribbon:after {
        border-right-color: transparent;
    }
    
    .ribbon:before {
        border-left-color: transparent;
    }
    
    .ribbon a:link,
    .ribbon a:visited {
        color: #000;
        text-decoration: none;
        height: 3.5em;
        overflow: hidden;
    }
    
    .ribbon span {
        background: #fff;
        display: inline-block;
        line-height: 3em;
        padding: 0 1.5em;
        margin-top: 0.5em;
        position: relative;
        -webkit-transition: background-color 0.2s, margin-top 0.2s;
        /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;
        /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;
        /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
    }
    
    .ribbon a:hover span {
        background: #FFD204;
        margin-top: 0;
    }
    
    .ribbon span:before {
        content: "";
        position: absolute;
        top: 3em;
        left: 0;
        border-right: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    
    .ribbon span:after {
        content: "";
        position: absolute;
        top: 3em;
        right: 0;
        border-left: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    
    .introduce {
        display: flex;
        flex-direction: column;
    }
    
    .introduce_item {
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }
    
    .introduce_item_img {
        width: 500px;
        height: 600px;
        border-radius: 10px;
    
    }
    
    .introduce_item_title {
        color: rgb(5, 39, 20);
        width: 450px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-left: 100px;
    }
    
    .introduce_item_titles {
        width: 400px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-right: 100px;
    }
    
    audio {
        position: fixed;
        bottom: 50px;
        right: 0;
    }
    
    .music_img {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 40px;
        height: 30px;
        animation: muscis 5s linear infinite;
    }
    
    @keyframes muscis {
        from {
            transform: rotate (0deg);
            opacity: .6;
        }
        to {
            transform: rotate(360deg);
            opacity: .8;
        }
    }
    
    .icons {
        display: flex;
        justify-content: space-between;
        padding: 10px 400px;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .icons_items {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        margin-top: 80px;
        margin-left: 5px;
        margin-right: 5px;
        width: 200px;
        height: 220px;
        
    }
    
    .icons_items_imgs {
        border-radius: 10%;
        width: 200px;
        height: 120px;
        margin-bottom: 30px;
    }
    

    about.html

    <!DOCTYPE html>
    <head>
        <link rel="stylesheet" href="css/about.css">
    </head>
    <body>
        <div class="about">
            <div class="stars"></div>
            <h3 class="about_tit">About me? About you!</h3>
            <img class="about_bgc" src="https://img.lccyj.ltd/img/8.JPG" alt="">
            <div class='ribbon'>
                <a href='./index.html'><span>Home</span></a>
                <a href='./about.html'><span>About</span></a>
                <a href='./hobbies.html'><span>Hobbies</span></a>
    
            </div>
            <div class="me">
                <!-- <img class="me_img" src="./img/7.JPG" alt=""> -->
                <iframe src="./me.html" scrolling="no" frameborder="0" width="800px" height="700px"></iframe>
                <span class="me_tit animate ">
                    真要开始写写自己,发现却无从写起。我了解自己吗?我想是不了解的,像现在这样与自己独处的时间,很少很少。大部分的时间都在忙碌,我也会反复逃避这样的状态,以试图拥有休闲时光。可是不久就要再度投入到忙碌的生活当中去。在生活和学习当中,我总是平衡不了。我想,这可能是要花一辈子的时间去抗衡。
                    信息大爆炸的时代,想知道想了解的东西太多了,可是理解的东西却更少了。海量的信息下,每个人都变得渺小了起来,我想我的焦虑也来源于此。我经常处于自我堵塞的状态下。我想我需要改变自己的思维了。我不再需要记忆的能力,相反,我需要的是删除的能力。我有不知情权。
                    其实,最近,我的状态也挺好的。我并没有焦虑。每一天起来也是轻快的,多了写思考,而不是做一个记忆机器。记忆的事情就交给互联网吧。也不知道过段时间再看现在写的东西,是什么感觉,希望可以起个警醒的作用吧。
                </span>
            </div>
            <div class="videos">
                <span>
                    关于你,我总是有很多话想说,可是又怕这些话不能完全表达出我的真心。你只需要知道,倘若你感知到了七分,那我必然有八分真意。关于你,我脑海里自然浮现出来的便是“幸运”和“信任”。
                    是你让我知道,哪怕我再渺小,我们在对方心中都是唯一的。跟你在一起,总能驱散我的焦虑,我只想珍惜当下的时光,收获了一份安心,这是怎样的幸运啊。至于信任,我可以毫不夸张得说,我从未如此信任过一个非亲缘关系的人。
                    哪怕之前吵架的时候,我很难受。也没有丝毫动摇我只想和你在一起的心。<br>
                    近来又读懂了“青青子衿,悠悠我心,纵我不往,子宁不嗣音?”我若不去寻你,你大可以来找我嘛。婉约是我的基调,却带来了很多不必要的误会和错过。我看犬夜叉的时候,非常心疼戈薇就是这样的,她太勇敢了,她性格太好了,简直就是天使嘛。
                    可是事实上很多人,都是桔梗和犬夜叉,会因为自我保护而误会对方,哪怕深爱对方。<br>
                    所以,哪怕结局并不美好,我也不希望最后我会怪自己。玫瑰在小王子离开的时候才意识到没有让对方感觉到自己爱他。而小王子在成长后,才明白玫瑰花是他的唯一。而我不愿我们会是这样的结局。
                </span>
                <!-- <video width="800" controls id="video" preload="auto" height="100%" autoplay="autoplay" loop="loop" type="video/mp4" src="./video/videos.mp4"></video> -->
                <img class="me_img" src="https://img.lccyj.ltd/img/7.JPG" alt="" width="100%" height="100%">
            </div>
        </div>
    </body>
    

    about.css

    * {
        margin: 0;
        padding: 0;
    }
    
    .about {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        perspective: 340px;
    }
    
    .about_bgc {
        height: 800px;
        width: 100%;
    }
    .stars {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3px;
        height: 3px;
        z-index: 999;
        border-radius: 50%;
        box-shadow: -447px 387px #d1abab, -401px 118px #fcdfdf, -109px 217px #d6bbbb, -680px -436px #dfc2c2, 514px 360px #c29a9a, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dabfbf, 327px -398px #ddc0c0, -602px -38px #c0a3a3, 128px 398px #e4b4b4, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e2bbbb, -179px -372px #f1c8c8, 143px -317px #d4c3c3, -449px -149px #ffd5d5, -544px 250px #ddbcbc, -220px -323px rgb(250, 228, 228), 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
        animation: fly 15s linear infinite;
        transform-style: preserve-3d;
    }
    
    .stars:before,
    .stars:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
    }
    
    .stars:before {
        transform: translateZ(-300px);
        opacity: .6;
    }
    
    .stars:after {
        transform: translateZ(-600px);
        opacity: .4;
    }
    
    @keyframes fly {
        from {
            transform: translateZ(0px);
            opacity: .6;
        }
        to {
            transform: translateZ(180px);
            opacity: .8;
        }
    }
    .about_tit {
        position: absolute;
        color:white;
        top: 280px;
        left: 0;
        right: 0;
        font-size: 28px;
        font-weight: 550;
        bottom: 0;
        width: 800px;
        margin: auto;
        text-align: center;
    }
    
    .ribbon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 300px;
        top: 50px;
        margin: auto;
    }
    
    .ribbon:after,
    .ribbon:before {
        margin-top: 0.5em;
        content: "";
        display: flex;
        ;
        border: 1.5em solid #fff;
    }
    
    .ribbon:after {
        border-right-color: transparent;
    }
    
    .ribbon:before {
        border-left-color: transparent;
    }
    
    .ribbon a:link,
    .ribbon a:visited {
        color: #000;
        text-decoration: none;
        height: 3.5em;
        overflow: hidden;
    }
    
    .ribbon span {
        background: #fff;
        display: inline-block;
        line-height: 3em;
        padding: 0 1.5em;
        margin-top: 0.5em;
        position: relative;
        -webkit-transition: background-color 0.2s, margin-top 0.2s;
        /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;
        /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;
        /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
    }
    
    .ribbon a:hover span {
        background: #FFD204;
        margin-top: 0;
    }
    
    .ribbon span:before {
        content: "";
        position: absolute;
        top: 3em;
        left: 0;
        border-right: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    
    .ribbon span:after {
        content: "";
        position: absolute;
        top: 3em;
        right: 0;
        border-left: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    
    .me {
        display: flex;
        justify-content: center;
        margin-top: 60px;
        overflow: hidden;
    }
    
    .me_tit {
        width: 600px;
        line-height: 36px;
        font-size: 18px;
        margin-left: 100px;
        margin-top: 50px;
    }
    
    .me_img {
        width: 800px;
        height: 700px;
    }
    
    .animate {
        margin-top: 100px;
        padding-left: 20px;
        width: 500px;
        font-size: 16px;
        color: #5c1d06;
        /* animation: 10s wordsLoop linear infinite normal; */
    }
    /* 
    @keyframes wordsLoop {
        0% {
            transform: translateY(100px);
            -webkit-transform: translateY(100px);
        }
        100% {
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
        }
    } */
    @keyframes fly {
        from {
            transform: translateZ(0px);
            opacity: .6;
        }
        to {
            transform: translateZ(200px);
            opacity: .8;
        }
    }
    .videos {
        display: flex;
        margin-top: 60px;
        padding-bottom: 80px;
    }
    
    .videos span {
        /* width: 400px; */
        margin-top: 50px;
        margin-right: 100px; 
        margin-left: 100px;
        /* color: #5c1d06 */
        /* padding-left: 20px; */
        width: 600px;
        font-size: 16px;
        color: #5c1d06;
        line-height: 36px;
    }
    
    

    hobbies.html

    <!DOCTYPE html>
    <head>
        <link rel="stylesheet" href="css/hobbies.css">
    </head>
    <body>
    <div class="hobbies">
            <div class="stars"></div>
            <h3 class="hobbies_tit">衣带渐宽终不悔,为伊消得人憔悴。</h3>
            <h3 class="titles">生活啊,尽情舞蹈吧</h3>
            <img class="hobbies_bgc" src="https://img.lccyj.ltd/img/1.JPG" alt="">
            <div class='ribbon'>
                <a href='./index.html'><span>Home</span></a>
                <a href='./about.html'><span>About</span></a>
                <a href='./hobbies.html'><span>Hobbies</span></a>
    
            </div>
    
        <!-- / -->
       <div class="book">
        <div class="conBigTitle">
            <h2>图书</h2>
            <p>
                <a href="#" target="_blank">书中自有黄金屋</a>|
                <a href="#" target="_blank">书中自有颜如玉</a>
            </p>
        </div>
        <div class="show">
            <s class="sign"></s>
            <div class="showLeft">
                <h3><a href="./book1.html" title="杀死一只知更鸟" target="_blank">杀死一只知更鸟</a></h3>
                <p class="author">作者:哈珀·李</p>
                <p class="introduce">《杀死一只知更鸟》二十世纪三十年代,大萧条时期美国南部的一个小镇,三个孩子平静的生活被两桩冤案彻底打破。传闻与事实,坚强与软弱,正义与邪恶,忠诚与背叛,他们在痛苦与矛盾中艰难地拨开生活的重重迷雾,见证了人性的污秽与光辉,理解了真相的残忍与无奈,也感受了人间的温暖与真情。</p>
                <span>
                    <a href="./book1.html" target="_blank" title="杀死一只知更鸟">
                        <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/8eddae71/group6/M00/C9/29/CmQUNliwAvqEd43OAAAAAEKQN1s737631726.jpg?v=5pw9ExG9&t=CmQUNl6Itpo." title="杀死一只知更鸟" alt="杀死一只知更鸟" class="bookCover lazy">
                    </a>
                    <img src="//pweb.d.ireader.com/static/images/index/shadow.gif" alt="杀死一只知更鸟" class="shadow">
                </span>
            </div>
            <ul class="showMid">
                <li>
                    <a href="./book2.html" target="_blank" title="三体">
                        <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/08c0f360/group61/M00/9C/7A/CmQUOVycjHiEHEavAAAAAAqB0h8765287492.jpg?v=zzHQJdFa&t=CmQUOV6IxR4." title="三体" alt="三体" class="lazy">
                    </a>
                    <p class="bookName">
                        <a href="./book2.html" title="三体" target="_blank">三体</a>
                    </p>
                    <p>刘慈欣</p>
                </li>
                <li>
                    <a href="#" target="_blank" title="东方快车谋杀案">
                        <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/df3739e2/group6/M00/5E/7E/CmRaIVso1IiEXmfBAAAAACIOS7I167274228.jpg?v=nYLsetif&t=CmQUN2ERWkg." title="东方快车谋杀案" alt="东方快车谋杀案" class="lazy">
                    </a>
                    <p class="bookName">
                        <a href="#" title="东方快车谋杀案" target="_blank">东方快车谋杀案</a>
                    </p>
                    <p>阿加莎</p>
                </li>
                <li class="tb">
                    <a href="#" target="_blank" title="活着">
                        <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/5dd12d3b/group6/M00/2B/41/CmQUOFcMj9CEBj_gAAAAAI1eU64427806210.jpg?v=pM2Jvx9M&t=CmQUN16Is6s." title="活着" alt="活着" class="lazy">
                    </a>
                    <p class="bookName">
                        <a href="#" title="活着" target="_blank">活着</a>
                    </p>
                    <p>余华</p>
                </li>
                <li class="tb">
                    <a href="./book3.html" target="_blank" title="月亮和六便士">
                        <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/a664a4b6/group6/M00/BB/58/CmQUN1oVRnKEBKybAAAAANegkxw978046032.jpg?v=aZusShmL&t=CmQUN16IuYQ." title="月亮和六便士" alt="月亮和六便士" class="lazy">
                    </a>
                    <p class="bookName">
                        <a href="./book3.html" title="月亮和六便士" target="_blank">月亮和六便士</a>
                    </p>
                    <p>毛姆</p>
                </li>
                        </ul>
            <div class="showRight">
                <h3><s class="crown"></s><a href="#" target="_blank">书单</a></h3>
                <ul>
                    <li class="onShow">
                        <dl class="open">
                            <dt>1</dt>
                            <dd>
                                <div>
                                    <span class="bookPic">
                                        <a href="#" target="_blank" title="百年孤独">
                                            <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/da3637c4/group6/M00/E7/EC/CmQUNlsLwkaECSEsAAAAAJOpcg0715902694.jpg?v=oMXJSqI4&t=CmQUNl6Iu9M."  class="lazy"/>                                    </a>
                                    </span>
                                    <div class="bookCon">
                                        <p>
                                            <a href="#" title="百年孤独" target="_blank">百年孤独</a><br>
                                            <span class="num">马尔克斯</span>
    
                                        </p>
                                    </div>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="close">
                            <dt>2</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="悲惨世界" target="_blank">悲惨世界&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;维克多·雨果 </a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                     <li>
                        <dl class="close">
                            <dt>3</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="百年孤独" target="_blank">白夜行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;东野圭吾</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="close">
                            <dt>4</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="百年孤独" target="_blank">不能承受的生命之轻</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="close">
                            <dt>5</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="百年孤独" target="_blank">霍乱时期的爱情</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="close">
                            <dt>6</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="百年孤独" target="_blank">柑橘与柠檬</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="close">
                            <dt>7</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="百年孤独" target="_blank">万历十五年</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="close">
                            <dt>8</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="百年孤独" target="_blank">尼罗河谋杀案</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="close">
                            <dt>9</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="百年孤独" target="_blank">乡村教师 大刘</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                                    <li>
                        <dl class="close">
                            <dt>10</dt>
                            <dd>
                                <span class="bookName">
                                    <a href="#" title="三生三世:步生莲(壹)化茧" target="_blank">苏菲的世界</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
       </div>
       
        <div class="sel_Cir">
            <div class="conBigTitle">
                <h2>野兽回来了</h2>
         
            </div>
            <div class="cirShow">
                <ul class="cirBig">
                    <li>
                        <span class="cirHead">
                            <a href="./tangshi.html"  target="_blank">
                                <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/ce16384b/group6/M00/EF/08/CmQUNlswWuGEI-P_AAAAAGcokYo470353353.jpg?v=zCb05qFg&t=CmQUNlswWuE." title="唐诗" alt="唐诗" class="lazy"/>
                            </a>
                            <s class="fire"></s>
                        </span>
                        <h3><a href="./tangshi.html" title="唐诗" target="_blank">唐诗</a></h3>
                        <p class="little">有时只是一首诗,我们就找回对世界的初恋.</p>
                        <span class="attent">
                            <s class="fans"></s>
                            <i>今夕何夕,见此良人</i>
                            <s class="cards"></s>
                            <i></i>
                        </span>
                    </li>
                    <li class="middle">
                        <span class="cirHead">
                            <a href="./songci.html" target="_blank">
                                <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/b1fb4c32/group6/M00/EF/08/CmQUNlswW06Ec5WmAAAAACImj3c976890971.jpg?v=pEoO4QEx&t=CmQUNlswW04." title="宋词" alt="宋词" class="lazy"/>
                            </a>
                            <s class="fire"></s>
                        </span>
                        <h3><a title="宋词" href="./songci.html" target="_blank">宋词</a></h3>
                        <p class="little">诗情画意,人间绝美</p>
                        <span class="attent">
                            <s class="fans"></s>
                            <i>相思本是无凭语,莫向花笺费泪行</i>
                            <s class="cards"></s>
                            <i></i>
                        </span>
                    </li>
                    <li>
                        <span class="cirHead">
                            <a target="_blank" href="./yuanqu.html">
                                <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/bfadaf77/group6/M00/EF/11/CmQUN1swh_mEfkV0AAAAANKnaaU020118518.jpg?v=Q1NQqWqL&t=CmQUN1swh_k." alt="元曲" class="lazy"/>
                            </a>
                            <s class="fire"></s>
                        </span>
                        <h3><a href="/.yuanqu.html"  target="_blank">元曲</a></h3>
                        <p class="little">街市小令”或“村坊小调"</p>
                        <span class="attent">
                            <s class="fans"></s>
                            <i></i>新秋至,人乍别,顺长江水流残月。悠悠画船东去也,这思量起头儿一夜。
                            <s class="cards"></s>
                            <i></i>
                        </span>
                    </li>
                </ul>
    
                <div class="zwtit"><img src="" alt=""></div>
                <ul class="cirLittle zwqz">
                                <li>
                        <span class="litHead">
                            <a href="#" target="_blank">
                                <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/71fee514/group6/M00/1C/74/CmRablswwt2EKu2UAAAAAOQZ58o026610528.jpg?v=w64zJDdg&t=CmRablswwt0." alt="博客">
                            </a>
                        </span>
                        <div class="bookCon">
                            <h3><a  target="_blank">博客</a></h3>
                            <p>0部作品</p>
                        </div>
                    </li>
                    <li>
                        <span class="litHead">
                            <a  target="_blank">
                                <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/2ab99546/group6/M00/EF/16/CmQUNlswbOaEQwe_AAAAAIWAkFQ186283339.jpg?v=8N8Z8LMS&t=CmQUNlswbOY." alt="绘画">
                            </a>
                        </span>
                        <div class="bookCon">
                            <h3><a  target="_blank">绘画</a></h3>
                            <p>0部作品</p>
                        </div>
                    </li>
                    <li>
                        <span class="litHead">
                            <a  target="_blank">
                                <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/467cba7c/group6/M00/1C/2F/CmRae1swXU6EKGW2AAAAAJBPyUs060526757.jpg?v=j5BKgYCC&t=CmRae1swXU4." alt="散文">
                            </a>
                        </span>
                        <div class="bookCon">
                            <h3><a  target="_blank">散文</a></h3>
                            <p>0部作品</p>
                        </div>
                    </li>
                    <li>
                        <span class="litHead">
                            <a  target="_blank">
                                <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/8c743f75/group6/M00/1D/00/CmRaelszMT-EDFwHAAAAAKqS8cs181978067.jpg?v=48satnrL&t=CmRaelszMT4." alt="小说">
                            </a>
                        </span>
                        <div class="bookCon">
                            <h3><a  target="_blank">小说</a></h3>
                            <p>0部作品</p>
                        </div>
                    </li>
                    <li>
                        <span class="litHead">
                            <a  target="_blank">
                                <img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/4c61e2a0/group6/M00/EF/09/CmQUNlswW6iEAzRwAAAAANMnZTE319229773.jpg?v=ewnsQJEf&t=CmQUNlswW6g." alt="信件">
                            </a>
                        </span>
                        <div class="bookCon">
                            <h3><a  target="_blank">信件</a></h3>
                            <p>0部作品</p>
                        </div>
                    </li>
            </ul>
        </div>
    </div>
    </div>
    
    </body>
    
    

    hobbies.css

    * {margin: 0;padding: 0;list-style: none;}
    body{ color: #220a05; background: #313A25; font-weight: normal; }
    img{border: none;}
    a{text-decoration: none; outline:none;  color: #4d1d12;}
    a:hover{color: #ee8040;}
    
    input{outline: none; border: none; background: none;font-family:"Microsoft Yahei", arial,sans-serif;}
    h1,h2,h3,h4,h5,p{font-family:"Microsoft Yahei", arial,sans-serif; }
    em,h2,h1,h3,i{font-style: normal; font-weight: normal;}
    em,span{display: inline-block;}
    
    .hobbies {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        perspective: 340px;
    
    }
    
    .hobbies_bgc {
        height: 800px;
        width: 100%;
    }
    .stars {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 2px;
        z-index: 999;
        border-radius: 50%;
        box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
        animation: fly 15s linear infinite;
        transform-style: preserve-3d;
    }
    
    .stars:before,
    .stars:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
    }
    
    .stars:before {
        transform: translateZ(-300px);
        opacity: .6;
    }
    
    .stars:after {
        transform: translateZ(-600px);
        opacity: .4;
    }
    
    @keyframes fly {
        from {
            transform: translateZ(0px);
            opacity: .6;
        }
        to {
            transform: translateZ(180px);
            opacity: .8;
        }
    }
    .hobbies_tit {
        position: absolute;
        color:white;
        top: 280px;
        left: 0;
        right: 0;
        font-size: 28px;
        font-weight: 550;
        bottom: 0;
        width: 800px;
        margin: auto;
        text-align: center;
    }
    .titles {
        position: absolute;
        color:white;
        top: 350px;
        left: 0;
        right: 0;
        font-size: 28px;
        font-weight: 550;
        bottom: 0;
        width: 800px;
        margin: auto;
        text-align: center;
    }
    .ribbon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 300px;
        top: 50px;
        margin: auto;
    }
    
    .ribbon:after,
    .ribbon:before {
        margin-top: 0.5em;
        content: "";
        display: flex;
        ;
        border: 1.5em solid #fff;
    }
    
    .ribbon:after {
        border-right-color: transparent;
    }
    
    .ribbon:before {
        border-left-color: transparent;
    }
    
    .ribbon a:link,
    .ribbon a:visited {
        color: #000;
        text-decoration: none;
        height: 3.5em;
        overflow: hidden;
    }
    
    .ribbon span {
        background: #fff;
        display: inline-block;
        line-height: 3em;
        padding: 0 1.5em;
        margin-top: 0.5em;
        position: relative;
        -webkit-transition: background-color 0.2s, margin-top 0.2s;
        /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;
        /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;
        /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
    }
    
    .ribbon a:hover span {
        background: #FFD204;
        margin-top: 0;
    }
    
    .ribbon span:before {
        content: "";
        position: absolute;
        top: 3em;
        left: 0;
        border-right: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    
    .ribbon span:after {
        content: "";
        position: absolute;
        top: 3em;
        right: 0;
        border-left: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    
    }
    
    
    .book{
        margin-left: 250px;
        margin-right: 250px;
        font:12px/20px "Microsoft Yahei", arial,sans-serif; 
        animation: downs 2s linear infinite;
    
    }
    .pubBook{overflow: hidden;}
    .conBigTitle{width: 1000px; text-align: center; padding: 44px 0 30px 0; }
    .conBigTitle h2{font-size: 26px; color: white; height: 36px;}
    .conBigTitle p{color: white;}
    .conBigTitle p a{ margin: 0 4px;color: white;}
    
    .show{width:1000px; height: 526px; background: rgb(252, 252, 241); position: relative; }
    .show .sign{width: 63px; height: 63px; background-position: -26px 0; position: absolute; left: 0; top: 0;}
    .show .showLeft{width: 246px; height: 481px; padding: 45px 56px 0; float: left;}
    .show .showLeft h3{width: 246px; height: 22px; font-size: 20px; font-weight: 300; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis; color: #7c4639;} 
    .show .showLeft .author{margin: 10px 0 20px 0;}
    .show .showLeft .introduce{ width: 246px;  height: 64px; overflow: hidden; margin-bottom: 94px; line-height: 16px; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 4; -webkit-box-orient: vertical;  position:relative;}
    
    .show .showLeft span{width: 158px; height: 190px; float: right;  position: relative;}
    .show .showLeft img{position: absolute; z-index: 1;}
    .show .showLeft .bookCover{width: 156px; height: 208px; }
    .show .showLeft .shadow{position: absolute; right: -20px; bottom:-20px; z-index: 0}
    .show .showMid{float: left;  width: 358px; border-left: 1px solid #2b0505; box-sizing: border-box;}
    .show .showMid li{float: left; width: 101px; padding: 40px 38px 42px; border-right: 1px solid #2b0505;}
    .show .showMid li img{width: 102px; height: 136px;}
    .show .showMid li p{width: 104px; height: 20px; overflow: hidden;}
    .pubBook .showMid li p{width: 104px; height: 20px; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}
    .pubBook .showMid li .bookName{color: #212121;}
    .show .showMid li p a{color: #4d1d12;}
    .show .showMid li p a:hover{color: #f26552;}
    .show .showMid .tb{border-top: 1px solid #2b0505;}
    
    .show .showRight{float: left; width: 253px; padding: 28px 0 0 30px;}
    .show .showRight h3{width: 228px; height: 30px; font-size: 20px; color: #f26552; position: relative; padding-left: 28px; font-weight: 300;} 
    .show .showRight .crown{width: 21px; height: 18px; background-position: 0px -68px; float: left; position: absolute; left: 0; top:2px;}
    .show .showRight li,.show .showRight dl{overflow: hidden;}
    .show .showRight .open{padding-top: 16px;}
    .show .showRight dl dt{float: left; text-align: right; width: 10px; margin-right: 18px;}
    .show .showRight dl dd{float: left; border-bottom: 1px solid #dfdfdf; width: 200px;}
    .show .showRight .open dd .bookPic{width: 63px; height: 84px; display: block;  border: 1px solid #2b0505; float: left; margin: 0 16px 16px 0;}
    .show .showRight li .bookPic img{width: 63px; height: 84px;}
    .show .showRight .open dd .bookCon{float: left; }
    .show .showRight .open dd .bookCon .num{font-size: 12px; font-family: arial;}
    .show .showRight .open dd .bookCon p{color: #7c4639;  width: 100px; max-height: 32px; line-height: 16px;  text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
    .show .showRight .open dd .bookCon p a{color: #7c4639;}
    .show .showRight .open dd .bookCon p a:hover{color: #f26552;}
    .show .showRight dl dd s{float: left; width: 14px; height: 9px; background-position: -86px -73px; margin: 6px 6px 0 0;}
    .show .showRight .close dd{width: 200px; height: 35px; line-height: 35px;}
    .show .showRight .close dt{line-height: 35px;}
    .show .showRight .close dd .bookName{width: 130px; height: 24px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; float: left;}
    .show .showRight .close dd .num{float: right;  font-size: 12px; font-family: arial; float: left; margin-left: 10px}
    .show .showRight .close dd s{margin-top: 12px;}
    .show .showRight li .open{display: none;}
    .show .showRight .onShow .open{display: block;}
    .show .showRight .onShow .close{display: none;}
    
    
    /* */
    .sel_Cir{
        margin-left: 250px;
        margin-right: 265px;
        font:12px/20px "Microsoft Yahei", arial,sans-serif; 
    
    }
    .cirShow{/*height: 420px;*/ background: rgb(252, 252, 241); overflow: hidden;}
    .cirBig{ width: 1000px; height: 292px; border-bottom: 1px solid #313A25;}
    .cirBig .middle{  border-left: 1px solid #313A25;  border-right: 1px solid #313A25; width: 331px;}
    .cirBig li{width: 333px;   height: 242px; float: left; text-align: center; padding-top: 50px;}
    .cirBig .cirHead{width: 80px; height: 80px; border-radius: 50%; position: relative;}
    .cirBig .cirHead .fire{width: 24px; height: 24px; position: absolute; right: 0; top: 0; background-position: -23px -66px;}
    .cirBig .cirHead img{width: 100%; height: 100%; border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%;}
    .cirBig li h3{font-size: 18px; width: 242px; height: 20px; overflow: hidden; margin: 16px auto 8px; color: #212121; white-space: nowrap; text-overflow: ellipsis;}
    .cirBig li h3 a:hover{color: #f26552;}
    .cirBig li .little{ width:226px; height: 32px; line-height: 16px; overflow: hidden; margin: 0 auto; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .cirBig li .attent{margin-top: 20px;}
    .cirBig li .attent s{float: left; width: 17px; height: 18px; background-position: -49px -68px; margin: 0 8px 0 10px;}
    .cirBig li .attent i{float: left; font-size: 14px;}
    .cirBig li .attent .cards{background-position: -68px -68px; }
    .cirLittle{padding: 0 40px; height: 129px;}
    .cirLittle li{width: 162px; padding: 30px 0 0 22px; overflow: hidden; float: left;}
    .cirLittle li .litHead{width: 60px; height: 60px; border-radius: 50%; float: left;}
    .cirLittle li h3{color: #212121;  width: 64px; height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .cirLittle li .litHead img{width: 100%; height: 100%; border-radius: 50%;}
    .cirLittle li .bookCon{float: left; padding-left: 10px;}
    .cirLittle li h3{font-size: 16px; margin-bottom: 2px;}
    .cirLittle li .bookCon .fans{float: left; width: 14px; height: 14px; background-position: -50px -99px; margin: 3px 4px 0 0;}
    .cirLittle li .bookCon p{ height: 18px; font-size: 12px;}
    .cirLittle li .bookCon .cards{float: left; width: 14px; height: 15px; background-position: -70px -99px; margin: 4px 4px 0 0;}
    
    

    me.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/me.css">
    <title>个人介绍</title>
    </head>
    	
    <body>
        <div class="jianli">
            <div class="left">
                <div class="head"></div>
                <div class="container">
                  <image class="ima" src="https://img.lccyj.ltd/img/me.JPG">
                  <span>XXX</span> 
                  </image>
                </div>
                <div class="bottom"></div>
            </div>
            <div class="right">
                <div class="first">
                    <span></span>
                    <span>教育背景/Eudcation</span>
                </div>
                <div class="second">
                  <div class="edu">
                  <span>XX大学软件学院</span>
                  <span>XX专业/本科</span>
                  </div>
                  <span>毕业时间:2019.09-2023.06</span>
              </div>
              <div class="first">
                <span></span>
                <span>个人介绍/Introduction</span>
              </div>
                <ul class="third">
                  <li class="title">爱好:</li>
                  <li class="other">看电影、阅读、打乒乓球、画画、玩游戏</li>
                  <li class="title">性格:</li>
                  <li class="other">性格因心情而定,偏内向,倾向于和少数人交流</li>
                  <li class="title">其他:</li>
                  <li class="other">喜欢植物,喜欢动物,除了狗和蛇</li>
                  <li class="other">喜欢纯理论,喜欢机械和爆炸</li>
                  <li class="other">喜欢诗经和汉乐府,因为美好。喜欢魏晋时,不精细,但有力</li>
                  <li class="other">喜欢唐诗,唐诗豁达。略喜欢宋词,宋词哀婉。不喜欢元曲,元曲幽怨。</li>
                  <li class="other">喜欢安静,但也不介意喧嚣</li>
                  <li class="other">终极矛盾患者</li>
                </ul>
                <div class="four">
                  <!-- #BeginDate format:Ch1 -->21/9/30 <!-- #EndDate -->
                </div>
                </div>
               
            </div>
        </div>
    </body>
    </html>
    <hr />
    
    

    me.css

    /* body{
        max-width: 1000px;
        margin: 50px auto;
        font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei";
        color: #000;
        background: #f2f2f2;
        overflow-x: hidden;
        -webkit-tap-highlight-color:transparent;
        height: 2000px;
    } */
    div{
        box-sizing: border-box;
    }
    
    .jianli{
        display: flex;
        height: 640px;
        
    }
    .left{
        border: #501804 1px solid;
        display: flex;
        flex-direction: column;
        flex: 3;
        /* background-color: aquamarine; */
    }
    .left .head{
        flex: 1;
        /* background-color: #0071C1; */
        background-color: #ffede6;
        height: 100px;
    }
    .left .container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 8;
        /* background-color:#ece4e4; */
    }
    .container .ima{
        height: 400px;
        width: 240px;
    }
    .container span{
        margin-top: 15px;
        font-size: 30px;
        color: #CC9E8D;
    }
    .left .bottom{
        flex: 1;
        background-color: #ffede6;
        height: 100px;
    }
    .right{
        display: flex;
        flex-direction: column;
        flex: 7;
    }
    .right .first{
        display: flex;
        flex: 1; 
        font-size:  25px;
        color: #CC9E8D;
        margin-left: 50px;
        border-bottom: solid 1px #413f3f;
        align-items: flex-end;
    
    }
    .first span{
        margin-bottom: 10px;
    }
    .right .second{
        margin-left: 50px;
        font-size:  18px;
        color: #CC9E8D;
        display: flex;
        flex: 0.8;
        flex-direction: column;
    }
    .second .edu{
        display: flex;
        margin:10px 0;
    }
    .edu span{
        flex: 1;
    }
    .edu span:nth-child(2){
        margin-left: 330px;
    }
    .right .third{
        flex: 4;
        display: flex;
        flex-direction: column;
    }
    .third span{
        flex: 1;
    }
    .title{
        margin-left: 10px;
        font-size: 18px;
        color: #CC9E8D;
        list-style: none;
    }
    .other{
        margin-left: 40px;
        font-size: 15px;
        color: #5c1d06;
        padding-left: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .four{
      display: flex;
      justify-content: flex-end;
    }
    
    

    book1.html

    <!DOCTYPE html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/book.css">
    </head>
    <body>
        <div class="home">
            <div class="content">
                <div class="stars"></div>
                <img class="bgc" src="https://img.lccyj.ltd/img/book_bgc.JPG" width="100%" alt="">
                <h3 class="title">《杀死一只知更鸟》</h3>
                <h3 class="titles">
                    ①宁可欺骗一个大人,也不要欺骗一个孩子。<br><br>
                    
                    当一个孩子问你问题时,你要正儿八经地回答,不要东­拉西扯,顾左右而言他。<br>虽说孩子毕竟只是孩子,但他们会比成人更敏锐地察觉到你在回避问题,回避只会让他们糊里糊涂。<br><br>
                    
                    ②我们一路奋战,不是为了改变世界,而­是为了不让世界改变我们。<br><br>
                    
                    我想让你见识一下什么是真正的勇敢,而不要错­误地认为一个人手拿钢枪就是勇敢.<br>勇敢是,当你还未开始,便知道自己会输,可你依然要去做,而­且无论如何都要把它坚持到底,你很少能赢,但有­时也会。<br><br>
                    
                    ③像尊重自己一样去尊重他人,像尊­重天使一样去尊重怿物。<br><br>
                    
                    除非你穿上一个人的鞋子,像他那样走来走去,否­则你永远不会真正了解一个人。<br><br><br><br>
                    内容简介:<br>
                    20世纪30年代,大萧条时期美国南部的一个小镇。孤儿男孩迪儿来到梅康镇找他的姨姨过暑假,杰姆和斯库特与他成为朋友。三个孩子被他们的隐居邻居所深深吸引,那个邻居叫做阿瑟·拉德利,令人生畏。梅科姆镇的人们不愿谈及拉德利,在许多年后也没有人见过他。孩子们则利用谣言编造了各种故事,推测背后隐藏的玄机,并设计一个计划引他出门。在之后的两个暑假中,三个孩子发现,有人在拉德利家外的树上常给他们留小礼物,有时,这个神秘的布向孩子们示好,但令人遗憾的是,布从来没有亲自出现过。
                    阿蒂克斯被法院指定为汤姆·鲁滨逊辩护,后者是一位黑人,他被控强奸一位白人少女马耶拉·尤厄尔。虽然许多梅科姆镇人表示反对,但阿蒂克斯同意为汤姆辩护,有的孩子因阿蒂克斯而嘲笑杰姆和斯库特,称他们的父亲是“爱黑鬼的家伙”。斯库特甚至被挑衅为她父亲的荣誉而打架,而父亲告诉他别这么做。而阿蒂克斯面对一群想要将汤姆处以私刑的人,由于斯库特、杰姆和迪儿的突然出现,使得暴徒们不得不被迫从阿蒂克斯与汤姆的角度来考虑问题,因此倍感羞愧,四散离去,危机得到了化解。
                    因为阿蒂克斯不想让孩子们出席汤姆·鲁滨逊的审判,斯库特、杰姆和迪儿只能从有色人种观礼台上悄悄旁听。阿蒂克斯假设原告马耶拉和她嗜酒的父亲鲍伯·尤厄尔撒谎。并不友好的马耶拉主动向汤姆施加诱惑,而她父亲为此对她大打出手。虽然汤姆的无辜显而易见,但陪审团依然判他有罪。当绝望的汤姆越狱被杀时,杰姆与阿蒂克斯对司法公正的信念受到了极大的打击。虽然鲍伯·尤厄尔胜诉,但他的名声扫地,他气急败坏的誓言报复。鲍伯当街啐了阿蒂克斯的脸,试图闯入审判法官的家骚扰汤姆·鲁滨逊的遗孀。最后,一天晚上,当杰姆和斯库特从学校的万圣节盛会回家的时候,鲍伯突然对他们痛下毒手。杰姆的胳膊在打斗中折断,但在混乱中,一位陌生人救出了孩子们,这位神秘人将杰姆扛回家,斯库特认出他就是阿瑟·拉德利。梅科姆镇的警长来到并发现鲍伯·尤厄尔死于缠斗。警长与阿蒂克斯进行辩论,试图确认杰姆和鲍伯俩人谁该负责。阿蒂克斯最终接受了警长的观点:尤厄尔摔到了自己的刀上。拉德利请斯库特送他回家,在道别之后,他再度消失。站在拉德利的门外,斯库特为他们无法偿还之前的礼物而深表遗憾。<br><br>
                    <br>
                    作者简介  · · · · · ·
                    哈珀•李(1926— ):<br>
    
                    生于美国阿拉巴马州, 曾被授予普利策小说奖及其他众多文学奖项。她与杜鲁门•卡坡蒂是幼年的邻居和一生的朋友。《杀死一只知更鸟》据说是以卡坡蒂为原型之一创作的,现已成为公认的美国文学经典。此后,她一直隐居在家乡亚拉巴马的小镇上 ,拒绝各种采访,过着平静的生活。有人问她为什么不在盛名之下接着写作,她回答:“有过这样一次,还有什么可写的?”
                    <br><br><br>
                    书评:<br>
    
                    一直以来我都在琢磨到底什么是教养,是不是穿阿玛尼比穿班尼路有教养?后来我明白,穿阿玛尼确实比穿班尼路更体面,教养却谈不上。那教养究竟是个什么玩意儿?看完《杀死一只反舌鸟》我明白:教养太复杂,但首先应是正义,正义是一种教养。
                    <br><br>
                    20世纪30年代美国南方,律师带着一双儿女,他们生活平淡,孩子的童年没什么不幸,玩闹着长大。一次,他们邀请家境贫困的同学来家中吃饭,这同学吃饭的方式奇怪,几乎将一升糖浆倒在食物上,小女孩不解地问他在做什么。仆人将女孩带到厨房说:他是你的客人,就算他要吃桌布,你也不能说什么。有一年,两个孩子从亲戚那收到两支气枪作为圣诞礼物。他们的父亲对这份礼物并不满意,认为气枪是上帝给了他们一个对其他动物不公平的优势。
                    <br><br>
                    平静的日子被一件事打乱,父亲为一位被指控强奸白人女孩的黑人辩护。县里的人觉得他发了疯,麻烦纷至沓来。孩子在学校受到辱骂,认为他们的父亲“为黑鬼帮腔”丢尽了脸。同学的辱骂激怒了小女孩,她对同学拳脚相向。回到家里,父亲知道她打架的原因后对她说:“愚昧低贱的人每当觉得有人关爱黑人胜过关爱他们时,就会拿它来骂人……如果别人认为那是个下贱的说法并用来称呼你,对你来说永远构不成侮辱。他只能显示那个人有多可怜”,父亲让他们做的是:昂起头,走过去,作一位绅士。
                    <br><br>
                    在法庭上,律师尽力为黑人辩护,事实的真相是白人女孩勾引了黑人,被其父撞破,黑人慌乱中逃走,白人女孩谎称被强奸。但陪审团判他有罪,他黑色的皮肤就是罪恶。女儿望着失望的父亲走出法庭,周围的黑人全部站了起来,她身边的人轻轻地提醒她:“琼·露易丝小姐,起立。你的父亲要经过这里了。”
                    <br><br>
                    故事没有结束,失望的一家人被周围人责难,但痛苦更多来源于对正义的追问:这不公平,在打官司的时候,大家知道真相,但总有一部分人会赢,因为既定的无知偏见和独断的权力。父亲说,这个时候仿佛只有孩子才会哭。在他们玩弄起那两支气枪之时,父亲说:“你射多少蓝鸟都没有关系,但是记住,杀死一只知更鸟就是一桩罪恶。”因为它们只唱歌给人听,什么坏事也不做。
                    <br><br>
                    看到这,我徒然增添了自信。若我以后要当谁的母亲,我也要告诉他:孩子,杀死一只知更鸟是一桩罪恶。在很多年前,有一些跟妈妈年纪相仿的叔叔阿姨,他们用心地唱歌给这个国家听,但是他们永远就停留在妈妈这个年纪。那是这个国家最没有教养的时刻。
                    <br><br>
                    我还会对他说,孩子,你要保持敬畏,那种男人对女人的敬畏,文明对自然的敬畏,有权力的人对没有权力的人的敬畏。你不要以为手中拿着枪就是勇敢,真正的勇敢是你知道什么是正义,并坚持不做不义的事。走过去,作绅士。
                </h3>
    
        
        </div>
    
    </body>
    
    </html>
    
    

    book.css

    * {
        margin: 0;
        padding: 0
    }
    
    .home {
        height: 100%;
        overflow: hidden;
    }
    
    .content {
        perspective: 340px;
        width: 100%;
        position: relative;
    }
    
    h1 {
        color: white;
        text-align: center;
    }
    
    span {
        display: block;
        text-align: center;
    }
    
    .stars {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 2px;
        z-index: 999;
        border-radius: 50%;
        box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
        animation: fly 15s linear infinite;
        transform-style: preserve-3d;
    }
    
    .stars:before,
    .stars:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
    }
    
    .stars:before {
        transform: translateZ(-300px);
        opacity: .6;
    }
    
    .stars:after {
        transform: translateZ(-600px);
        opacity: .4;
    }
    
    @keyframes fly {
        from {
            transform: translateZ(0px);
            opacity: .6;
        }
        to {
            transform: translateZ(200px);
            opacity: .8;
        }
    }
    
    .title {
        position: absolute;
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        top: 80px;
        margin: auto;
        bottom: 0;
        color: #fff;
        font-size: 24px;
        font-weight: 500;
    }
    
    .titles {
        position: absolute;
        display: flex;
        justify-content: center;
        left: 200px;
        right: 200px;
        top: 230px;
        line-height: 40px;
        margin: auto;
        bottom: 0;
        color: rgb(218, 206, 206);
        font-size: 20px;
        font-weight: 500;
    }
    
    

    yuanqu.html

    <!DOCTYPE html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/book3.css">
    </head>
    <body>
        <div class="home">
            <div class="content">
                <div class="stars"></div>
                <img class="bgc" src="https://img.lccyj.ltd/img/yunqu.JPG" width="100%" alt="" >
                <h3 class="title">张养浩《山坡羊·潼关怀古》翻译赏析</h3>
                <h3 class="titles">
                    山坡羊·潼关怀古<br><br>
    
                    元·张养浩<br><br>
                
                    峰峦如聚,波涛如怒,山河表里潼关路。<br><br>
                
                    望西都,意踌蹰。<br><br>
                
                    伤心秦汉经行处,宫阙万间都做了土。<br><br>
                
                    兴,百姓苦;亡,百姓苦。<br><br>
    
    
                    译文及注释<br><br>
    
                    译文<br>
                    华山四周群山聚集,黄河之水波涛汹涌,潼关内外地势险要,前有黄河,后有华山,可谓“一夫当关,万夫莫开”之地。<br><br>
    
                    遥望长安,惆怅彷徨,在这样有利之地建都立朝又有什么用呢?<br><br>
                
                    伤心啊!秦代汉朝曾经做过行宫的地方,如今万间宫殿都化作了尘与土。<br><br>
                
                    朝廷兴盛不息,百姓受苦。<br><br>
                
                    朝廷衰亡破败,百姓更受苦。<br><br>
    
                    注释<br>
                    山坡羊:曲牌名。<br><br>
    
                    潼关怀古:曲的题目。<br><br>
    
                    潼关:在今陕西潼关县内,雄踞陕西、山西、河南三省的要冲,为进入长安的门户。<br><br>
    
                    峰峦如聚:形容华山四周群山密集,地势险要。<br><br>
    
                    波涛如怒:形容黄河水势浩荡,波涛汹涌。<br><br>
    
                    山河表里潼关路:潼头地理形势险要。<br><br>
    
                    山河:华山和黄河。<br><br>
    
                    表里:内外。表为外。一说指潼关以东为关外,潼关以西为关内,互为表里。<br><br>
    
                    西都:指长安。古称长安为西都,洛阳为东都。长安在潼关以西,今天的西安市旧址。<br><br>
    
                    踌蹰(chóu chú):犹豫,彷徨。<br><br>
    
                    秦汉:指曾在西都(长安)营建宫阙的秦、汉王朝。<br><br>
    
                    经行处:曾经做过行宫的地方。<br><br>
    
                    经:曾经。<br><br>
    
                    行:行宫,行事。<br><br>
    
                    宫阙:泛指皇家宫殿。<br><br>
    
                    兴:兴盛。兴与亡为互文。<br><br>
    
                    亡:衰亡,灭亡。<br><br><br>
    
                    赏析:<br>
                    这首小令,篇幅笑,容量大。从结构上看,全曲可分为三层。开头三句是第一层,写潼关的地势;中间四句是第二层,写潼关怀古;末两句是第三层,写潼关怀古所得出的结论。三层意思,象是一条锁链上的三个环节,环环相扣,紧密相连。从写法上看,全曲有描写,有抒情,有议论,三者紧密结合,而其中又以议史为中心,描写生动,抒情沉郁,议论深刻。作者写潼关怀古,起笔在潼关的景象上,落笔却在怀古上,收笔更在由怀古引出的历史结论上。作者写山、河、关、路、西都、秦宫汉阙,最后才点出“兴,百姓苦;亡,百姓苦”这个主题。这是一种层层深入、篇末点题的描写方法。这种描写方法的好处在于:它的主题不是外加的,架空的,而是从写景抒情中自然得出的,是真实可信的,前面的描写为后面的主题提供了坚实的基础,主题则是从前面的描写中得出的必然结论。<br><br>
                    总之,全曲以“峰峦如聚,波涛如怒”的诗句开头,感情有如千尺瀑布,飞流而下,汇成一股洪流。顺着这股感情的洪流,作者一笔掀起一个浪头,一浪紧接一浪,一浪高过一浪,直至最后以饱含激情的警句结束。感情的大波虽然过去了,但其余波仍然在人们的心海中久久不能平息。全去自始至终,感情深沉、强烈,捧而读之,令人声泪俱下,感慨无限!
                </h3>
        
                </h3>
    
        
        </div>
    
    </body>
    
    </html>
    
    

    yuanqu.css

    * {
        margin: 0;
        padding: 0
    }
    
    .home {
        height: 100%;
        overflow: hidden;
    }
    
    .content {
        perspective: 340px;
        width: 100%;
        position: relative;
    }
    
    h1 {
        color: white;
        text-align: center;
    }
    
    span {
        display: block;
        text-align: center;
    }
    
    .stars {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 2px;
        z-index: 999;
        border-radius: 50%;
        box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
        animation: fly 15s linear infinite;
        transform-style: preserve-3d;
    }
    
    .stars:before,
    .stars:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
    }
    
    .stars:before {
        transform: translateZ(-300px);
        opacity: .6;
    }
    
    .stars:after {
        transform: translateZ(-600px);
        opacity: .4;
    }
    
    @keyframes fly {
        from {
            transform: translateZ(0px);
            opacity: .6;
        }
        to {
            transform: translateZ(200px);
            opacity: .8;
        }
    }
    
    .title {
        position: absolute;
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        top: 50px;
        margin: auto;
        bottom: 0;
        color: rgb(0, 0, 0);
        font-size: 24px;
        font-weight: 500;
    }
    
    .titles {
        position: absolute;
        display: flex;
        justify-content: center;
        left: 200px;
        right: 200px;
        top: 150px;
        line-height: 40px;
        margin: auto;
        bottom: 0;
        color: rgb(0, 0, 0);
        font-size: 20px;
        font-weight: 500;
    }
    
    

    缺陷

    整体风格不统一
    页面布局不灵活(问题很大,有时间修改)

    更多相关内容
  • 大学网页设计期末作业
  • 大学生静态网页设计期末作业,大学生网页设计期末作业静态网页.zip,大学生网页设计期末作业动态网页.zip。网页设计期末作业,静态网页,HTML,大学生期末必过,90分以上,大学生网页设计期末作业静态网页.zip,大学...
  • 网页设计期末作业

    2017-09-21 13:13:49
    该资源是大学选修课的期末作业,选修课的期末作业比较简单,如果需要的朋友可以前往下载,这是本人自己制作的。
  • 网页设计期末作业-个人介绍网(免积分下载),记录自己经历的事,家乡,有背景音乐,轮播图,导航栏等等,详细情况请看我的文章介绍。
  • 网页设计课程设计-抗疫网站,有各种疫情相关的信息。
  • 自己的网页设计期末作业,里面有很多学习资源(计算机组成原理,网页设计,线性代数等)HTML+CSS+JS。代码量很多很多,风格简洁,不像其他地方买的那种花哨颜色风,有注释方便修改。
  • 大学生静态网页设计期末作业(必过版),大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计...
  • 网页设计期末作业-导航小站,包含各种资源的导航,点击即可进去,包含设计文档,详细情况请看我的文章介绍。
  • 大学生静态网页设计期末作业蛋糕店主题静态网页大作业html源码。 网页设计期末大作业,静态网页,HTML,大学生期末必过项目,95分以上,代码含有注释,亲自操作就可以搞定期末作业啦 大学生静态网页设计期末作业...
  • 网页设计与开发课程的期末作业 1.有5个网页,其中一个主页面,四个子页面,面包屑导航,首页轮播图切换,通过链接形成一个小型网站,各页面之间有a标签相互链接。 2.断断续续前后写了一个星期,不容易,天天熬夜调...
  • html+css3期末设计模板网页设计期末作业
  • 大学生静态网页设计期末作业源码前端静态网页大作业源码,使用的是原生的 html,css,js 代码,期末作业必过,高分必备。 大学生静态网页设计期末作业源码前端静态网页大作业源码,使用的是原生的 html,css,js ...
  • 静态网页设计期末作业纯HTML和CSS实现静态网页仿京东网页设计源码,大作业必过项目,亲测95分以上了,HTML和CSS实现。操作非常简单。 安装教程 1.下载源文件到本地 2.用Vscode打开,打开H5文件夹,里面的所有页面都...
  • 网页设计期末作业.zip

    2022-03-27 22:40:07
    包含5个页面 html css期末作业
  • 1.网页设计与开发课程的期末作业 2.要求有5个网页,通过链接形成一个小型网站,各页面之间有a标签相互链接。 3.写了一个星期,不容易,天天熬夜的成果,调位置这些细节真的很折磨人。 4.不是自己设计的,仿照着...
  • 静态网页设计期末作业二十四节气HTML静态网页源码。期末作业高分项目、95分项目。静态网页设计大作业。 静态网页设计期末作业二十四节气HTML静态网页源码。期末作业高分项目、95分项目。静态网页设计大作业。静态...
  • 网页设计期末作业,静态网页,HTML,大学生期末必过,90分以上,部分代码含有注释
  • 基于HTML大学生静态网页设计期末作业-静态简历网页源码,高分必看,2021年期末高分作业项目。 基于HTML大学生静态网页设计期末作业-静态简历网页源码,高分必看,2021年期末高分作业项目。基于HTML大学生静态网页...
  • 大学生静态网页设计期末作业基于vue的静态博客网页源码(高分)。课程设计高分项目,亲测95分以上。期末大作业必备 项目特点 UI设计参考hexo-theme-butterfly,使用element-plus重构,美观简洁。 使用webpack5搭建...
  • 大学生静态网页设计期末作业blog基础模板可自由DIY,再也不用担心作业重复了大学生静态网页设计期末作业blog基础模板可自由DIY,再也不用担心作业重复了大学生静态网页设计期末作业blog基础模板可自由DIY,再也不用...
  • 大学生静态网页设计期末作业静态的...大学生静态网页设计期末作业静态的学校疫情防疫官网页面源码大学生静态网页设计期末作业静态的学校疫情防疫官网页面源码大学生静态网页设计期末作业静态的学校疫情防疫官网页面源码
  • 大学生静态网页设计期末作业仿照小米商城的官网源码。仿照小米商城的官网编写的主页、登录、注册和购物车功能,只是一些静态网页和一些简单的功能,没有涉及到与后台数据的交互,适合新手来练习web的技术项目 大学生...
  • 网页设计期末作业,静态网页,HTML,大学生期末必过,90分以上,部分代码含有注释
  • 网页设计期末作业-网上咖啡店(免积分下载),有导航栏,商品标签,搜索栏等等,运用HTML/CSS,链接转到星巴克咖啡,详细信息请看我的文章介绍。
  • 大学生网页设计期末作业动态网页.zip。网页设计期末作业,动态网页,jsp,大学生期末必过,90分以上,部分代码含有注释
  • 静态网页设计期末作业课程设计基于HTML的蛋糕网页源码,静态网页,HTML,大学生期末作业必过,90分以上,代码含有注释,自己操作就好,不求人。 包含功能如下: //注册 滑动验证 验证码 //登录 //首页 轮播 样式 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,837
精华内容 3,934
关键字:

网页设计期末作业