网站LOGO
友幻猫
页面加载中
2月24日
网站LOGO 友幻猫
夜雨闻卿至🎞️清酒待君归
菜单
  • 友幻猫
    夜雨闻卿至🎞️清酒待君归
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    一款好看的引导页html模板
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。

    一款好看的引导页html模板

    猫语 · 原创 ·
    实用网站知识星球 · 引导页导航页个人主页
    共 3427 字 · 约 1 分钟 · 10

    1894048968.webp1894048968.webp
    代码来自Hellohao图像托管
    作者:hellohao
    是个个人用户使用的一款精简引导页

    html 代码:
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AyagawaSeirin/homepage@double/mdui/css/mdui.min.css">
        <style>
    body {
        margin: 0;
        background: #2e2e2c;
    }
    * {
        -webkit-tap-highlight-color: transparent;
    }
    ::selection {
        color: #e0e0e0;
        background: rgba(255,64,129,.35);
    }
    #rin-bg{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -2;
        position: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 50% 50%;
        background-color: #818181;
        background-image: url('https://i.loli.net/2021/10/12/rFGtyNsK7BHYSOD.jpg');
    }
    #rin-bg:after {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        z-index: -1;
        position: fixed;
        background-color: rgba(66,66,66,.6);
    }
    
    #rin-footer {
        bottom: 0;
        margin: auto;
        width: 100vw;
        position: absolute;
        padding: 10px 0 10px 0;
    }
    #rin-footer div {
        font-size: 14px;
        text-align: center;
        color: rgba(255,255,255,.79);
    }
    #rin-footer div a {
        color: #2196f3;
        font-weight: 700;
        transition: all .3s;
        text-decoration: none;
    }
    .rin-tr {
        width: 80%;
        height: 2px;
        margin: auto;
        background: rgba(255,255,255,.3);
    }
    
    /*index start*/
    #rin-main {
        width: 600px;
        margin: auto;
        text-align: center;
        margin-top: calc(50vh - 200px);
    }
    @media (max-width: 600px){
        #rin-main {
            width: 95%;
        }
    }
    #rin-headimg{
        background-image: url('https://i.loli.net/2021/10/12/SvDkMW6EQYs3hm9.jpg');
        border-radius: 50%;
        height: 150px;
        width:150px;
        margin: auto;
        cursor: pointer;
        background-size: cover;
        border: 3px solid #fff;
        background-repeat: no-repeat;
        box-shadow: 0 0 8px 0 rgba(0,0,0,.55);
        -webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
    }
    
    #rin-headimg:hover{
        -webkit-transform: rotateZ(360deg);
        transform:rotate(360deg) scale(1.2);
    }
    .rin-name{
        margin-top: 20px;
        color:white;
        font-size: 26px;
        font-weight: 700;
        text-shadow: 0 0 8px rgba(255,255,255,.55);
    }
    .rin-description{
        color:white;
        text-shadow: 0 0 8px rgba(255,255,255,.55);
        font-size: 20px;
        margin-top: 15px;
        margin-bottom: 20px;
        letter-spacing:8px;
    }
    .rin-btn {
        color:white;
        margin-top: 10px;
    }
        </style>
    </head>
    <body>
    <div id="rin-bg"></div>
    <main id="rin-main">
        <div id="rin-headimg"></div>
        <div class="rin-name">友幻猫博客</div>
        <div class="rin-description">「夜雨闻卿至,清酒待君归」</div>
        <div class="rin-tr"></div>
        <a class="mdui-btn mdui-btn-raised rin-btn mdui-text-capitalize toPage">立即体验</a>
    </main>
    <footer id="rin-footer">
        <div>© 2021 <a href="" id="bg-link" target="_blank">猫ICP备2024000006号-1</a>  - All Rights Reserved </div>
    </footer>
    </body>
    </html>
    声明:本文由 猫语(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    发一条! 发一条!
    博客logo 友幻猫 夜雨闻卿至🎞️清酒待君归
    ICP 豫ICP备2022018876号-1 ICP 豫公网安备41142502000136号 又拍云 本站由又拍云提供CDN加速/云存储服务

    🕛

    本站已运行 54 天 17 小时 32 分
    友幻猫. © 2024 ~ 2024.
    网站logo

    友幻猫 夜雨闻卿至🎞️清酒待君归
     
     
     
     
    壁纸