精华内容
下载资源
问答
  • HTML+CSS一个漂亮简单的个人网页

    万次阅读 多人点赞 2019-12-20 17:14:46
    HTML+CSS一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业一个个人网页设计,简单的三个小页面,就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈!!!可能有点low但是对她来说或者需要简单的个人网站...

    用HTML+CSS做一个漂亮简单的个人网页

    1.刚好帮我妹写了一个作业做一个个人网页设计,简单的三个小页面,就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈!!!可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧!
    在这里插入图片描述
    图片是从站酷上面找的(因为我不会设计图),如果有侵权了什么的请联系我立刻马上删掉哈!
    (首页的首屏有下雪了的特效,右下角有音乐播放提示)

    2.先看一下效果哈!
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    效果就是这样哈!自己瞎搞的,我不是UI设计师所以都是乱搭的
    下面是代码

    <body>
        <div class="home">
            <div class="content">
                <div class="stars"></div>
                <img class="bgc" src="./img/imgs38.jpg" width="100%" alt="">
                <h3 class="title">欢迎来到我的个人网站</h3>
                <h3 class="titles">今天也要加油鸭</h3>
                <img class="icon" src="./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='./form.html'><span>Form</span></a>
    
                </div>
    
            </div>
            <div class="icons">
                <div class="icons_items">
                    <img class="icons_items_imgs" src="./img/xuexiao.png" alt="">
                    <span>教学楼是我们每天必去取经之地</span>
                </div>
                <div class="icons_items">
                    <img class="icons_items_imgs" src="./img/canting.png" alt="">
                    <span>每天都要在食堂里面纠结到底吃什么</span>
                </div>
                <div class="icons_items">
                    <img class="icons_items_imgs" src="./img/fengjing.png" alt="">
                    <span>午饭过后可以躺着休息晒晒太阳的小山坡</span>
                </div>
                <div class="icons_items">
                    <img class="icons_items_imgs" src="./img/yewan.png" alt="">
                    <span>忙碌的一天结束啦爬上小床跟世界说晚安</span>
                </div>
            </div>
            <div class="introduce">
                <div class="introduce_item">
                    <img class="introduce_item_img" src="./img/imgs15.jpg" alt="">
                    <span class="introduce_item_title">天空还是一片浅蓝,转眼间东方出现了一道红霞,红霞慢慢地在扩大,不大一会就染红了小半边天。颜色红得可爱, 又 过了一会儿,在那个地方出现了太阳的小半边脸。</span>
    
                </div>
                <div class="introduce_item">
    
                    <span class="introduce_item_titles">当清晨的阳光洒进我们温馨的寝室,忙碌的一天又开始了,闹钟开始响起,每个人睡眼惺忪,从床上爬起,忙忙碌碌的穿梭在食堂与教室之间</span>
                    <img class="introduce_item_img" src="./img/imgs36.jpg" alt="">
                </div>
                <div class="introduce_item">
                    <img class="introduce_item_img" src="./img/imgs16.jpg" alt="">
                    <span class="introduce_item_title">温暖的阳光照耀着大地,远处的小山都金灿灿的美轮美奂,它穿梭于微隙的气息。舒倘,漫长。紫檀的香味,弥漫在春日,把天地间一切空虚盈满,阳光下,是一道纤绝的尘陌,呢喃着天真,充盈着那抹曾经深不可测的孤清而飘逸的影。</span>
                </div>
                <div class="introduce_item">
                    <span class="introduce_item_titles">当晚自习结束后,抬头望向天空,几颗大而亮的星星挂在夜空,仿佛是天上的人儿提着灯笼在巡视那浩瀚的太空。美丽极了,裹紧衣裳,在这优美的夜色中慢慢的走回寝室。</span>
                    <img class="introduce_item_img" src="./img/imgs14.jpg" 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_img.png" alt="">
        </div>
    
    </body>
    <script>
        let mucics = document.getElementById('audio')
        document.body.addEventListener('mousemove', function() {
            setTimeout(() => {
                mucics.play();
            }, 2000);
        }, false);
    </script>
    
    </html>
    

    首页的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;
        left: 49%;
        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: 800px;
        height: 500px;
    }
    
    .introduce_item_title {
        width: 300px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-left: 100px;
    }
    
    .introduce_item_titles {
        width: 300px;
        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: 0 400px;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .icons_items {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        margin-top: 80px;
        width: 200px;
    }
    
    .icons_items_imgs {
        width: 200px;
        margin-bottom: 30px;
    }
    

    关于我的代码

    <body>
        <div class="about">
            <h3 class="about_tit">要不断的努力,才能成为更好的自己</h3>
            <img class="about_bgc" src="./img/from1.png" alt="">
            <div class='ribbon'>
                <a href='./index.html'><span>Home</span></a>
                <a href='./about.html'><span>About</span></a>
                <a href='./form.html'><span>Form</span></a>
    
            </div>
            <div class="me">
                <img class="me_img" src="./img/imgs19.jpg" alt="">
                <span class="me_tit animate ">我是一名大二的学生,平时爱好看看书,浏览网页资料,学习一下新知识,为以后毕业做些小打算。跟大多数人一样,对未来些许迷茫,当忽然之间脑海里闪现出来一些关于几年前的某个片段时,会情不自禁的回想那个时候的自己,关于那个曾经的所有点点滴滴也渐渐浮现出一些画面,突然拼命的想要去找一点在那个记忆点里的某些东西,寻找的过程中脑海里的思绪早已沉溺在回忆里面,忘了的还有那些忘不了的感触在这一刻全都涌了出来,我觉得最后寻找的结果或许已不重要了,因为这突如其来想要寻找的一些东西的念头,让自己突然变得好安静,莫名的思绪蔓延开来了,它又带我回到了现在已经体会不到的那种怦然心动的时候,仿佛打开了老旧的抽屉,里面装满了当初的成长,青涩,遗憾与那一种想起来会不禁忽然笑出来的感觉,可能想笑的是那时的自己,又或许是笑那带有遗憾结尾的时光,怀念真好。
                    又一年即将过去了,生活一如既往的推着自己往前走,在行人眼里穿梭,而不时会回头看看的,还是那个仿佛不知在追逐着什么的自己,此刻的空气很好,它不会留下痕迹。
                </span>
            </div>
            <div class="videos">
                <span>
                            这是我很喜欢的一个动漫电影,玩具总动员里面的第四部,讲述的事胡迪深知自己在这个世界上的使命,就是照顾他的主人,无论是原来的安迪还是新主人邦妮。当邦妮将不情愿成为玩具的“叉叉”带回家时,胡迪又担起了教导叉叉接受自己新身份的责任。 然而当邦妮将所有玩具带上房车家庭旅行时,胡迪与伙伴们将共同踏上全新的冒险之旅,领略房间外面的世界有多广阔,甚至偶遇老朋友牧羊女。在多年的独自闯荡中,牧羊女已经变得热爱冒险,不再只是一个精致的洋娃娃。正当胡迪和牧羊女发现彼此对玩具的使命的意义大相径庭时,他们很快意识到更大的威胁即将到来。
                        </span>
                <video width="800" controls id="video" preload="auto" height="100%" autoplay="autoplay" loop="loop" type="video/mp4" src="./video/videos.mp4"></video>
    
            </div>
        </div>
    </body>
    
    * {
        margin: 0;
        padding: 0;
    }
    
    .about {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .about_bgc {
        width: 100%
    }
    
    .about_tit {
        position: absolute;
        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: 600px;
    }
    
    .animate {
        padding-left: 20px;
        width: 500px;
        font-size: 16px;
        color: #000;
        animation: 10s wordsLoop linear infinite normal;
    }
    
    @keyframes wordsLoop {
        0% {
            transform: translateY(100px);
            -webkit-transform: translateY(100px);
        }
        100% {
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
        }
    }
    
    .videos {
        display: flex;
        margin-top: 60px;
        padding-bottom: 80px;
    }
    
    .videos span {
        width: 400px;
        margin-right: 100px;
        margin-left: 300px;
        color: #FFD204
    }
    

    表单代码

    <body>
        <div class="from">
            <img class="bgc" src="./img/imgs42.jpg" alt="">
            <div class="submit">
                <span class="form_title">个人信息提交</span>
                <div class="form_input">
                    <span>姓名:</span>
                    <input class="inputs" type="text" value="居居侠">
                </div>
                <div class="form_input">
                    <span>班级:</span>
                    <input class="inputs" type="text" value="移动交互应用技术一班">
                </div>
                <div class="form_input">
                    <span>学号:</span>
                    <input class="inputs" type="text" value="200187454548754">
                </div>
                <div class="form_input">
                    <span>系部:</span>
                    <input class="inputs" type="text" value="信息工程系">
                </div>
                <div class="form_input">
                    <span>课程名称:</span>
                    <input class="inputs" type="text" value="网页设计与制作">
                </div>
                <div class="btn_submit">
                    <a href="./finish.html">
                        <button class="btn">提交</button></a>
                    <a href="./index.html" class="back"><button class="home_href">首页</button></a>
                </div>
            </div>
        </div>
    </body>
    
    * {
        margin: 0;
        padding: 0
    }
    
    .from {
        overflow: hidden;
        position: relative;
    }
    
    .bgc {
        width: 100%;
    }
    
    .submit {
        position: absolute;
        z-index: 9;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        margin-top: 150px;
        width: 500px;
        height: 500px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        color: #fff;
        display: flex;
        flex-direction: column;
    }
    
    .form_title {
        text-align: center;
        margin-top: 40px;
        font-size: 18px;
    }
    
    .form_input {
        padding: 0 30px;
        box-sizing: border-box;
        display: flex;
        margin-top: 20px;
    }
    
    .inputs {
        height: 40px;
        width: 300px;
        border-radius: 5px;
        border: none;
        background-color: #eee;
        color: #666;
        padding-left: 20px;
    }
    
    .form_input span {
        width: 85px;
        align-self: center;
    }
    
    .btn_submit {
        align-self: center;
    }
    
    .btn {
        border: none;
        width: 80px;
        height: 40px;
        color: #fff;
        border-radius: 5px;
        background: #999;
        margin-top: 40px;
    }
    
    .btn:hover {
        background: #666;
    }
    
    .back {
        margin-left: 10px;
    }
    
    .home_href {
        border: none;
        width: 80px;
        height: 40px;
        color: #fff;
        border-radius: 5px;
        background: #FFD204;
    }
    

    好啦就这么多啦!最近很闲没事干,第一次写博客,不知道写什么,公司的项目不能写出来,正好把这个贴出来,就怕图片会侵权,如果侵权了一定要联系我我立刻删除呀!!!
    全部代码都已经加上来啦!图片资源自己找哈!毕竟我是从站酷上面人家设计有版权的我不能乱给哈!你们自己去找哈! 站酷网站上面的,音频就是自己随便搜的纯音乐啦!
    *重要的事情说三遍:
    (请不要再私信我要代码啦!!!已经都上传上来了,自己复制粘贴一下找几个图片的好了)

    (请不要再私信我要代码啦!!!已经都上传上来了,自己复制粘贴一下找几个图片的好了)
    (请不要再私信我要代码啦!!!已经都上传上来了,自己复制粘贴一下找几个图片的好了)

    (只知道敲代码从来没有写过博客,请轻喷,小心脏受不住~感谢各位看官!!!)

    展开全文
  • 前端网页需要用网页框架吗

    千次阅读 2017-09-15 15:45:07
    前端网页是不是必须要用网页框架?个人感觉这分为两种情况,一种是能力超强,时间够用的情况,另外一种就是前端网页框架,可以节约开发时间和减少工作量,这可以根据自身的情况作出正确的判断,并不是别人说什么...

      做前端网页是不是必须要用网页框架?个人感觉这分为两种情况,一种是能力超强,时间够用的情况,另外一种就是用前端网页框架,可以节约开发时间和减少工作量,这可以根据自身的情况作出正确的判断,并不是别人说什么就是什么。

     

     

    小项目到底用不用前端网页框架?

     

      小项目本身就是做的事情比较多,但是成本还小,如果让开发人员不停写代码可能会花很多的时间去做,这需要考虑到这个小项目开发时间和成本的。如果用前端网页框架相信大家都知道,可能会考虑到浏览器兼容性,还有功能不够自己用,我想这都不用担心,从QUICKUI开发以来,体验过的每一位用户都给予好评。

     

    什么样的项目用前端框架比较划算?

     

      对于开发一个项目来说,我想多数人跟我想法是一样的,第一点是成本、第二点是开发时间、第三市场,知道为什么把市场放在第三吗?因为你对市场都不了解是不会去做的,所以主要考虑第一点和第二点。正常一个项目需要5-10个程序员开发一个月左右,预算应该在几十万(具体自己去评估),使用前端网页开发框架只需要两个人用两周左右的时间,不管是功能还是兼容性都能调试好,作为项目决策者你会选择哪个?

     

     实用型网页框架TOP5推荐:

     

    1.jQuery

     

     

    jQuery是一个快速而且简洁的JavaScript库,它使得以下几方面的工作更加简单:遍历操作HTML文档、事件处理、动画、快速Web开发中的Ajax交互操作等。jQuery的设计旨在改变你编写JavaScript的方式。

     

    2.jQuery Mobile

     

     

      可跨所有流行移动设备平台的UI(用户界面)系统,基于非常可靠的jQueryjQueryUI。它的代码得到了增强,且更加轻量,可以进行灵活、易于主题化的设计。

     

    3.YiiFramework

     

     

    Yii是一个高性能的、开发Web2.0应用程序最好的PHP框架。

     

    4.QUICK UI

     

    QUICK UI是一套完整的企业级web前端开发解决方案,由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量,提高开发效率,快速构建功能强大、美观、兼容的web应用系统。

     

    5.YAML

     

     

    YAML(全称YetAnotherMulticolumnLayout,另一个多列布局)是一个用于创建现代、灵活的浮动层的HTML(XHTML)/CSS框架。

     


    展开全文
  • 树莓派服务器运行博客网页

    千次阅读 多人点赞 2021-07-25 18:15:27
    三四百的树莓派开发板服务器运行博客网页,炫酷极了

    阅读本文你将了解的知识点:

    • 了解树莓派做网页服务器的流程框架
    • 使用Hexo生成静态网页
    • 使用树莓派做服务器部署静态网页
    • 穿透内网从外网访问部署的网页

    树莓派做服务器运行Hexo博客网页

    ​ 手头有一块树莓派4B,为了不让树莓派闲着,我用它做一个网页服务器,挂载自己的个人网页,分享一下自己的部署过程

    树莓派4B开发板

    1.服务器框架

    ​ 配置树莓派网页服务器前首先要了解一下整体的框架,然后按照框架的内容进行服务器配置,这里我做了一个框图方便大家理解搭建树莓派网页服务器需要

    的步骤

    请添加图片描述

    具体框架主要是以下几个部分:

    • 本地PC端:

      ​ 首先要在本地PC端建立一个Git仓库,安装Hexo相关依赖,使用Hexo生成静态网页代码,然后通过Git上传到远程仓库

      1. Hexo 是一个基于nodejs 的静态博客网站生成器,用户可以借助该工具快速生成网页

      2. Git是一种分布式的版本管理系统,由Linux的创造者Linus所创建,Git可以帮我们做很多事情,比如代码版本控制,分支管理等,其主要包含的几个功能有远程仓库,克隆,本地仓库,分支,提交,拉取,合并,推送等。

    • 树莓派端:

      ​ 在树莓派端需要建立一个Git远程仓库,用于接收网页数据,同时树莓派要安装Nginx,用于将本地网页映射到内网IP上去

      Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,可以作为一个HTTP服务器进行网站的发布处理,以及作为反向代理进行负载均衡的实现

    • 外网访问:

      ​ 如果只映射到内网IP,那访问服务器只能在内网访问,这显然不是我们所期待的,所以后面的步骤就是将外网的IP通过端口映射,映射到内网IP,之后互联网的其他用户就可以通过外网的IP访问服务器了,但访问的浏览器还是通过地址访问,安全性比较低,因此我们在加入一个域名解析,将域名解析到外网IP同时加装SSL证书进行加密保护!

      内网(局域网)和外网(广域网)的区别:

      1. 范围大小
        局域网(LAN)相对于广域网(WAN)而言,主要是指在小范围内的计算机互联网络。这个“小范围”可以是一个家庭,一所学校,一家公司,或者是一个政府部门。BT中常常提到的公网、外网,即广域网(WAN);BT中常常提到私网、内网,即局域网(LAN)。

      2. IP地址
        广域网上的每一台电脑(或其他网络设备)都有一个或多个广域网IP地址(或者说公网、外网IP地址),广域网IP地址一般要到ISP处交费之后才能申请到,广域网IP地址不能重复;局域网(LAN)上的每一台电脑(或其设备)都有一个或多个局域网IP地址(或者说私网、内网IP地址),局域网IP地址是局域网内部分配的,不同局域网的IP地址可以重复,不会相互影响

      SSL协议:

      SSL (Secure Sockets Layer 安全套接字协议)和继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议,TLS与SSL在传输层与应用层之间对网络连接进行加密,简单来说HTTPS中的S就是SSL

    2.本地Hexo设置

    本地Hexo设置就是下载Hexo开发需要的依赖,下载配置完成后使用Hexo生成一个静态网页,具体步骤如下:

    2.1 安装GIT

    去官网安装Git工具,然后安装,和普通软件安装方式相同,打开安装包后一路回车,直到安装完成,官网链接:Git Windows Download

    安装完成后在桌面右击就会出现GitBash控制台,代表安装成功

    20210724202650

    2.2 安装NodeJs

    Hexo框架是基于nodejs编写,所以安装hexo之前需要安装nodejs,nodejs下载网页:Node.js,下载LTS版本

    下载之后一路安装,不会的可以百度具体安装教程,不多说,安装完成后我们打开刚刚Git的命令行,右击桌面空白处打开GitBash,输入如下指令查看hexo和npm的版本

    node -v
    npm -v
    

    返回版本信息就说明安装成功:

    20210724204005

    2.3 安装Hexo

    使用nodejs的npm安装包管理工具安装hexo,指令如下

    1. 安装指令
    npm install -g hexo-cli
    
    1. 查看是否安装成功
    hexo -v
    
    1. 出现版本信息说明安装成功

    20210724204635

    2.4 Hexo生成网页

    两个工具就绪后我们开始生成静态网页:

    我们首先创建一个文件夹,用来存放网页数据

    20210724204843

    在文件夹内右击打开gitbash,输入初始化指令 web_blog_name 由用户自己定义

    hexo init web_blog_name
    

    输入后git会从远程拉取初始化代码下来,拉取后Git显示如下

    20210724205423

    然后文件夹就有了Hexo的源码了

    20210724205443

    在Git中改变当前目录的位置,进入该文件夹,代码如下

    cd web_blog_name/
    

    20210724205952

    使用hexo生成代码指令

    hexo g
    

    然后开启本地端口访问

    hexo server
    

    在浏览器输入如下内容,就可以本地访问Hexo生成的网页代码了:

    localhost:4000
    

    20210724210340

    到此网页的生成就完成了!

    除了网页生成外,我们本地还要生成一个ssh公钥,用于后期向树莓派远程仓库提交网页源码,git指令如下

    ssh-keygen -t rsa -C “邮箱地址”
    

    然后一路回车,直到出现下面的图案,代表公钥生成成功,

    20210724220616

    公钥(.pub)一般在 C:\Users\用户名\.ssh 下面,公钥的作用我写在了后面,暂时无需管他

    20210724220724

    到此本地设置基本完成

    3.树莓派服务器设置

    有了静态网页了,我们下一步就是配置树莓派了,首先通过SSH连接树莓派,这里我使用的VSCode的remote - SSH工具来连接树莓派(VSCode,永远滴神,不接受反驳!),工具在VSCode内部git安装:

    20210724211512

    安装完成后我们通过树莓派的IP登录树莓派(树莓派要连接网络,且要获取对应的IP)

    获取IP方法可以参考这篇文章:查看树莓派ip地址的几种方法

    获取IP之后通过Remote远程登录(树莓派和PC要在同一个局域网下):在VSCode打开Remote

    20210724214002

    添加远程连接,按照如下格式输入登入IP和账号密码:

    ssh + 树莓派用户名@树莓派IP地址
    

    输入位置如下:

    20210724214019

    输入之后会提示在输入登录密码,输入即可登录树莓派,连接后打开终端,如下图

    20210724214506

    之后我么就可以输入shell指令来控制树莓派了,下面我们开始正式配置树莓派服务器!

    配置步骤:

    • 更新树莓派源

    打开树莓派镜像源列表 (此处用的vim编辑器,具体操作可以百度!不习惯可以将vim替换gedit)

    sudo vim /etc/apt/sources.list
    

    将内容替换为清华大学源

    deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi
    deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi
    

    更新源

    sudo apt-get update
    

    更新完成

    20210724215625

    • 安装git

    安装指令,sudo指令要输入一下密码

    sudo apt-get install git
    

    查看版本

    git --version
    

    安装完成:现象和第一次下载不一样,但只要出现版本基本没问题

    20210724220141

    • 安装nginx

    下载指令

    sudo apt-get install nginx
    

    查看当前版本

    nginx -v
    

    此处我已经下载好,因为已经下载,所以现象和第一次下载不一样,但只要出现版本基本没问题

    20210724215811

    • 建立远程Git仓库

    在树莓端安装Git后,我们用Git建立一个远程仓库,用来作为本地PC提交网页源码的中间站,这样如果我们要更新网页,就不用登录到树莓派然后传文件这么麻烦的步骤,具体建立步骤如下:

    1. 创建一个新的文件夹
    sudo mkdir /var/repo/	#创建一个文件夹
    sudo chown -R $USER:$USER /var/repo/	#给分到用户组
    sudo chmod -R 755 /var/repo/	#改变文件夹权限
    
    1. 文件夹建立后,改变当前路径到建立的文件夹,输入如下指令建立Git仓库(web_blog为自定义的名字)
    cd /var/repo/
    git init --bare web_blog.git
    
    • 映射仓库到另外一个文件夹

    Git仓库创建完成后,我们需要再创建一个文件夹,用来做Nginx的根目录

    sudo mkdir -p /var/www/hexo
    

    并修改目录权限

    sudo chown -R $USER:$USER /var/www/hexo
    sudo chmod -R 755 /var/www/hexo
    

    然后在仓库 web_blog 下创建一个钩子,将静态 HTML 文件传送到树莓派服务器的根目录下,即 /var/www/hexo下面,钩子代码如下:

    #使用vim在仓库下创建一个新的钩子文件
    sudo vim /var/repo/web_blog.git/hooks/post-receive
    

    在文件下添加如下shell脚本文件 (因为使用的是Vim编辑器,具体的操作方式需要自行百度了解一下!)

    #!/bin/bash
    git --work-tree=/var/www/hexo --git-dir=/var/repo/web_blog.git checkout -f
    

    保存退出文件后,改变文件权限,让该文件变为可执行文件。

    sudo chmod +x /var/repo/web_blog.git/hooks/post-receive
    
    • Nginx网页根目录设置

    上一步我们已经创建好网页根目录,并且已经做好文件传送钩子,这一步我们配置Nginx的配置文件,开启Nginx并将根目录映射到我们创建的目录下

    打开Nginx默认配置项

    sudo vim /etc/nginx/sites-available/default
    

    然后找到如下位置,修改root的值为我们设置的根目录文件夹

    20210725092820

    保存退出,重新启动Nginx

    sudo service nginx restart
    

    在和树莓派同一个局域网下访问树莓派的IP地址,访问如下说明目录设置成功了,Nginx配置基本完成

    20210725093228

    • 添加本地公钥到远程Git仓库

    添加公钥到树莓派,其实就是添加本地PC到Git的白名单中,之前我们已经在本地生成了公钥,下一步我们就是上传公钥,方法很简单,在公钥目录下面打开Gitbash,按格式输入如下shell指令

    ssh-copy-id -p 端口一般为22+树莓派用户名@树莓派IP地址
    

    安装完成会有提示,我这个就是已经安装的提示

    20210725094710

    • 配置本地Hexo设置,上传网页代码

    在上面都配置完成后,我们在配置一下本地网页的传输代码,就可以上传一开始生成的静态网页了!

    在网页源码位置修改_config.yml文件

    首先修改一下推送地址路径和推送方式

    deploy:
      type:  git
      repo:  pi@自己的IP地址:/var/repo/web_blog
      branch: master
    

    修改后如下:

    20210725102514

    除此之外还有修改网页的源地址,按照下图中的格式修改,添加自己的IP

    20210725102620

    修改完成后,在源码目录使用GitBash

    20210725102157

    hexo生成静态网页代码:

    hexo g
    

    20210725102957

    提交远程代码

    hexo d
    

    20210725103010

    • 内网访问博客网页

    代码提交成功后,就会出现在Nginx的根目录下,这时我们在内网访问Nginx的端口就可以访问刚刚的网页啦

    20210725103948

    4.内网穿透

    通过以上的步骤,我们现在已经可以通过内网访问部署在树莓派服务器上的网页了,有的朋友可能不满足于此,想要网页通过外网也能访问,下面我分享一下如何做内网穿透,通过外网访问内网服务器!

    首先需要准备一些内容:

    1. 一个云服务器(我的是腾讯云服务器,一年100块)
    2. 一个域名(在阿里云购买的域名,一年20块)

    云服务器会分配一个公网IP,通过这个IP的端口映射到内网IP端口进行穿透内网,而域名就是我们常说的网址,比如:https://www.csdn.net 就是一个域名,我们准备一个域名然后对他进行解析到服务器IP,就可以通过网址访问网页了

    我们通过frp来穿透内网,具体的教程参考这一篇CSDN文章:十分钟教你配置frp实现内网穿透

    穿透后我们就可以在外网通过公网IP访问网页了(注意使用服务器的公网IP做穿透时一定要记得设置防火墙,让指定端口通行),此处我穿透到公网IP的8080端口,该端口可以通过外网访问

    20210725172540

    为了让网页访问地址更加合规,将购买域名的二级域名解析到80端口后,使用Nginx进行端口转发到8080,Nginx配置文件修改如下:(主要为红框的那一段,上边的代码是我自己部署在服务器的网页,不是本节的内容)

    20210725175140

    到此我们就可以通过网页的二级域名解析后进行访问了

    20210725174831

    5.结语

    树莓派服务器内容就写到这了,文章大概描述了一下部署网页到树莓派服务器的内容,有问题可以在评论区或者私信向我反馈,希望大家给个关注,后期还会持续更新树莓派有关的DIY

    展开全文
  • ASP.NETWAP手机网页怎么,怎么才能把鼠标点击的按钮转变成触摸实现
  • html一个漂亮的网页,个人网页,css

    万次阅读 多人点赞 2020-12-29 10:44:07
    多的不说,直接上网页 我个人自学的,样子不是恒好看,但是可以作为作业(老师也没怎么讲,毕竟是在 大学里面嘛,大部分时间都是自学罢了) 这是主页面index.html <html lang="en"> <head> <meta ...

    多的不说,直接上网页
    我个人自学的,样子不是恒好看,但是可以作为作业(老师也没怎么讲,毕竟是在 大学里面嘛,大部分时间都是自学罢了)
    源代码文件可在这里下载🔜下载地址
    在这里插入图片描述

    这是主页面index.html

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>沈功波的主网页</title>
        <link href="css/styles.css" rel="stylesheet">
    </head>
    
    <body>
        <div class="home">
            <div class="content">
                <div class="stars"></div>
                <img class="bgc" src="./img/preview2.jpg" width="100%" alt="">
                <h2 class="title">欢迎来到我的个人网站</h2>
                <h3 class="titles">今天也要加油鸭</h3>
    
               <!-- <img class="icon" src="./img/abc.jpg" alt="">-->
                <div class='ribbon'>
                    <a href='./index.html'><span>HOME</span></a>
                    <a href='./about.html'><span>ABOUT</span></a>
                    <a href='./表单.html'><span>FORM</span></a>
                    <a href='./视频.html'><span>VIDEO</span></a>
    
                </div>
    <!--
    

    css样式区

    style.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;
        left: 49%;
        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: 25px;
        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: 800px;
        height: 500px;
    }
    
    .introduce_item_title {
        width: 300px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-left: 100px;
    }
    
    .introduce_item_titles {
        width: 300px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-right: 100px;
    }
    
    audio {
        position: fixed;
        bottom: 50px;
        right: 0;
        width: 50px;
        
    }
    
    .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: 0 400px;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .icons_items {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        margin-top: 80px;
        width: 200px;
    }
    
    .icons_items_imgs {
        width: 200px;
        margin-bottom: 30px;
    }
    
    

    ----------------------------分割线---------------------------------------------
    在这里插入图片描述

    表单.html

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>个人表单</title>
        <link href="css/表单.css" rel="stylesheet">
    </head>
    <body background="./img/banner1.jpg">
    
        <div class='ribbon'>
            <a href='./index.html'><span>HOME</span></a>
            <a href='./about.html'><span>ABOUT</span></a>
            <a href='./表单.html'><span>FORM</span></a>
            <a href='./视频.html'><span>VIDEO</span></a>
    
        </div>
    
        <div class="form">
            <img class="bgc" src="./img/ssdad.jpg" alt="">
            <div class="submit" align="center">
                <span class="form_title" >个人信息提交</span>
                <div class="form_input">
    
                    <span>姓名:</span>
                    <input class="inputs" type="text" value="">
                </div>
                <div class="form_input">
                    <span>班级:</span>
                    <input class="inputs" type="text" value="计算机四班">
                </div>
                <div class="form_input">
                    <span>学号:</span>
                    <input class="inputs" type="text" value="1901030">
                </div>
                <div class="form_input">
                    <span>专业:</span>
                    <input class="inputs" type="text" value="计算机应用技术">
                </div>
                <div class="form_input">
                    <span>课程名称:</span>
                    <input class="inputs" type="text" value="网页设计与制作">
                    <span>邮箱:</span>
                    <input class="input"name="mail" type="email" value="请输入邮箱号">
                    <span>手机号:</span>
                    <input class="input" name="phone" type="tel" value="请输入手机号">
                    <span>个人简介</span>
                    <input class="input" name="text" type="text" value="请输入您的个人简介">
                </div>
                <div class="btn_submit">
                    <a href="./finish.html">
                        <button class="btn">提交</button></a>
                        
                    <a href="./index.html" class="back"><button class="home_href">首页</button></a>
                </div>
            </div>
        </div>
       
    </body>
    </html>
    

    表单样式区。

    表单.css

    
    .submit{
        padding-top: 120px;
    }
    .ribbon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 300px;
        top: 25px;
        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;
    }
    
    
    
    .inputs{
        border:0;border-bottom:1 solid black;background: hsla(43, 31%, 46%, 0);/*输入框只有边框*/
    }
    

    在这里插入图片描述

    展开全文
  • 零基础jsp做网页

    千次阅读 2018-04-15 22:38:51
    我自学做网页,看现在的技术学什么好。搜索asp。net和php。jsp的比较,感觉jsp要好一些。(自己的愚见,不成熟)然后搜索开发环境,看了一些之后说eclipse和myeclipse。说myeclipse得翻墙,我不会翻墙,就找了个...
  • 视频做网页背景

    千次阅读 2018-11-30 21:50:33
    1.首先你需要准备一个视频吧,然后下载Vidage的相关...3.成果展示,不能提供视频,那就放几张图片感受一下吧,视频背景,页面真的会炫酷一点哦,喜欢 就这样就实现了以视频为背景,若有疑问可以在下方提问哦
  • 网页游戏什么编程语言

    千次阅读 2018-06-11 17:18:00
    网页游戏什么编程语言 一、总结 一句话总结: 1、找好工具就好,就在下面 2、系统学游戏编程(或许不用) 3、前后台是分离的,以数据库为链接     二、网页游戏什么编程语言 网页游戏也分很多种...
  • 我用HTML5和js加了特效,后台管理(对SQL Server数据库中的数据进行增删改操作)我需要用什么做啊,需要学习什么知识,jsp?php?js?jequry?求个大神指点,过几天要参加一个比赛,老师让我们用还没学到的知识呢![图片...
  • 求教怎么把一堆网页链接的文本内容批量提取出来,建议用什么语言怎么
  • 1.使用Macromedia公司的网页设计软件Dreamweaver(以及Flash等)制作一个个人主页。  备注:可以包含个人信息(必须)、作品展示(必须)、爱好特长、专业认知、职业规划等。   2.个人网页制作需要刻录光盘,包含...
  • 希望哪位好心人士帮忙解答下,谢谢,刚刚踏入网页设计这个行业,不是很懂!
  • 小媛:bit 哥,最近有人找我一个网页,但是我不会,300块钱呢。 ????1_bit:啥网页?给你300? ????小媛:吃鸡的网页,赚了300我就可以吃半个月了,下面就是一个示例。 ????1_bit:哈哈哈,我觉得一周你就完了...
  • 如何FLASH做网页背景

    千次阅读 2008-06-23 13:55:00
    1、在网页中插入一个表格,设置其宽度、高度为100%,再插入FLASH的SWF文件;2、设置SWF文件宽度和高度均为100%,点击其paramenters,参数设置为wmode,变量设置为transparent,功能为设置一个有透明效果的SWF;3、在...
  • 怎么静态网页

    千次阅读 2017-11-14 17:29:59
    在写这篇文章的时候,我在大三第一学期差不多期中...相信经过这番操作之后,你对于静态网页是没有什么问题了,之后的学习经历在下一篇里面介绍,今天就先说这么多,毕竟大三的童鞋还是有很多作业要写的呀。
  • idea一个网页登录界面

    千次阅读 2020-04-03 14:04:27
    } 运行 "Hello Word"正常显示,"你好,世界"变成了乱码,这是因为我们在服务器发送的是中文,网页上显示却不知道是中文,就像大象不知道蚂蚁是怎么交流的那样,这时候我们就要添加html的格式上去 protected void ...
  • 网页插入视频&图片超链接

    千次阅读 2017-07-08 21:02:40
    :比如标签 :但是我们要知道播放一个视频真的是一件不容易的事情 :不同的浏览器的要求不一样,不同的浏览器有都可以播放有的...以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频: 代码如下
  • python做网页抓取与解析入门笔记

    千次阅读 2012-08-28 20:15:25
    事情的起因是,我survey的时候搜到了这两本书:Computational Social... Social Network,感觉都蛮不错的,想下载下来看看,但是点开网页发现这个只能分章节下载,晕,我可没时间一章一章下载,想起了迅雷的下载
  • Word一个漂亮的网页

    千次阅读 2015-01-29 13:35:14
    有人在soso上问到:word怎么网页,对此我特意写成一个教程,我们以Microsoft Office Word 2003为例,相信大部份人都安装了,如果没有装的这里给大家提供下载地址:http://www.uzzf.com/Soft/11779.html...
  • 如何一个网页送给女朋友生日礼物

    万次阅读 多人点赞 2020-07-30 13:07:53
    如何一个网页送给女朋友生日礼物 本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架的一个小型网站,里面可以实现跳转功能,怎么配置flask的环境变量,去官方文档看就好了,里面写...
  • DW本身是没有这样的功能的,如果非要如此,可能是需要滤镜效果才能够体现,但是这样是不不足的地方的,比如每款浏览器支持的滤镜的代码是不同的,效果也是不一样的,再者一张不足够大的图片为背景还要拉伸的话,...
  • 在上一节课的内容基础上一个简易的网页登录界面——18级软工1班03 打开idea后打开上一节课的工程文件(一般在打开idea软件的同时,idea会默认打开上一次的文件)并在左边列表的main文件夹下建立一个名为Java的...
  • HTML做网页登录界面

    万次阅读 多人点赞 2018-05-17 22:39:16
    代码: <!DOCTYPE ...> lang= "en" > ...需要改进的地方:(1)代码在每一栏间了br换行标签。...(2)设置自动登录是,为了使初始位置与上面框对齐,设置宽度时是在...(而且为什么在图片以下的编写还会影响图片的放置)
  • 现在在一个微信公众账号,需要自己写网页,而且这种网页和app的界面很像,就类似于网页版...想知道开发这类的网页用什么技术,是html5之类的还是其他,还有 就是使用什么工作环境进行开发,谢谢啦!还望大神指点一二!
  • 什么叫动态网页什么叫静态网页设计? 所谓静态网页就是说网页文件中没有程序,只有HTML代码,一般以.html或.htm为后缀名的网页,静态网站内容不会在制作完成后发生变化,任何人访问都显示一样的内容,如果你内容变化...
  • 框架完一个网页之后,如何使整个页面滚动起来 框架完一个网页之后,如何使整个页面滚动起来

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 616,789
精华内容 246,715
关键字:

做网页用什么