大学生自我介绍模板(html+css)(附代码)

最新推荐文章于 2024-07-05 21:33:03 发布

市井皆温柔China

最新推荐文章于 2024-07-05 21:33:03 发布

阅读量4.4k

点赞数 6

文章标签： css html css3 html5

本文链接：https://blog.csdn.net/aaaaaahhhhhhGod/article/details/133951525

版权

个人介绍网页效果图

(一共分为六个页面,分别为index1,index2,首页,秘密花园,兴趣爱好,人生理想.)

第一个页面-index1:

当鼠标移动到字体上时,字体会变大变亮,点击字体跳转到下一个页面.

第二个页面-index2:

主要写人生格言,大概介绍一下自己,当鼠标移动到"欢迎来到我的....探索之旅吧!"字体会变亮,当鼠标点击时会跳转到下一个界面.

第三个页面-首页:

这个页面主要设置了顶部五个导航栏,点击任意一处都可以跳转到相应的页面

第四个页面-我的秘密花园:

这个页面也就是相册,运用了swiper,音频,动图等,鼠标点击照片可以左向右进行滑动,点击顶部导航栏跳转到下一个页面.

第五个页面-兴趣爱好:

主页介绍自己的兴趣爱好,记录自己的生活!

第六个页面-人生理想:

主页写自己的人生理想,加入了视频.

下面是代码:

第一个页面-index1:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }

        h2 {
            color: #222;
            font-size: 100px;
        }

        h2 a {
            text-decoration: none;
            color: white;
        }

        h2 span {
            transition: 0.5s;
        }

        h2:hover span:nth-child(1) {
            margin-right: 10px;
        }

        h2:hover span:nth-child(2) {
            margin-left: 30px;
        }

        h2 span:nth-child(1)::after {
            opacity: 0;
            transition: 2s;
        }

        h2:hover span:nth-child(1)::after {
            content: "'";
            opacity: 1;
        }

        h2:hover span {
            color: white;
            text-shadow: 0 0 10px #fff,
                0 0 20px #fff,
                0 0 40px #fff,
                0 0 80px #fff;


        }
    </style>

第二个页面-index2:

<style>
        body {
            margin: 0;
            padding: 0;
            background: url("images/封面1.jpg") no-repeat;
            background-size: cover;
        }
        .box {
            color: rgb(6, 173, 151);
            width: 750px;
            padding: 40px;
            text-align: center;
            margin: auto;
            margin-top: 5%;
            font-family: 'Century Gothic', sans-serif;
        }
        .box .box-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }
        .box hr {
            width: 650px;

        }
        .box h1 {
            font-size: 50px;
            letter-spacing: 4px;
            font-weight: 400;

        }
        .box h2 {
            font-size: 25px;
            letter-spacing: 3px;
            font-weight: 300;
            color: rgb(11, 236, 183);
            font-weight: 400;
        }
        .box h2 .two {
            font-size: 30px;
            letter-spacing: 3px;
            font-weight: 300;

        }
        .one {
            text-decoration: none;
            font-size: 20px;
            font-weight: 600;
            color: grey;
        }
        .one:hover {
            color: rgb(6, 173, 151);
        }
        .h2 .container {
            height: 40px;
            display: flex;
            /* 弹性布局,水平，垂直居中*/
            justify-content: center;
            align-items: center;
        }
        span {
            font-size: 25px;
            font-weight: bold;
            text-transform: uppercase;
            /* 转为大写*/
            letter-spacing: 5px;
            /* 字间距*/
            color: #111;
            filter: blur(2px);
            /* 模糊滤镜*/
            animation: animate 1.5s linear infinite;
            /* 动画：动画名称 动画时长 线性的 无限次播放*/
        }
        /* 为每一个span元素设置动画延迟时间*/
        span:nth-child(1) {
            animation-delay: 0s;
        }

        @keyframes animate {

            /* 定义动画关键帧*/
            0%,
            100% {
                color: #fff;
                filter: blur(2px);
                /*模糊滤镜*/
                text-shadow: 0 0 10px #32ff7e, 0 0 20px #32ff7e, 0 0 30px #32ff7e,
                    0 0 40px #32ff7e, 0 0 100px #32ff7e, 0 0 200px #32ff7e;
            }

            5%,
            95% {
                color: #111;
                filter: blur(0px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images\头像2.jpg" alt="" class="box-img">
        <h2>把书读烂,把路走宽,一定要靠自己发光!</h2>
        <hr>
        <h2 class="one">xxx</h2>
        <h2 class="two">立志成为一名军人的爱国青年!</h2>
        <br>
        <h2>清澈的爱只为中国 !</h2>
        <h3>Clear love only for China !</h3>
        <h2><a href="首页3.html">
        <div class="container">
            <span>欢迎来到我的世界!
                接下来,开启你的探索之旅吧!</span>
    </a></h2>
    </div>
</body>

第三个页面-首页:

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url() no-repeat;
            background-size: cover;
            background-color: rgb(184, 245, 247);
        }

        .box {
            width: 1200px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin: 0 auto;
            text-align: center;
            margin-top: 7%;

        }

        .box .left a {
            display: block;
            width: 200px;
            height: 90px;
            background: rgba(0, 0, 0, 0.2);
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            padding-left: 30px;
            line-height: 90px;
        }

        .box .left a:hover {
            background-color: #ff6700;
        }

        .left {
            float: left;
            width: 230px;
            height: 540px;
            background-color: cadetblue;
            background: rgba(0, 0, 0, 0.2);
        }

        .right {
            float: right;
            width: 970px;
            height: 540px;
            background-color: rgba(152, 233, 233, 0.2);
            ;

        }

        .right>div {
            float: left;
            width: 470px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin-left: 14px;
            margin-bottom: 14px;
        }

        .right .one {
            background-color: rgb(152, 233, 233, 0.2);
        }

        .right .photo {
            width: 490px;
            height: 540px;
        }

        .right .one h1 {
            color: white;
            font-size: 60px;
        }

        .right .one p {
            font-size: 30px;
            font-weight: 500;
            color: rgb(11, 99, 106);
            font-style: italic;
            text-align: left;
            line-height: 60px;
        }
        .bottom {
            text-align: center;
            border-bottom: 50px;
            margin-bottom: 0px;
        }
        .box .left .shouye1 {
            background-color: #13bdd8;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">G-Dragon</a>
        <a href="#" target="_blank" class="shouye">首页</a>
        <a href="秘密花园4.html" target="_blank">我的秘密花园</a>
        <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
        <a href="人生理想6.html" target="_blank">人生理想</a>
    </div>
    <div class="box">
        <div class="left">
            <a href="#">G-Dragon</a>
            <a href="#" target="_blank" class="shouye1">首页</a>
            <a href="秘密花园4.html" target="_blank">我的秘密花园</a>
            <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
            <a href="人生理想6.html" target="_blank">人生理想</a>
        </div>
        <div class="right">
            <div class="one">
                <h1>About us</h1>
                <br>
                <p>Describe: 一名爱国青年</p>
                <p>name: xxx</p>
                <p>Age: 20岁</p>
                <p>Dream: 当兵</p>
                <p>Motto:</p>
                <p>&nbsp;&nbsp;清澈的爱只为中国!</p>
                <p>&nbsp;&nbsp;生而逢盛世,青年当有为!</p>
            </div>
            <div>
                <img src="images\背景图2.jpg" alt="" class="photo">
            </div>
        </div>
    </div>
    
</body>

第四个页面-我的秘密花园:

<style>
        body {
            background: #a3ebf6;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 300px;
            height: 300px;
        }



        .nav {
            height: 41px;
            border-top: 3px solid #b4fffa;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {

            display: inline-block;
            height: 41px;
            font-size: 15px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0px 20px;
        }

        .nav a:hover {
            background-color: #fcfcfc;
            color: #93d9eb;
        }

        .nav .secret {
            background-color: #93d9eb;
        }

        .pt-down {
            position: relative;
            width: 400px;
            height: 300px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .text {
            position: relative;
            width: 950px;
            height: 350px;
            position: absolute;
            bottom: 0;
            right: 0;
            text-align: center;
            }
    </style>
</head>

<body>

    <div class="nav">
        <a href="#">G-Dragon</a>
        <a href="首页3.html" target="_blank">首页</a>
        <a href="#" target="_blank" class="secret">我的秘密花园</a>
        <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
        <a href="人生理想6.html" target="_blank">人生理想</a>
    </div>

    <div class="pt-down">
        <img src="images\哆啦A梦3.gif" alt="">

        <audio controls="controls">
            <source src="audio\阎维文 - 强军战歌.ogg" type="audio/ogg" >
            <source src="audio\阎维文 - 强军战歌.mp3" type="audio/mpeg">不支持
        </audio>
        <audio autoplay="autoplay" loop="loop">
            <source src="audio\阎维文 - 强军战歌.ogg" type="audio.ogg">
            <source src="audio\阎维文 - 强军战歌.mp3" type="audio.mpeg">
        </audio>
    </div>
    <div class="text">
        <h1>欢迎来到我的秘密花园</h1>
        <h2>欢迎你开启探索之旅!</h2>
        <h2>在这里你可以看到很多不一样的我,发现我的另一面,知道我的更多秘密哦!</h2>
        <br>
        <h1>So,请不要定义我, 我颠覆你的想象 !</h1>
        <p>请点击左边的播放器,我们一起来在音乐中探索更多秘密吧!</p>
        <br>
    </div>


    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/1.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/2.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/3.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/4.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/5.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/6.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/7.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/8.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/9.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/10.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/11.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/12.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/13.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/我的秘密花园/14.jpg)"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- Swiper JS -->
    <script src="swiper\swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: '.swiper-pagination',
            },
        });
    </script>
</body>

第五个页面-兴趣爱好:

<style>
        body {
            background: #a3ebf6;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 41px;
            border-top: 3px solid #b4fffa;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {

            display: inline-block;
            height: 41px;
            font-size: 15px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0px 20px;
        }

        .nav a:hover {
            background-color: #fcfcfc;
            color: #93d9eb;
        }

        .nav .hobby {
            background-color: #93d9eb;
        }



        .box01 {
            width: 1100px;
            height: 100px;
            padding-top: 30px;
            text-align: center;

        }

        .box01 h1 {
            font-size: 30px;
            font-weight: normal;
            text-align: center;

        }

        .box01 h2 {
            font-size: 20px;
            font-weight: normal;
            text-align: center;
        }

        /*-----box3开始-----*/
        .box03 {
            width: 888px;
            height: 823px;
            margin: 0 auto;
            border: #c6c4c5 2px solid;
            border-top: none;
            border-bottom: #c6c4c5 10px solid;
            margin-top: 80px;
        }

        .box03 .bx1 {
            width: 886px;
            height: 330px;
            margin-top: 20px;
        }

        .box03 .bx1 img {
            width: 445px;
            height: 325px;
            float: left;
            margin-left: 60px;
            margin-right: 110px;
        }

        .box03 .bx1 .right {
            width: 215px;
            height: 330px;
            float: left;
            text-align: center
        }

        .box03 .bx1 .right h1 {
            font-size: 20px;
            width: 30px;
            height: 235px;
            float: right;
            line-height: 25px;
            padding-left: 10px;
            margin-top: -15px;
        }

        .box03 .bx1 .right h1 span {
            background: #F00;
            padding: 2px;
            font-size: 12px;
        }

        .box03 .bx1 .right h2 {
            font-size: 20px;
            width: 30px;
            float: right;
            line-height: 25px;
            background: #F00;
            padding: 10px 0px;
            margin-left: 10px;

        }

        .box03 .bx1 .right p {
            color: #5e5e5e;
            width: 26px;
            float: right;
            font-size: 14px;
            line-height: 15px;
            border-right: #333 1px solid;
            padding: 0px 2px;
        }

        .box03 .bx2 {
            width: 50px;
            height: 78px;
            margin: 0 auto;
            margin-left: auto;
            background: url(../images/03.jpg) no-repeat;
            margin-left: 470px;
        }

        .box03 .bx2 p {
            color: #5e5e5e;
            width: 25px;
            float: right;
            font-size: 14px;
            line-height: 15px;
            padding: 0px 18px;
            height: 50px;
        }

        .box03 .bx2 .padd0 {
            padding: 0px !important;
        }

        .marl60 {
            margin-left: 60px;
        }

        .mar0 {
            margin-right: 0px !important;
        }

        .box03 .bx3 {
            width: 25px;
            height: 80px;
            border: #e70012 1px solid;
            float: left;
            text-align: center;
            line-height: 20px;
            font-weight: bold;
            margin-left: 20px;
            margin-top: 260px;
        }


        /*-----foot开始-----*/
        #foot {
            height: 220px;
            width: 100%;
            background: #4cc8ee;
            text-align: center;
            margin-top: 100px;
        }

        #foot #foot1 img {
            margin-top: 0px;
            float: left;
        }

        /*---foot结束-----*/
        div,
        p,
        input,
        ul,
        li,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        dl,
        dt,
        dd {
            height: auto;
            margin: 0;
            ;
            padding: 0;
            vertical-align: middle;
        }
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">G-Dragon</a>
        <a href="首页3.html" target="_blank">首页</a>
        <a href="秘密花园4.html" target="_blank" class="secret">我的秘密花园</a>
        <a href="#" target="_blank" class="hobby">兴趣爱好</a>
        <a href="人生理想6.html" target="_blank">人生理想</a>
    </div>
    <!----box1开始------>
    <div class="box01">
        <h1>要活在自己的喜欢里,那才叫活着!</h1>
        <br>
        <br>
        <h2>热烈的青春比太阳还耀眼!</h2>
        <br>
        <br>
        <h2>自愈 阅己 悦己 越己</h2>
    </div>
    <!----box3开始------>
    <div class="box03">
        <div class="bx1">
            <img src="images\天安门.jpg" />
            <div class="right">
                <h1>喜欢追光<span>红</span></h1>
                <h2>光芒万丈</h2>
                <p>生在红旗下<br />
                <p>
                <p>长在春风里<br /></p>
                <p>人民有信仰<br /></p>
                <p>国家有力量<br /></p>
            </div>
        </div>
        <div class="bx2">
            <p>爱国</p>
            <p class="padd0">拥军</p>
        </div>
        <div class="bx1">
            <div class="right marl60">
                <h1>中国<span>爱</span></h1>
                <h2>繁荣昌盛</h2>
                <p>生而逢盛世 </p>
                <p>青年当有为</p>
                <p>清澈的爱只为中国</p>
            </div>
            <img class="mar0" src="images\背景图1.jpg" />
            <div class="bx3">查看更多</div>
        </div>
    </div>
    <!----box3开始------>
    <div class="box03">
        <div class="bx1">
            <img src="images\飞机.jpg" />
            <div class="right">
                <h1>喜欢军事<span>酷</span></h1>
                <h2>军迷</h2>
                <p>热爱祖国<br />
                <p>
                <p>大国重器<br /></p>
                <p>中国已不再是以前的中国了<br /></p>
                <p>现在的中国不在受人欺负了<br /></p>
            </div>
        </div>
        <div class="bx2">
            <p>爱国青年</p>
            <p class="padd0">拥军</p>
        </div>
        <div class="bx1">
            <div class="right marl60">
                <h1>喜欢旅游<span>自由</span></h1>
                <h2>赤诚热爱</h2>
                <p>要山 要海 要自由 </p>
                <p>愿意一直在路上</p>
                <p>热烈的青春比太阳还耀眼</p>
            </div>
            <img class="mar0" src="images\旅游.jpg" />
            <div class="bx3">查看更多</div>
        </div>
    </div>
    <!----foot开始------>
    <div id="foot">
        <div id="foot1">
            <img src="images\哆啦A梦3.gif" />
            <h1>欢迎来到我的世界</h1>
            <br>
            <br>
            <br>
            <br>
            <h2>看到这里,你对我有多少了解了呢,接下来带你来看看我的人生理想吧!</h2>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
    </div>
</body>

第六个页面-人生理想:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url() no-repeat;
            background-size: cover;
            background-color: rgb(184, 245, 247);
        }

        .box {
            width: 1200px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin: 0 auto;
            text-align: center;
            margin-top: 7%;

        }

        .box .left a {
            display: block;
            width: 200px;
            height: 90px;
            background: rgba(0, 0, 0, 0.2);
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            padding-left: 30px;
            line-height: 90px;
        }

        .box .left a:hover {
            background-color: #ff6700;
        }

        .left {
            float: left;
            width: 230px;
            height: 540px;
            background-color: cadetblue;
            background: rgba(0, 0, 0, 0.2);
        }

        .right {
            float: right;
            width: 970px;
            height: 540px;
            background-color: rgba(152, 233, 233, 0.2);
            ;

        }

        .right>div {
            float: left;
            width: 470px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin-left: 14px;
            margin-bottom: 14px;
        }

        .right .one {
            background-color: rgb(152, 233, 233, 0.2);
        }


        .right .one h1 {
            color: white;
            font-size: 60px;
        }

        .right .one p {
            font-size: 30px;
            font-weight: 500;
            color: rgb(11, 99, 106);
            font-style: italic;
            text-align: left;
            line-height: 60px;
        }

        .bottom {
            text-align: center;
            border-bottom: 50px;
            margin-bottom: 0px;
        }

        .box .left .Dream {
            background-color: #13bdd8;
        }

        .video-container {
            max-width: 490px;
            
            margin: 0 auto;
        }

        .video-container video {
            width: 100%;
            height: 540px;
            display: block;
        }
        .nav .Dream {
    background-color: #93d9eb;
}
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">G-Dragon</a>
        <a href="首页3.html" target="_blank" >首页</a>
        <a href="秘密花园4.html" target="_blank">我的秘密花园</a>
        <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
        <a href="#" target="_blank" class="Dream">人生理想</a>
    </div>
    <div class="box">
        <div class="left">
            <a href="#">G-Dragon</a>
            <a href="首页3.html" target="_blank" >首页</a>
            <a href="秘密花园4.html" target="_blank">我的秘密花园</a>
            <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
            <a href="#" target="_blank" class="Dream">人生理想</a>
        </div>
        <div class="right">
            <div class="one">
                <h1>My Dream</h1>
                <br>
                <p>我的人生理想:</p>
                <p>&nbsp;&nbsp;当兵, </p>
                <p>成为一名中国人民解放军军人!</p>
                <p>报效国家,守卫边疆!</p>
                <p>生在红旗下,长在春风里,人民有信仰,国家有力量,民族有希望!</p>
                <p>生而逢盛世,青年当有为!</p>             
            </div>

            <div class="video-container">
                <video controls="controls" autoplay="autoplay" loop="loop" muted>
                    <source src="video\敬礼.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>
</body>