Cirno_qwa's Blog

一、此博客的Style样式

1.Miku色按钮样式
模板 1：大按钮

1
<mark style="background-color:#39C5BB;padding:4px 10px;border-radius:6px 6px 6px 6px;color:white;font-weight:bold;"><a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">大按钮名</a></mark>

大按钮名

模板 2：小按钮

1
<mark style="background-color:#39C5BB;padding:2px 6px;border-radius:4px 4px 4px 4px;color:white;font-weight:bold;"><a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">小按钮名</a></mark>

小按钮名

2.Miku色链接样式我是链接内容示例
模板 1：行内小标签（适合放在段落文字中间、末尾）
这个格式的圆角较小（4px），适合作为文字里的小标注、小按钮，比如“资料来源”或“点击访问”。

1
<mark style="background-color: #39C5BB; padding: 2px 6px; border-radius: 4px 0 0 4px;"><a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">这里换成链接文字</a></mark><mark style="background-color: #FFB6C1; padding: 2px 6px; border-radius: 0 4px 4px 0; color: white; font-size: 0.9em;"><a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">这里换成右侧说明文字</a></mark>

如:
这里换成链接文字这里换成右侧说明文字

模板 2：独立行大标签（最适合“友情链接”或底部列表）
这个格式的圆角更大一些（6px），并且自带

标签包裹，确保每个链接会自动独立成行，不会和前后文死死贴在一起。

1
2
3
4
5
6
7
<p>
<mark style="background-color: #39C5BB; padding: 4px 10px; border-radius: 6px 0 0 6px;">
    <a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">网站/项目名</a>
</mark><mark style="background-color: #FFB6C1; padding: 4px 10px; border-radius: 0 6px 6px 0; color: white; font-size: 0.9em;">
    作者: XXX / 网址等信息
</mark>
</p>

如:

网站/项目名 作者: XXX / 网址等信息