精华内容
下载资源
问答
  • 但是最近需要一个网站在手机上来展示自己网页内容,搜了一下资料,需要用到域名与主机。可能部分朋友不知道它们是什么意思,我举个栗子:家(网站)。主机理解为家,域名理解为家地址,这样你将你的网页放在家中,...

    制作自己的网站详细流程(可以上传自己做的网页)

    自己以前做网页都是仅仅做一下,在本地看一下效果。但是最近需要做一个网站在手机上来展示自己网页内容,搜了一下资料,需要用到域名与主机。可能部分朋友不知道它们是什么意思,我举个栗子:家(网站)。主机理解为家,域名理解为家地址,这样你将你的网页放在家中,别人通过找到你家地址进到你家里,就能看到你的网页了。所以主机和域名是一个网站必须要有的。现在大部分的域名和主机需要购买,作为学生党,可能还是应付大作业实验或者兴趣驱使等,比较倾向于免费或者花费较少的域名和主机。下面给大家详细说一下我使用的三丰云平台下的免费虚拟主机和比较便宜的域名(10元/年)的申请流程,我认为三丰云平台下提供的资源很适合学生党使用,并且操作都很方便。同时三丰云也提供了免费云服务器,有需要的朋友也可以去申请。

    一、申请主机

    首先,进入三丰云平台(https://www.sanfengyun.com),注册账号登陆。点击左上角免费虚拟主机,接着进行申请即可,申请完毕后,可以点击右上角控制台来查看申请的免费主机,在控制台下方已开通产品处可以看到免费主机那里是发亮的,说明开通成功,点击进入,可以看到自己的免费主机,包括系统赠送的域名(也可以用来当地址,但是每次登陆需要输入密码,建议自己买一个域名,后面会介绍)、网站配置,至此,主机申请就结束了。

    二、申请域名

    在申请免费主机的时候,平台会赠送一个系统域名,但是系统域名每次登陆都需要输入密码,比较麻烦,所以建议大家自己买一个域名,比较方便。首先进入到控制台,下方点击域名,之后点击中间注册域名,自己选择后缀,之后充值购买即可,我买的是.top类型的,首次10元/年,比较便宜。购买后,首先进入到我的主机,点击管理面板,在网站域名那里添加自己购买的域名,如果是在三丰云平台上购买的域名,则免备案,方便,之后进入到控制板我的域名当中,需要进行地址解析,其中需要实名认证,实名认证后即可使用域名。这里说明一下,大家刚开始填写信息一定要填写正确,不要瞎填,不然审核不会通过,不要问我我咋知道的…

    三、上传网页

    当主机和域名都搞定后,就是往自己家(主机)里放东西了,这里我们需要用到一个软件,FlashFXP,大家可以在这里下载(提取码:6pr8)。下载解压后,打开FlashFXP.exe,弹出的页面选择 I Accept即可,之后左上角Session→Quick Connect,弹出的窗口就是要登陆自己的主机,填写信息只需要填如下三项:
    在这里插入图片描述获取这三项信息:登陆三丰云平台→控制台→免费产品→免费虚拟主机→管理面板,其中FTP地址为Address or URL, FTP账号为User name, 之后点击设置密码,设置的密码就是Password。
    之后就可以点击Connect,就可以登陆了。登陆后你会发现窗口分成两部分,左边是本地资源,右边是网站主机,把你做的网页所有资源放在Web文件夹里(另外两个文件夹不需要操作),之后就可以在自己买的域名下看到自己添加的网页了。至此,你的网站就做好了,PC端和手机端都可以访问。哦对了,有的同学第一次访问的时候还是会出错,可能是因为默认首页设置的问题,因为在虚拟主机管理面板中,首页默认为index.html,解决办法是要么自己把上传的html文件名改成index.html,要么在设置默认首页中修改默认首页。修改位置:
    在这里插入图片描述
    希望能够帮助到屏幕前的你~

    展开全文
  • 如何将自己做网页发布到网站让别人可以看到

    万次阅读 多人点赞 2018-09-18 20:32:13
    自从在大学学了H5之后,一直都在想,怎么将自己写的HTML网页发布到网上像百度一样让任意用户可以访问呢?于是我便了一些尝试,并有了如下收获: 首先,把网站上传到网站让别人访问需要以下东西: 1:域名 2:...

           自从在大学学了H5之后,一直都在想,怎么将自己写的HTML网页发布到网上像百度一样让任意用户可以访问呢?于是我便做了一些尝试,并有了如下收获:
           首先,把网站上传到网站让别人访问需要以下东西:

     1:域名
     2:空间
           什么是域名呢?域名可以理解为一个地址,就好baidu.com, sina.cn这些简称为域名,域名分为一级、二级、三级以及四级域名,如:Baidu.com,这种就是域名,www.baidu,com这种就是二级域名,www.youhua.baidu.com就是三级域名,以多少个点来区别为几级域名。
          什么是空间呢?简单来说,就是存放网站内容的地方。这两者缺一不可,如果只有baidu.com这个域名没有空间的话你访问baidu.com就会什么都没有,而只有空间没有域名,你都无法访问。
           通常买了域名和空间后会进行解析和绑定,解析就是把域名指向到空间的IP地址上面(买了空间会有一个IP地址),而空间那边需要绑定。

           其次,申请域名可到腾讯云里操作;申请成功后记得进行域名解析。购买空间可到凡科网里操作。

           然后,域名绑定空间:

     要使域名和空间绑定起来,先要将域名解析到服务器,绑定服务器的IP地址。

    方法一:在注册空间时绑定域名,注册空间时提示域名,录入要绑定的域名,在“我已阅读并接受虚拟主机租用协议”前的框中勾选,再点击确认进行确定申请开通空间。

    方法二:除注册空间时绑定域名的方式外,还有在空间面板里绑定域名——打开空间管理的控制面板,找到域名绑定一项,点击打开(注意不管是买的什么空间,管理面板都域名绑定这一功能)。在添加域名后的录入框里录入域名地址,再点击添加绑定,进行绑定确认操作。

        接着,绑定完之后,我们就开始把自己的东西上传到空间了,然后通过域名就可以访问啦:
        我们需要下载一个软件,百度一下FTP ,会有很多FTP软件,至于什么是FTP.,我们可以把它理解为一种传输协议,把本地文件传到空间的一种工具,这里我们用8UFTP为列,我们打开软件, 详见下图:

           登录成功后,我们可以看到右边用红色框起来的部分,那个部分就是存放网站内容的目录,默认是根目录,一般会有两个目录,一个存放网站内容,一个存放数据库。此后,我们就可以把自己的网页传进去了。在左边目录选中需要上传的文件右键选择上传就行了!!!

     

    参考链接:服务器运用之——云服务器Ubuntu或者CentOs搭建JavaWeb环境

    展开全文
  • 用HTML+CSS一个漂亮简单的个人网页

    万次阅读 多人点赞 2019-12-20 17:14:46
    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;
    }
    

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

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

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

    展开全文
  • 怎么把自己做网页托管在github上

    千次阅读 2018-07-24 17:17:27
    没有域名和服务器的前提下,怎么可以访问到我们的网页呢? 可以把网页代码托管在github,同样可以以站点的方式访问。 实践网址示例: https://411forget.github.io/shufa.github.io/ 1、准备条件 注册一...
    • 没有域名和服务器的前提下,怎么可以访问到我们的网页呢?
      可以把网页代码托管在github,同样可以以站点的方式访问。
      实践网址示例:
      https://411forget.github.io/shufa.github.io/

    1、准备条件

    • 注册一个github账号
    • 安装Git
    • 在github创建一个存储库,用来存放我们页面的相关代码文件
      存储库

    2、git的操作方法

    …or create a new repository on the command line
    echo "# yufa.github.io" >> README.md
    git init
    git add README.md
    git commit -m "first commit"
    git remote add origin git@github.com:411forget/shufa.github.io.git
    git push -u origin master
    …or push an existing repository from the command line
    git remote add origin git@github.com:411forget/shufa.github.io.git
    git push -u origin master
    …or import code from another repository
    You can initialize this repository with code from a Subversion, Mercurial, or TFS project.
    Import code
    

    3、将本地网页的所有代码文件都push到github上

    注意:将需要将主页的html文件命名为index.html

    push到git

    最后的文件全部push上去的效果如下:
    网页所有文件

    4、现在可以打开网址看一下效果

    具体网址是什么?
    网址哪里有
    网址哪里有

    如果打不开网址:可能是pages还是none的状态,自己设置下即可
    网址设置

    网址打开后的效果图:
    书法网址

    展开全文
  • Python实战1_1:一个自己网页

    万次阅读 多人点赞 2016-06-22 14:01:27
    参加了Python实战课程,此为第一节课的练习总结 成果 HTML代码 总结 了解了网页结构组成。 js是用于控制html页面代码,实现复杂的页面效果或功能 css用于功能html如何展示,让页面展示的美观漂亮 html用于描述网页...
  • 如何在手机上访问自己做网页

    万次阅读 2017-12-27 19:04:23
    前提:手机和电脑连接的是同一个路由器的网络。 1.搭建服务器,用Apache 2.把HTML文件放到服务器里面,打开浏览器能访问到服务器(localhost)里的HTML。 3. 查看本机的IP地址进入“网络和共享中心”(在...
  • 如何发布自己的静态网页

    万次阅读 多人点赞 2019-04-17 15:24:17
    相信大家完一些网页都想把自己网页发布出去给别人欣赏或使用,没有服务器又如何把网页发布出去呢?如果发布的仅是一个静态网页,还是很简单的。 使用对象存储云服务 对象存储(Cloud Object Storage,COS)是一...
  • 使自己做的asp.net网页适应手机浏览

    万次阅读 2016-07-26 16:40:42
    使自己做的asp.net网页适应手机浏览: 在之间插入以下代码: 参数说明: width-viewport的宽度是height-viewport的高度 initial-scale:初始的缩放比例 minimum-scale:允许用户缩放到的最小比例 maximum-...
  • 源文件中生成了helloworld.war,可根据自己的需求改为合适的名字 2. 连接服务器 下载WinScp软件,打开 再打开自己的服务器,以阿里云举例: 3. 上传war包 把自己的war包,直接拉进右侧webapps的文件内 ...
  • 前端网页需要用网页框架吗

    千次阅读 2017-09-15 15:45:07
    前端网页是不是必须要用网页框架?个人感觉这分为两种情况,一种是能力超强,时间够用的情况,另外一种就是用前端网页框架,可以节约开发时间和减少工作量,这可以根据自身的情况作出正确的判断,并不是别人说什么...
  • 一直想着整理出网页抓取的具体实现功能代码,方便大家指正,也方便自己学习修正。当然这个并不是针对所有网页自己写的功能有限,只能针对某一特定结构的网页进行数据采集,如果有更好的方法,请大家不吝指教,在此...
  • 怎么静态网页

    千次阅读 2017-11-14 17:29:59
    之前看过很多博客,都是一些大神写的关于一些比较难的问题的解决方案,而对于新手遇到的一些问题总是避而远之,我怕等我成为大神的时候(理想还是要有的,万一实现了呢)会忘记自己还是个新手的时候遇到的一些问题,...
  • 买了云服务器,现在求大佬手把手教我把我自己的HTML网页让大家可以通过我的域名访问。跪谢,我网上搜了很多,看了很多,试了很多,但是应该是我笨。真的不行了,只能求助各位大佬了,谢谢大家了。服务器:云服务器...
  • 用python一款属于自己的翻译词典软件吧,告别网页搜索,你值得拥有!! 直接将写好的代码打包成exe执行文件 cmd命令行输入pyinstaller -F 文件.py 20210601 先看一下软件效果,先登录 各种语言都可以转换 ...
  • 小媛:bit 哥,最近有人找我一个网页,但是我不会,300块钱呢。 ????1_bit:啥网页?给你300? ????小媛:吃鸡的网页,赚了300我就可以吃半个月了,下面就是一个示例。 ????1_bit:哈哈哈,我觉得一周你就用完了...
  • 自己电脑成web服务器+内网穿透并发布网页

    万次阅读 多人点赞 2018-11-24 14:00:11
    自己电脑成web服务器加内网穿透发布网站。 前言:由于学校WiFi为内网ip,且WiFi 为动态ip 由于为动态IP,每次登陆都会换IP地址,所以建议网线连接或者一直开机不断网,否则每次开机都要重新设置。本方法采用...
  • 用Github pages搭建自己制作的网页

    千次阅读 多人点赞 2016-04-21 01:40:23
    用Github pages搭建自己制作的网页,方法最简单,适用于新手!!用Github pages搭建自己制作的网页,方法最简单,适用于新手!!用Github pages搭建自己制作的网页,方法最简单,适用于新手!!用Github pages搭建...
  • 成web服务器需要满足:域名或者公网ip,电脑安装配置web服务,开启80端口允许访问,网站程序。 域名或者公网ip,这一点一般家用宽带没有固定的公网ip,常用的动态域名解析花生壳,科迈动态解析,建议申请使用...
  • 静态网页入门讲解,制作属于你自己网页(一)

    千次阅读 多人点赞 2020-01-22 22:22:38
    这个系列教程主要针对完全没有接触过网页制作的萌新小伙伴开设的,如果你有一定的网页知识积累,可以果断关闭! 网页前端设计中牵涉的内容太多了,基础教程却比较缺乏,所以博主希望能够通过这样一个系列,帮想要...
  • 如何一个网页送给女朋友生日礼物

    万次阅读 多人点赞 2020-07-30 13:07:53
    如何一个网页送给女朋友生日礼物 本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架的一个小型网站,里面可以实现跳转功能,怎么配置flask的环境变量,去官方文档看就好了,里面写...
  • 用树莓派服务器运行博客网页

    千次阅读 多人点赞 2021-07-25 18:15:27
    用三四百的树莓派开发板服务器运行博客网页,炫酷极了
  • JavaWeb项目通过TomCat让别人访问自己网页 本博客用腾讯云服务器举例,第一步可到腾讯云租赁服务器可以租学生的10元一个月,和购买一个域名如果要给网页备案需要买至少3个月的服务器。 本博客 写的 是如何 通过...
  • 下面分享一下在自己网页中嵌入百度搜索框。 在自己网页中嵌入百度搜索框 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&...
  • 首先申请个域名,用阿里服务器托管(使用免费二级域名也可以,较长的...然后修改/www下的index ,自己在/www创建一个网页,从素材网站找也可以 然后修改index的自动跳转代码, 这样基本就完成了 https 也就是443端口
  • 新手做网页设计?这9款经典网页布局设计了解下

    万次阅读 多人点赞 2018-08-29 10:18:23
    现在,越来越多的人想要建立自己的网站,通过自助建站系统就可以自己进行网页制作了。这无疑是一件好事,但是,很多设计师,尤其是新手设计师或者压根儿就不是设计师的小白,都在网页设计上走过不少弯路。 网页制作...
  • 自己网页跳转到其他网站下出现问题:URL前自动加上了自己当前的URL。原因理解了也就很简单
  • 随心所欲为网页加上自己的注释

    千次阅读 2011-10-17 15:05:07
    一般网友看到漂亮的网页都有一种信手涂鸦的冲动,如何才能...该软件其实是IE的一个插件,安装完成后,我们在浏览网页时,给网页添上自己的注解或批示。以后再次访问该网页时,这些注释会自动显示出来。 下载地址:
  • 三十分钟一个网页游戏

    千次阅读 2013-08-22 19:20:59
    这篇文章的目的是短时间之内,通过做出一个简单的缘分对对碰游戏,了解...我认为了解整体框架之后,学习过程中对于自己不懂的部分百度一下,可以学习的更快,因此我不会的过于详细。对最新标准支持比较好的是Chrome

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 467,913
精华内容 187,165
关键字:

如何做自己的网页