微信扫一扫 分享朋友圈

已有 582 人浏览分享

开启左侧

制作个人主页源码

[复制链接]
582 0
image.png image.png
image.png


<!doctype html>
<html>


        <head>
                <meta charset="utf-8">
                <title>明金同学个人网页</title>
                <style type="text/css">
                        /* CSS Document */
                        * {
                                margin: 0;
                                padding: 0;
                        }


                        a {
                                text-decoration: none;
                        }


                        .clearfix:after {
                                content: "";
                                display: block;
                                height: 0;
                                visibility: hidden;
                                clear: both;
                        }


                        .clearfix {
                                *zoom: 1;
                        }


                        body {
                                background: url(https://gitee.com/vmu/cimg/raw/master/img/bg.jpg) no-repeat;
                                background-size: cover;
                                background-attachment: fixed;
                        }


                        .content {
                                width: 900px;
                                height: 500px;
                                margin: 200px auto 0 auto;
                                border-radius: 10px;
                                background-color: rgba(236, 236, 236, 0.59);
                                transition: all 1.0s;
                                /*box-shadow: 0px 0px 20px rgba(0,0,0,0.3);*/
                        }


                        .content img {
                                float: left;
                                width: 200px;
                                height: 200px;
                                margin: 150px 0 0 80px;
                                border-radius: 100px;


                        }


                        .content:hover {
                                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.52);
                        }


                        .content_r {
                                float: right;
                                width: 500px;
                                margin: 80px 60px 0 0;
                                /*        background-color: pink;*/
                        }


                        .content_l {
                                float: left;
                                width: 100%;
                                text-align: center;
                        }


                        .content_l h5 {


                                font-size: 17px;
                        }


                        .cc {
                                margin-top: 10px;
                                color: #1F2023;
                                font-size: 18px;
                        }


                        .color_1 {
                                color: #4855EC;
                                font-size: 18px;
                        }


                        .deeppink {
                                color: deeppink;
                        }


                        .link {
                                margin-top: 30px;
                        }


                        .link a {
                                display: block;
                                float: left;
                                width: 120px;
                                height: 45px;
                                margin: 5px 5px 0 0;
                                /*        padding: 0 15px;*/
                                color: #fff;
                                line-height: 45px;
                                transition: all 0.8s;
                                /*        background-color: deeppink;*/


                        }


                        .link a:hover {
                                background-color: rgba(0, 201, 243, 0.35);
                        }


                        .deeppink_1 {
                                background-color: deeppink;
                        }


                        .dodgerblue {
                                background-color: dodgerblue;
                        }


                        .magenta {
                                background-color: magenta;
                        }


                        .orange {
                                background-color: orange;
                        }
                </style>
        </head>


        <body>
                <div class="content">
                        <img src="https://gitee.com/vmu/cimg/raw/master/img/ch.jpg" alt="">
                        <div class="content_r clearfix">
                                <div class="content_l clearfix">
                                        <h2>Hi~ 我是明金同学, Welcome here !</h2>
                                        <p class="cc">欢迎来到我的主页,一位热爱编程的小渣渣~</p>
                                        <p class="cc">爱好计算机,会去自学一些感兴趣的东西 !</p>
                                        <br>
                                        <p class="color_1">I am an ambitious salted fish!</p>
                                        <p class="color_1">我是一位有野心的咸鱼!</p>
                                        <br>
                                        <p class="deeppink">只要路是对的,就不怕路远。</p>
                                        <p class="deeppink">As long as the road is right, you are not afraid of the distance.</p>
                                        <div class="link">
                                                <a href="#" class="dodgerblue" target="_blank">官网</a>
                                                <a  class="deeppink_1" target="_blank">QQ群</a>
                                                <a  class="magenta" target="_blank">个人博客</a>
                                                <a  class="orange" target="_blank">网易云音乐</a>
                                        </div>
                                </div>
                        </div>
                </div>
        </body>


</html>



免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

56

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-4-25 09:44 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。