博客样式代码（写予自己的一篇教程）
部分 Html 5 前端代码
input
input 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<!-- checkbox -->
<div>
<input type="checkbox"> <!-- checkbox 表示方形，也可用 Markdown 的 "- [x] " 表示 -->
<input type="checkbox" disabled> <!-- disabled 表示禁用 -->
<input type="checkbox" checked> <!-- checked 表示默认勾选 -->
<input type="checkbox" checked disabled>
</div>
<!-- radio -->
<div>
<input type="radio"> <!-- radio 表示圆形 -->
<input type="radio" disabled>
<input type="radio" checked>
<input type="radio" checked disabled>
</div>
<!-- button -->
<div>
<input type="button" value="Button"> <!-- button 表示按钮 -->
<input type="button" value="Button" disabled>
</div>
<!-- text -->
<div>
<input type="text" value="value"><br> <!-- text 表示文本 | value 表示内容 -->
<input type="text" value="value" disabled>
</div>
<!-- range -->
<div>
<input type="range"><br> <!-- range 表示范围 -->
</div>
select
select 1
2
3
4
5
6
7
8
9
10
11
12
13<div>
<select>
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
</select>
<select disabled>
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
</select>
</div>
textarea
textarea 1
2
3
4<div>
<textarea>value</textarea><br>
<textarea disabled>value</textarea>
</div>
progress
progress 1
2
3
4
5<div>
<progress style="width:60%;" max="100" value="0"></progress><br>
<progress style="width:60%;" max="100" value="50"></progress><br>
<progress style="width:60%;" max="100" value="100"></progress><br>
</div>
meter
meter 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<div>
<meter style="width:60%;" min="0" max="100" low="33" high="66" optimum="80" value="20"></meter><br>
<meter style="width:60%;" min="0" max="100" low="33" high="66" optimum="80" value="50"></meter><br>
<meter style="width:60%;" min="0" max="100" low="33" high="66" optimum="80" value="90"></meter>
</div>
<!-- min 表示最小值 -->
<!-- max 表示最大值 -->
<!-- low 定义了低值区间的上限值（如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在[min,low]、[high,max]等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。 -->
<!-- high 定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。 -->
<!-- optimum 这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。 -->
样式代码
引用
引用 1
<blockquote class="question"> 内容 </blockquote>
内容
可自定义
位置：\主题文件\source\_data\styles.styl 1
2
3
4
5
6
7
8
9// 引用（主要修改3，4，5行）
blockquote.question { // “question”为引用名字，用于书写代码，不必准确
color: #ffffff; // 字体颜色
border-left: 4px solid rgb(105, 105, 105); // 边框粗细及颜色
background-color: rgb(169, 169, 169); // 背景颜色
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-bottom: 20px;
}
note标签
1
2
3
4
5
6/* “no-icon”为是否显示图标，若要显示请删除 */
<div class="note no-icon"> 内容 </div>
{% note no-icon %}
内容
{% endnote %}
内容
default 1
2
3
4
5
6/* “no-icon”为是否显示图标，若要显示请删除 */
<div class="note default no-icon"> 内容 </div>
{% note default no-icon %}
内容
{% endnote %}
内容
primary 1
2
3
4
5
6/* “no-icon”为是否显示图标，若要显示请删除 */
<div class="note primary no-icon"> 内容 </div>
{% note primary no-icon %}
内容
{% endnote %}
内容
info 1
2
3
4
5
6/* “no-icon”为是否显示图标，若要显示请删除 */
<div class="note info no-icon"> 内容 </div>
{% note info no-icon %}
内容
{% endnote %}
内容
success 1
2
3
4
5
6/* “no-icon”为是否显示图标，若要显示请删除 */
<div class="note success no-icon"> 内容 </div>
{% note success no-icon %}
内容
{% endnote %}
内容
warning 1
2
3
4
5
6/* “no-icon”为是否显示图标，若要显示请删除 */
<div class="note warning no-icon"> 内容 </div>
{% note warning no-icon %}
内容
{% endnote %}
内容
danger 1
2
3
4
5
6/* “no-icon”为是否显示图标，若要显示请删除 */
<div class="note danger no-icon"> 内容 </div>
{% note danger no-icon %}
内容
{% endnote %}
内容
样式配置
位置：\主题\_config.yml（主要修改8，9行） 1
2
3
4
5
6
7
8
9
10
11
12
13# Note tag (bs-callout).
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: flat # 风格（上方四种）
icons: true # 是否显示图标
border_radius: 3 # 圆角矩形
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0
label标签
default 1
{% label default@内容%}
primary 1
{% label primary@内容%}
success 1
{% label success@内容%}
info 1
{% label info@内容%}
warning 1
{% label warning@内容%}
danger 1
{% label danger@内容%}
文字背景色块
蓝色 1
<span id="inline-blue">内容</span>
内容
紫色 1
<span id="inline-purple">内容</span>
内容
黄色 1
<span id="inline-yellow">内容</span>
内容
绿色 1
<span id="inline-green">内容</span>
内容
灰色 1
<span id="inline-gray">内容</span>
内容
可自定义和增加
位置：\主题文件\source\_data\styles.styl 1
2
3
4
5
6
7
8
9
10
11
12
13
14// 颜色块（主要修改第13行）
span#inline-blue { // “blue”为颜色（用于代码书写，不必准确）
display:inline;
padding:.2em .6em .3em;
font-size:80%; // 文字大小
font-weight:bold; // 文字修饰（“bold”为粗体）
line-height:1;
color:#fff; // 文字颜色
text-align:center; // 文本位置（“center”为居中）
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3; // 背景色
}
边框
左
红色 1
<span id="div-border-left-red"> 内容 </span>
内容
黄色 1
<span id="div-border-left-yellow"> 内容 </span>
内容
绿色 1
<span id="div-border-left-green"> 内容 </span>
内容
蓝色 1
<span id="div-border-left-blue"> 内容 </span>
内容
紫色 1
<span id="div-border-left-purple"> 内容 </span>
内容
右
红 1
<span id="div-border-right-red"> 内容 </span>
内容
黄色 1
<span id="div-border-right-yellow"> 内容 </span>
内容
绿色 1
<span id="div-border-right-green"> 内容 </span>
内容
蓝色 1
<span id="div-border-right-blue"> 内容 </span>
内容
紫色 1
<span id="div-border-right-purple"> 内容 </span>
内容
上
红 1
<span id="div-border-top-red"> 内容 </span>
内容
黄色 1
<span id="div-border-top-yellow"> 内容 </span>
内容
绿色 1
<span id="div-border-top-green"> 内容 </span>
内容
蓝色 1
<span id="div-border-top-blue"> 内容 </span>
内容
紫色 1
<span id="div-border-top-purple"> 内容 </span>
内容
下
红 1
<span id="div-border-bottom-red"> 内容 </span>
内容
黄色 1
<span id="div-border-bottom-yellow"> 内容 </span>
内容
绿色 1
<span id="div-border-bottom-green"> 内容 </span>
内容
蓝色 1
<span id="div-border-bottom-blue"> 内容 </span>
内容
紫色 1
<span id="div-border-bottom-purple"> 内容 </span>
内容
可自定义和增加
位置：\主题文件\source\_data\styles.styl 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26// 单边框（主要修改7，8，9行）
span#div-border-left-red { // “left”为位置，“red”为颜色（用于代码书写，不必准确）
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc; // 边框粗细及颜色，“1px”为像素大小（下同）
border-left-width: 5px; // “left”为位置，准确填写（下同）
border-radius: 3px; // 边框半径（粗细）
border-left-color: #df3e3e; // 边框颜色
// border-image: linear-gradient(#000, #df3e3e) 10; //边框渐变
}
//双边框
//左右边框（参考单边框代码修改）
span#div-border-right-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc; // 边框粗细及颜色，“1px”为像素大小（下同）
border-right-width: 5px; // “right”为位置，准确填写（下同）
border-left-width: 5px; // “left”为位置，准确填写（下同）
border-radius: 3px;
border-right-color: #df3e3e; // 右边框颜色
border-left-color: #df3e3e; // 左边框颜色
}
//上下边框请参考左右边框内容
数字块
数字块 1
<span id="inline-toc"> 数字 </span>
数字
可自定义
位置：\主题文件\source\_data\styles.styl 1
2
3
4
5
6
7
8
9
10// 自定义的数字块
span#inline-toc {
display: inline-block;
border-radius: 0% 60% 0% 60%;
background-color: rgb(128, 128, 128);
color: #ffffff;
padding: 0.05em 0.4em;
margin: 2px 5px 2px 0px;
line-height: 1.5;
}
tabs 标签
tabs （可按规律增加，“1”表示默认选项卡1打开，非必须，若数值为-1则表示所有选项卡处于关闭状态） 1
2
3
4
5
6
7
8
9
10
11{% tabs 选项卡名, 1 %}
<!-- tab 选项卡1名@图标名 -->
选项卡 1 内容
<!-- endtab -->
<!-- tab 选项卡2名@图标名 -->
选项卡 2 内容
<!-- endtab -->
<!-- tab 选项卡3名@图标名 -->
选项卡 3 内容
<!-- endtab -->
{% endtabs %}
选项卡 1 内容
选项卡 2 内容
选项卡 3 内容
样式自定义
位置：\主题文件\source\_data\styles.styl 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22// tabs
.post-body .tabs .tab-content .tab-pane.active, .tabs-comment .tab-content .tab-pane.active { // 下部
background-color: rgba(68, 68, 68, 0.3);
border-left: 1px solid #aba7d5;
border-right: 1px solid #aba7d5;
border-bottom: 1px solid #aba7d5;
}
.post-body .tabs ul.nav-tabs li.tab, .tabs-comment ul.nav-tabs li.tab { // 上部
border-bottom: 1px solid #aba7d5;
&:hover { // 鼠标移过
font-weight: bold;
font-size: 15px;
}
&.active { // 选中状态
background-color: rgba(68, 68, 68, 0.3);
border-top: 3px solid #aba7d5;
border-left: 1px solid #aba7d5;
border-right: 1px solid #aba7d5;
font-weight: bold;
font-size: 15px;
}
}
按钮
Download 1
<a id="download" href="下载地址"><i class="fa fa-download"></i><span> Download </span> </a>
YouTube 1
<a id="youtube" href="视频地址"><i class="fab fa-youtube"></i><span> YouTube </span> </a>
BiliBili 1
<a id="bilibili" href="视频地址"><i class="iconfont icon-bilibili fa-fw"></i><span> BiliBili </span> </a>
可自定义和增加
位置：\主题文件\source\_data\styles.styl 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// 按钮（主要修改5，7，12行）
a#download { // “download”为代码名
display: inline-block;
padding: 0 10px;
color: #000; // 字体颜色
background: transparent; // 背景（“transparent”为透明）
border: 2px solid #000; // 边框类型、粗细及颜色
border-radius: 2px; // 边框半径
transition: all .5s ease; // 过渡
font-weight: bold; // 文字修饰（“bold”为粗体）
&:hover { // 悬停设置（鼠标停留时）
background: #000; color: #fff; // 背景及字体颜色
border: 2px dashed #000; // 边框类型、粗细及颜色
}
}
折叠
使用方法
1
2
3
4
5
6
7{% folding 参数（可选）, 标题 %}
内容
{% endfolding %}
{# 参数 #}
{# 颜色：blue、cyan、green、yellow、red #}
{# 状态：open #}
标题
内容
标题
内容
标题
内容
标题
内容
标题
内容
标题
内容
嵌入 Steam 游戏标签
使用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16{# 单个插入 #}
{% steamgame appid description %}
{# 批量插入 #}
{% steamgames %}
appid
appid
appid
···
appid
appid
appid
{% endsteamgames %}
{# appid: Steam 游戏 appid #}
{# description(可选): 用于替换默认游戏简介 #}
Link Grid
使用方法
1
2
3
4
5
6{% linkgrid [image] [delimiter] [comment] %}{% endlinkgrid %}
{% lg [image] [delimiter] [comment] %}{% endlg %}
{# [image] : 默认图片 URL #}
{# [delimiter] : 每行中项目的定界符 #}
{# [comment] : 注释掉一行的符号 #}
1 | {% lg /images/apple-touch-icon-next.png , . %} |