分享下主页的源码

@zgcwkj  2021年08月20日

分类：

网站 代码 

标签：

Html 

分享下一个简洁主页的源码，示例：http://zgcwkj.cn

转载时，请注意出处！

源码：

<!-- 未经允许，请勿盗用！by zgcwkj -->
<!DOCTYPE html>

<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zgcwkj</title>
</head>
<style>
    * {
        margin: 0;
    }

    a {
        color: ghostwhite;
        text-decoration: none;
        display: inline-block;
        margin: 5px 10px;
    }

    body {
        width: 100vw;
        height: 100vh;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(48, 47, 75, 1);
        flex-direction: column;
    }

    hr {
        width: 100%;
        height: 1px;
        border: none;
        border-top: 1px solid #fff;
    }

    .welcome {
        width: 110px;
        height: 110px;
        background: url(./zgcwkj.png)  no-repeat scroll center  #fff;
        border-radius: 50%;
        box-shadow: 0px 0px 10px 5px rgb(255 255 255 / 40%);
    }

    .content {
        width: 25vw;
        margin: 30px 0;
        font-size: 18px;
        text-align: left;
        line-height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .synopsis {
        width: 90%;
        margin: 10px;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 5px;
    }

    .button {
        border: 1px solid #fff;
        border-radius: 20px;
        font-size: 25px;
        color: #fff;
    }

    .parting {
        display: initial;
        border-left: 1px dashed #fff;
    }

    .beian {
        position: absolute;
        bottom: 5px;
    }

    @media(max-width:768px) {
        .content {
            width: 55vw;
        }
    }

    @media(max-width:425px) {
        .content {
            width: 85vw;
        }
    }
</style>
<body>
    <div class="welcome"></div>
    <div class="content">
        <hr />
        <div class="synopsis">
            <span id="hitokoto">&nbsp;&nbsp;没有谁的生活会一直完美，但无论什么时候，都要看着前方，满怀希望就会所向披靡。</span>
            <br>
            <span style="float: right;" id="creator">——巫哲《撒野》 </span>
        </div>
        <hr />
    </div>
    <div class="button">
        <a href="http://blog.zgcwkj.cn/" target="_blank">Blog</a>
        <div class="parting"></div>
        <a href="http://github.com/zgcwkj" target="_blank">GitHub</a>
        <div class="parting"></div>
        <a href="mailto:[email protected]" target="_blank">Email</a>
    </div>
    <div class="beian">
        <a href="http://beian.miit.gov.cn" target="_blank">粤ICP备 17128259 号</a>
    </div>
</body>
</html>

新版样式：

<style>
    * {
        margin: 0;
    }
    
    html {
        background-image: url(background.jpg);
        background-size: cover;
        background-position: center;
    }

    a {
        color: ghostwhite;
        text-decoration: none;
        display: inline-block;
        margin: 5px 10px;
    }

    body {
        width: 100vw;
        height: 100vh;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(48, 47, 75, 0.6);
        flex-direction: column;
    }

    hr {
        width: 100%;
        height: 1px;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .welcome {
        width: 110px;
        height: 110px;
        background: url(./zgcwkj.png)  no-repeat scroll center #fff;
        border-radius: 50%;
        box-shadow: 0px 0px 10px 5px rgb(255 255 255 / 40%);
        backdrop-filter: blur(10px);
    }

    .content {
        width: 25vw;
        margin: 30px 0;
        font-size: 18px;
        text-align: left;
        line-height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .synopsis {
        width: 90%;
        margin: 10px;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
    }

    .button {
        color: #fff;
        font-size: 25px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }
    
    .button-more {
        margin-top: 20px;
        font-size: 15px;
    }
    
    .parting {
        display: initial;
        border-left: 1px dashed rgba(255, 255, 255, 0.2);
    }

    .beian {
        position: absolute;
        bottom: 5px;
    }

    @media(max-width:768px) {
        .content {
            width: 55vw;
        }
    }

    @media(max-width:425px) {
        .content {
            width: 85vw;
        }
    }
</style>

需要对接一言的，加上下面一段：

<script>
    try {
        var ajax = new XMLHttpRequest();
        ajax.open('get', 'https://v1.hitokoto.cn/?c=k&min_length=15&max_length=30');
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                var data = JSON.parse(ajax.responseText);
                document.getElementById("hitokoto").innerHTML = `&nbsp;&nbsp;${data.hitokoto}`;
                document.getElementById("creator").innerHTML = `by ${data.from}`;
            }
        }
    } catch { }
</script>

版权属于：zgcwkj

本文链接：https://zgcwkj.com/archives/172.html

转载声明：请注明本文章的标题及内容的出处和声明，谢谢

评论已关闭

Top