分享一款不错的个人主页 | 源码

源码分享 · 03-11 10:18

我个人觉得"个人主页"就应该:简单、大气、清新的最好(个人观点)。简洁一点的东西,看着舒服。不会让人有花里胡哨的感觉……

给大家分享一款最近看到的,我个人觉得还不错的个人主页。

PC端效果

ltmaxq60.png

手机端效果

ltmayjp2.png

源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>首页 - 刘郎阁</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            body,html{
                height:100%;
                width: 100%;
                background-color: #EFEEEE;
            }
            
            .card{    
                height: 430px;
                background-color: #EFEEEE;
                border: 0px;
                border-radius: 10px;
                box-shadow: -2px -2px 2px rgba(255,255,255,1),
                            -2px -2px 12px rgba(255,255,255,0.5),
                            inset 2px 2px 4px rgba(255,255,255,0.1),
                            2px 2px 8px rgba(0,0,0,0.15);
                transition: 2s;
            }
            .name{
                font-size: 20px;
                font-weight: bold;
                margin: 0px;
            }
            .icon{
                height: 40px;
                width: 40px;
                padding: 10px;
                border-radius: 100px;
                box-shadow: -2px -2px 2px rgba(255,255,255,1),
                            -2px -2px 12px rgba(255,255,255,0.5),
                            inset 2px 2px 4px rgba(255,255,255,0.1),
                            2px 2px 8px rgba(0,0,0,0.15)
            }
            .icon:hover{
                content: '123';
                height: 50px;
                width: 50px;
                box-shadow: inset -2px -2px 2px rgba(255,255,255,1),
                            inset -2px -2px 12px rgba(255,255,255,0.5),
                            inset 2px 2px 4px rgba(255,255,255,0.1),
                            inset 2px 2px 8px rgba(0,0,0,0.15);
                transition: .2s all;
            }
            .btn,.btn-light{
                border: 0px;
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <div class="container pt-3">
            <div class="card text-center">
                <div class="card-body">
                    <img src="https://vjo.cc/usr/uploads/logo.png" style="width: 100px; height: 100px; border-radius: 1000px;">

                    <p class="name">刘郎阁</p>
                    <small class="qm">欢迎来到我的个人主页!在这里,探索生活,追求成长。一起分享、学习、成长!</small>
                    <div class="row mt-3">
                        <div class="col-md-2 col-4">
                            <button class="btn btn-light">
                                <a href="https://vjo.cc/" style="text-decoration: none;color: black;">
                                    <img class="icon" src="img/QQ.png">
                                </a>
                            </button>
                        </div>
                        <div class="col-md-2 col-4">
                            <button class="btn btn-light">
                                <a href="img/wxhy.png" style="text-decoration: none;color: black;">
                                    <img class="icon" src="img/wx.png">
                                </a>
                            </button>
                        </div>
                        <div class="col-md-2 col-4">
                            <button class="btn btn-light">
                                <a href="https://vjo.cc/" style="text-decoration: none;color: black;">
                                    <img class="icon" src="img/weibo.png">
                                </a>
                            </button>
                        </div>
                        <div class="col-md-2 col-4">
                            <button class="btn btn-light">
                                <a href="https://vjo.cc/" style="text-decoration: none;color: black;">
                                    <img class="icon" src="img/github.png">
                                </a>
                            </button>
                        </div>
                        <div class="col-md-2 col-4">
                            <button class="btn btn-light">
                                <a href="https://vjo.cc/" style="text-decoration: none;color: black;">
                                    <img class="icon" src="img/web.png">
                                </a>
                            </button>
                        </div>
                        <div class="col-md-2 col-4">
                            <button class="btn btn-light">
                                <a href="https://vjo.cc/" style="text-decoration: none;color: black;">
                                    <img class="icon" src="img/email.png">
                                </a>
                            </button>
                        </div>
                    
            </div>
        </div><a href="http://beian.miit.gov.cn">黔ICP备2024020400号-1</a></p>
    </body>
</html>

注意:以上代码不包含图片,需要效果图中的图片的请点击下方的"源码下载"。

源码下载

Typecho 组件 优化 源码分享

上一篇 : 微信去水印小程序

下一篇 : Typecho评论区增加楼层显示


  1. HowieHz   Lv1
    06-18 12:46 第5楼 中国上海市移动Windows 10 · Google Chrome

    不错不错,挺简约的

  2. 和和   访客
    04-16 20:20 第3楼 中国陕西省西安市电信Windows 10 · Google Chrome

    来对地方了,好东西多多

    1. 刘郎   博主
      04-16 20:57 第4楼 中国移动iPhone · Safari
      @和和

      那就常来😎

  3. 随风落叶   访客
    03-13 08:15 第1个脚印 中国山东省青岛市联通iPhone · QQ Browser

    这个主页挺不错,简约好看🧐

    1. 刘郎   博主
      03-13 08:18 第2楼 中国贵州省移动iPhone · Safari
      @随风落叶

      😄

| 黔ICP备2024020400号 | 萌ICP备20246777号 | | 当前有 1 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力