用HTML+CSS做一个漂亮简单的个人网页（第二篇）

最新推荐文章于 2024-01-10 10:32:23 发布

过的很好谢谢

最新推荐文章于 2024-01-10 10:32:23 发布

阅读量2.9k

点赞数 6

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67403272/article/details/126081563

版权

博主分享了一篇关于如何使用HTML和CSS制作个人网页的文章，提供了首页、关于我、日常和表单页面的代码及样式，鼓励读者根据自身审美进行调整。文中还提到了个人的编程经历，包括在知名企业的工作经验。文章最后提供了完整代码和图片的付费下载链接。

摘要由CSDN通过智能技术生成

时隔三年我把之前给我妹写的毕业论文的网站页面写出来一下哈供各位小伙伴参考参考哈不接受批评反驳哈哈哈哈哈哈哈都是我自己胡乱搭的图片和文字可自行更改，按照自己的审美喜好来哈！
先看页面的图片哈
首页：
请添加图片描述

<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='./daily.html'><span>Daily</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/lvtu.png" alt="">
                <span>教学楼是我们每天必去取经之地</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/ms.png" alt="">
                <span>每天一到饭点都要在食堂里面纠结到底吃什么</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/zp.png" alt="">
                <span>午饭后躺在草坪上晒晒太阳欣赏学校的美景</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/yinlehe.png" alt="">
                <span>忙碌又充实的一天结束爬上心爱的小床和室友聊聊天</span>
            </div>
        </div>
        <div class="introduce">
            <div class="introduce_item">
                <img class="introduce_item_img" src="./img/s24.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/s8.jpg" alt="">
            </div>

            <div class="introduce_item">
                <img class="introduce_item_img" src="./img/s10.png" 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/s6.jpg" alt="">
            </div>
            <div class="introduce_item">
                <img class="introduce_item_img" src="./img/s4.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/s35.jpg" alt="">
            </div>
        </div>
        <audio autoplay="autoplay" loop="loop" id="audio" loop="loop">
                <source src="./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>

样式：

* {
    margin: 0;
    padding: 0
}

.home {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 60px;
}

.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 -1

最低0.47元/天解锁文章