目录 - Table of Contents

预设风格

从 v0.6.1 开始，我在 Typecho-Plus 中添加了一些我觉得好看、实用的CSS预设风格，而它们的使用方法也很简单！

预设类名

类名	效果
tplus-span	SPAN包装的类名，预设为 display:inline; box-sizing:border-box
tplus-div	DIV包装的类名，预设为 display:block; box-sizing:border-box
tplus-div-title	DIV标题类名，预设为 font-size:1.2em
tplus-div-content	DIV内容类名，无预设
clear	清理浮动元素，clear:both; display:block; visibility:hidden
center	仅对DIV包装有效，让DIV自动居中
left	仅对DIV包装有效，让DIV自动居左
right	仅对DIV包装有效，让DIV自动居右
textcenter	仅对DIV包装有效，所有文本居中
w100	仅对DIV包装有效，设置宽度为100%
w90	仅对DIV包装有效，设置宽度为90%
w80	仅对DIV包装有效，设置宽度为80%
w70	仅对DIV包装有效，设置宽度为70%
w60	仅对DIV包装有效，设置宽度为60%
w50	仅对DIV包装有效，设置宽度为50%
w40	仅对DIV包装有效，设置宽度为40%
w30	仅对DIV包装有效，设置宽度为30%
w20	仅对DIV包装有效，设置宽度为20%
w10	仅对DIV包装有效，设置宽度为10%
w0	仅对DIV包装有效，设置宽度为0%
dotted	对DIV、SPAN包装有效，虚线边框
dashed	对DIV、SPAN包装有效，虚线边框
solid	对DIV、SPAN包装有效，实线边框

下面的代码设置一个宽度为50%，自动居中的DIV包装

[div=center w50 dotted]
我是一个宽度50%，自动居中的DIV包装
[/div]

---

双栏设置

使用 half 可以将一个DIV设置为半栏模式，并且可以向左浮动。
下面的代码演示如何设置双栏模式：

[div=half,左边栏标题]
我是左边栏
第二行
[/div][div=half,右边栏标题]
我是右边栏
我是右边栏
我是右边栏
我是右边栏
我是右边栏
我是右边栏
我是右边栏
[/div]
[span=clear]最好清理一下浮动[/span]

注意：两个边栏的结束与开始必须放在一行，否则会被自动换行

最好清理一下浮动

甚至可以设置3栏、4栏

[div=half w30,1]
30%宽度
第二行
[/div][div=half w30,2]
30%宽度
[/div][div=half w30,3]
30%宽度
[/div]
[span=clear]最好清理一下浮动[/span]

最好清理一下浮动

---

预设提示框

预设的提示框灵感来自于dokuwiki的wrap插件，资源和风格也基本是抄袭wrap的

类名	效果
box	简易盒子，无图标
info	消息框
important	重要提醒框
alert	警告框
help	帮助框
download	下载框
todo	TODO待办框
tip	Tip提醒框

下方示例为60%宽度的信息框

[div=info w60,标题]
内容
[/div]
[div=info w60 textcenter]
无标题的内容
[/div]

---

所有提醒框：

自定义提醒框

下面我们用自己的代码来自定义一个消息提醒框

!!!
<style>
/*酷哥框*/
.tplus-div.cool{
    border-radius: 1.0em;
    margin: 1em auto -0.5em auto;
    padding: 1em 1em 1em 80px;
    overflow: hidden;

    background-color: #91ceff;
    background-image: url(/res/onion113.gif);
    background-position: 15px 50%;
    background-repeat: no-repeat;
    min-height: 68px;
}
.tplus-div.cool .tplus-div-title{
    font-size: 2em;
    font-weight: bold;
    color: #f3212b;
}
.tplus-div.cool .tplus-div-content{
    color: #9c27b0;
    font-style: italic;
}
</style>
!!!

[div=cool w70 textcenter,酷哥认证]
这个博主经过酷哥认证
绝对帅比一枚
[/div]