[已解决]github图片

琅琊王朝 · 发表于 2023-10-4 21:34:46

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

https://camo.githubusercontent.com/38addf36de1adf564c9a5ac099668238564ce3065487df2aa3491356ef040a22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2545362539422542342545362539362542302545362539372542362545392539372542342d323032332545352542392542343325453625394325383832332545362539372541352d6c6967687467726579

怎么获取像上面的图片风格的按钮？
我访问https://camo.githubusercontent.com/给我整出来个404

最佳答案

月排行榜 / 总排行榜

TKXZ

2023-10-21 20:16:13

琅琊王朝发表于 2023-10-21 17:49
怎么填写内容？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: inline-block;
            position: relative;
            font-size: 12px;
            color: #fff;
            text-align: center;
        }

        .box img {
            vertical-align: middle;
        }

        .box .subbox {
            position: absolute;
            top: 50%;
            transform: translate3d(0, -50%, 0);
        }

        .box .tag {
            display: inline-block;
            width: 37%;
            left: 0;
        }

        .box .tag__content {
            display: inline-block;
            width: 63%;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
            alt="">
        <span class="tag subbox">访问时间</span>
        <span class="tag__content subbox">2023-10-24</span>
    </div>
</body>

</html>

写一些CSS就可以啦

跳转到最佳答案楼层

isdkz · 发表于 2023-10-4 21:35:08

这种图片风格的按钮是通过使用SVG（可缩放矢量图形）来实现的。SVG是一种基于XML的图像格式，可以在不失真的情况下缩放。要使用这种图片风格的按钮，您可以使用以下步骤：

1. 在您的HTML文件中添加一个SVG元素。例如：

<svg width="200" height="50"> <rect x="0" y="0" width="200" height="50" rx="25" ry="25" style="fill:#E6B22D;stroke-width:2;stroke:#E6B22D" /> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="#FFFFFF">按钮</text> </svg>

在这个例子中，我们使用 <rect> 元素创建一个矩形，使用 rx 和 ry 属性来设置矩形的圆角半径，使用 fill 属性来设置矩形的填充颜色，使用 stroke-width 和 stroke 属性来设置矩形的边框颜色和宽度。我们还使用 <text> 元素添加了一个文本标签，用于在按钮上显示文本。

2. 您可以使用CSS样式来自定义SVG元素。例如：

svg { cursor: pointer; transition: all 0.2s ease-in-out; } svg:hover rect { fill: #F5A623; stroke: #F5A623; } svg:hover text { fill: #FFFFFF; }

在这个例子中，我们使用CSS样式来设置鼠标指针的样式，并添加了一个过渡效果。我们还使用 :hover 伪类来设置鼠标悬停时的样式。

请注意，您需要将SVG代码嵌入到HTML文件中或将其作为单独的文件引用，而不是使用图像URL来获取SVG。

歌者文明清理员 · 发表于 2023-10-4 23:15:39

https://www.runoob.com/svg/svg-inhtml.html

琅琊王朝 · 发表于 2023-10-5 12:10:30

歌者文明清理员发表于 2023-10-4 23:15
https://www.runoob.com/svg/svg-inhtml.html

额我知道怎么插入，我要的是这个svg

Darth_EF · 发表于 2023-10-21 15:39:53

可以使用DataURI作为你的图形资源

/**
 * 创建 时间展示 svg内容
 * @param {Date} date 
 * @returns {string} 返回svg内容
 */
function create_SVG__DateView(date){
    var date_str=`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
    // 此处svg内容源自提问中的链接 : https://camo.githubusercontent.com/38addf36de1adf564c9a5ac099668238564ce3065487df2aa3491356ef040a22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2545362539422542342545362539362542302545362539372542362545392539372542342d323032332545352542392542343325453625394325383832332545362539372541352d6c6967687467726579
    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20" role="img" aria-label="更新时间: ${date_str}"><title>更新时间: ${date_str}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="55" height="20" fill="#555"/><rect x="55" width="91" height="20" fill="#9f9f9f"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="285" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">更新时间</text><text x="285" y="140" transform="scale(.1)" fill="#fff" textLength="450">更新时间</text><text aria-hidden="true" x="995" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="810">${date_str}</text><text x="995" y="140" transform="scale(.1)" fill="#fff" textLength="810">${date_str}</text></g></svg>`;
}

// 字符串转base64
function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode('0x' + p1);
    }));
}

/** 创建 data URI
 * @param {string} head 文件类型头    
 * @param {string} data 原文数据
 */
function create_DataURI(head,data){ return `data:${head};base64,`+b64EncodeUnicode(data); }

// svg文件的DataURI头为  "image/svg+xml"
console.log(create_DataURI("image/svg+xml", create_SVG__DateView(new Date(Date.now()))));

最后console.log中输出的就是可用的svg的DataURI

Darth_EF · 发表于 2023-10-21 15:41:19

Darth_EF 发表于 2023-10-21 15:39
可以使用DataURI作为你的图形资源

最后console.log中输出的就是可用的svg的DataURI

这是我刚才执行这段代码后得到的输出, 直接可以当成svg资源使用
data:image/svg+xml;base64,JTNDc3ZnJTIweG1sbnM9JTIyaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmclMjIlMjB4bWxuczp4bGluaz0lMjJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJTIyJTIwd2lkdGg9JTIyMTQ2JTIyJTIwaGVpZ2h0PSUyMjIwJTIyJTIwcm9sZT0lMjJpbWclMjIlMjBhcmlhLWxhYmVsPSUyMiVFNiU5QiVCNCVFNiU5NiVCMCVFNiU5NyVCNiVFOSU5NyVCNDolMjAyMDIzJUU1JUI5JUI0MyVFNiU5QyU4ODIzJUU2JTk3JUE1JTIyJTNFJTNDdGl0bGUlM0UlRTYlOUIlQjQlRTYlOTYlQjAlRTYlOTclQjYlRTklOTclQjQ6JTIwMjAyMyVFNSVCOSVCNDMlRTYlOUMlODgyMyVFNiU5NyVBNSUzQy90aXRsZSUzRSUzQ2xpbmVhckdyYWRpZW50JTIwaWQ9JTIycyUyMiUyMHgyPSUyMjAlMjIlMjB5Mj0lMjIxMDAlMjUlMjIlM0UlM0NzdG9wJTIwb2Zmc2V0PSUyMjAlMjIlMjBzdG9wLWNvbG9yPSUyMiNiYmIlMjIlMjBzdG9wLW9wYWNpdHk9JTIyLjElMjIvJTNFJTNDc3RvcCUyMG9mZnNldD0lMjIxJTIyJTIwc3RvcC1vcGFjaXR5PSUyMi4xJTIyLyUzRSUzQy9saW5lYXJHcmFkaWVudCUzRSUzQ2NsaXBQYXRoJTIwaWQ9JTIyciUyMiUzRSUzQ3JlY3QlMjB3aWR0aD0lMjIxNDYlMjIlMjBoZWlnaHQ9JTIyMjAlMjIlMjByeD0lMjIzJTIyJTIwZmlsbD0lMjIjZmZmJTIyLyUzRSUzQy9jbGlwUGF0aCUzRSUzQ2clMjBjbGlwLXBhdGg9JTIydXJsKCNyKSUyMiUzRSUzQ3JlY3QlMjB3aWR0aD0lMjI1NSUyMiUyMGhlaWdodD0lMjIyMCUyMiUyMGZpbGw9JTIyIzU1NSUyMi8lM0UlM0NyZWN0JTIweD0lMjI1NSUyMiUyMHdpZHRoPSUyMjkxJTIyJTIwaGVpZ2h0PSUyMjIwJTIyJTIwZmlsbD0lMjIjOWY5ZjlmJTIyLyUzRSUzQ3JlY3QlMjB3aWR0aD0lMjIxNDYlMjIlMjBoZWlnaHQ9JTIyMjAlMjIlMjBmaWxsPSUyMnVybCgjcyklMjIvJTNFJTNDL2clM0UlM0NnJTIwZmlsbD0lMjIjZmZmJTIyJTIwdGV4dC1hbmNob3I9JTIybWlkZGxlJTIyJTIwZm9udC1mYW1pbHk9JTIyVmVyZGFuYSxHZW5ldmEsRGVqYVZ1JTIwU2FucyxzYW5zLXNlcmlmJTIyJTIwdGV4dC1yZW5kZXJpbmc9JTIyZ2VvbWV0cmljUHJlY2lzaW9uJTIyJTIwZm9udC1zaXplPSUyMjExMCUyMiUzRSUzQ3RleHQlMjBhcmlhLWhpZGRlbj0lMjJ0cnVlJTIyJTIweD0lMjIyODUlMjIlMjB5PSUyMjE1MCUyMiUyMGZpbGw9JTIyIzAxMDEwMSUyMiUyMGZpbGwtb3BhY2l0eT0lMjIuMyUyMiUyMHRyYW5zZm9ybT0lMjJzY2FsZSguMSklMjIlMjB0ZXh0TGVuZ3RoPSUyMjQ1MCUyMiUzRSVFNiU5QiVCNCVFNiU5NiVCMCVFNiU5NyVCNiVFOSU5NyVCNCUzQy90ZXh0JTNFJTNDdGV4dCUyMHg9JTIyMjg1JTIyJTIweT0lMjIxNDAlMjIlMjB0cmFuc2Zvcm09JTIyc2NhbGUoLjEpJTIyJTIwZmlsbD0lMjIjZmZmJTIyJTIwdGV4dExlbmd0aD0lMjI0NTAlMjIlM0UlRTYlOUIlQjQlRTYlOTYlQjAlRTYlOTclQjYlRTklOTclQjQlM0MvdGV4dCUzRSUzQ3RleHQlMjBhcmlhLWhpZGRlbj0lMjJ0cnVlJTIyJTIweD0lMjI5OTUlMjIlMjB5PSUyMjE1MCUyMiUyMGZpbGw9JTIyIzAxMDEwMSUyMiUyMGZpbGwtb3BhY2l0eT0lMjIuMyUyMiUyMHRyYW5zZm9ybT0lMjJzY2FsZSguMSklMjIlMjB0ZXh0TGVuZ3RoPSUyMjgxMCUyMiUzRTIwMjMlRTUlQjklQjQzJUU2JTlDJTg4MjMlRTYlOTclQTUlM0MvdGV4dCUzRSUzQ3RleHQlMjB4PSUyMjk5NSUyMiUyMHk9JTIyMTQwJTIyJTIwdHJhbnNmb3JtPSUyMnNjYWxlKC4xKSUyMiUyMGZpbGw9JTIyI2ZmZiUyMiUyMHRleHRMZW5ndGg9JTIyODEwJTIyJTNFMjAyMyVFNSVCOSVCNDMlRTYlOUMlODgyMyVFNiU5NyVBNSUzQy90ZXh0JTNFJTNDL2clM0UlM0Mvc3ZnJTNF

琅琊王朝 · 发表于 2023-10-21 15:43:44

Darth_EF 发表于 2023-10-21 15:39
可以使用DataURI作为你的图形资源

最后console.log中输出的就是可用的svg的DataURI

???

Darth_EF · 发表于 2023-10-21 15:47:38

琅琊王朝发表于 2023-10-21 15:43
???

?

琅琊王朝 · 发表于 2023-10-21 17:28:28

Darth_EF 发表于 2023-10-21 15:47
?

看不懂

我太弱了

TKXZ · 发表于 2023-10-21 17:40:41

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 140px;
            height: 20px;
        }
    </style>
</head>

<body>
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
        alt="">
</body>

</html>

TKXZ · 发表于 2023-10-21 17:42:13

TKXZ 发表于 2023-10-21 17:40

将svg转为base64格式,而不是链接，我设置了img宽度高度，这个你可以自己设定其他值，代码直接可以使用

琅琊王朝 · 发表于 2023-10-21 17:49:27

TKXZ 发表于 2023-10-21 17:42
将svg转为base64格式,而不是链接，我设置了img宽度高度，这个你可以自己设定其他值，代码直接可以使用

怎么填写内容？

Darth_EF · 发表于 2023-10-21 18:00:30

琅琊王朝发表于 2023-10-21 17:49
怎么填写内容？

运行5楼我那些js代码，然后会输出一段DataURI的连接，然后像10楼那样把DataURI放到img里或者用background-image，就能显示svg内容

登录/注册后可看大图

TKXZ · 发表于 2023-10-21 20:16:13

琅琊王朝发表于 2023-10-21 17:49
怎么填写内容？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: inline-block;
            position: relative;
            font-size: 12px;
            color: #fff;
            text-align: center;
        }

        .box img {
            vertical-align: middle;
        }

        .box .subbox {
            position: absolute;
            top: 50%;
            transform: translate3d(0, -50%, 0);
        }

        .box .tag {
            display: inline-block;
            width: 37%;
            left: 0;
        }

        .box .tag__content {
            display: inline-block;
            width: 63%;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
            alt="">
        <span class="tag subbox">访问时间</span>
        <span class="tag__content subbox">2023-10-24</span>
    </div>
</body>

</html>

写一些CSS就可以啦

账号		自动登录	找回密码
密码			立即注册