TXUI.css
天兴工作室简介
这玩意不能算是一个框架，因为只有一些常用的css属性集合。这就是一个简单的避免重复写css的类集之类的东西。
为什么要做这玩意呢？
工作需要，zblog主题模板开发基本上都是一些正常布局页面，左右布局三栏布局cms布局等。引入“Bootstrap”或者“layui”这类框架的话又太大了，毕竟每个主题的风格都不一样，框架会把大部分的界面风格都写了，我不需要这些固定风格，我只需要能布局和有一些基本定义就可以了。于是就自己一边学习一边实践搞出了这个玩意，很有可能只适合我自己用。
为什么要写这个文档呢？
因为基本上我把它都集成到我制作的zblog主题里面去了，所以如果你想自己修改或者二开我写的zblog主题，而你又有一定的css基础，那么推荐你可以参考下本文档可以更快速的上手。
能力有限，肯定会有很多错误或者不合适的地方，请不吝赐教。
作者：天兴工作室；
版本：2020-07-26。
常用属性
| 属性 | 介绍说明 |
| class="tx-table" | 用于美化表格，显示灰色1px边框的内边距为10px的表格样式 |
| class="fl" | 左浮动 |
| class="fr" | 右浮动 |
| class="ta-l" | 文字左对齐 |
| class="ta-r" | 文字右对齐 |
| class="ta-c" | 文字居中对齐 |
| class="f-bold" | 文字粗体 |
| class="f-lighter" | 文字细体 |
| class="show" | 显示为block块 |
| class="hide" | 隐藏 |
| class="pchide" | pc端隐藏 |
| class="waphide" | 手机端隐藏 |
| class="tx-inline" | 显示为inline内联元素 |
| class="ov-h" | 溢出隐藏 |
| class="txt-ov" | 单行文本溢出隐藏...结尾 |
| class="tx-hr" | 用于美化分隔线，显示为灰色1px的分隔线 |
| class="boder" | 给块增加1px灰色边框 |
| class="boder-t" | 给块顶部增加1px灰色边框 |
| class="boder-b" | 给块底部增加1px灰色边框 |
| class="tx-radius" | 块设置圆角，border-radius值为50%； |
| class="tx-text" | 正文内容部分，里面的p、h1、h2、图片、iframe等模块都已经处理好； |
栅格
栅格容器里面一共被平分成24等份，容器的类名是class="row"，容器内项目的类名pc端是class="col-数字"，手机端是class="col-m-数字"。其中的数字范围从“1”到“24”，对应分成多少等份。另外还增加了一个class="col-25"可以栅格平分为5等份。
示例：
- 50%
- 50%
- 33.33%
- 33.33%
- 33.33%
- 4.1%
- 8.333%
- 16.666%
- 20.833%
- 25%
- 33.333%
- 20%
- 20%
- 20%
- 20%
- 20%
- 100%
栅格的间距
栅格的间距只需要在容器加上类名class="row-space数字"即可，数字范围有“2，3，5，7，8，10，15，20，30”，数字为间距的1/2，单位为px。例如你设置了row-space5，那么间距为10px。手机端栅格间距控制加上类名class="row-m-space数字"即可（手机端多了一个row-m-space0可以重置间隔为0），同样的数字为间距数值的1/2。
示例：
-
50%，间距10px
-
50%，间距10px
-
33.33%，间距20px
-
33.33%，间距20px
-
33.33%，间距20px
-
20%，间距40px
-
20%，间距40px
-
20%，间距40px
-
20%，间距40px
-
20%，间距40px
均分栅格
在父容器上设置class="tx-column-数字"即可把子容器分割为对应数字的平均宽度[手机端为class="tx-column-m-数字"]，数字范围从2-10.案例如下
-
20%，间距20px
-
20%，间距20px
-
20%，间距20px
-
20%，间距20px
-
20%，间距20px
外边距
外边距分为上下左右，上边距的类名是class="mt数字";下边距的类名是class="mb数字";左边距的类名是class="ml数字";右边距的类名是class="mr数字";
数字范围：“5”、“10”、“15”、“20”，对应该边距的数值，单位为px.下边距多增加了“30”和“40”两个数字。
示例：
内边距
内边距的类名是class="pd数字-类型"，数字代表内边距数值单位是px，数字范围是“5”、“10”、“15”、“20”，“30”、“40”、“60”。
数字：“10”、“15”、“20”还可以设定类型，一共有四种分别用数字“1”、“2”、“3”、“4”表示，分别对应“上下为内边距数值，左右为0”、“左右为内边距数值，上下为0”、“上左右为内边距数值，下为0”、“左右为内边距数值，上面为内边距一半的数值”。
完整代码class="pd20"或者class="pd20-1"。
示例：
字体大小
字体大小的类名是class="f-数字"，数字代表字体大小的数值单位是px，数字范围从“8”到“20”，另外还有几个大字体数值为“22”、“26”、“30”、“36”。
完整代码class="f-12"或者class="f-30"。
示例：
大小为8
大小为9
大小为10
大小为11
大小为12
大小为13
大小为14
大小为15
大小为16
大小为17
大小为18
大小为19
大小为20
大小为22
大小为26
大小为30
大小为36
颜色
自带颜色分为背景色、字体颜色和边框颜色，背景色的类名为class="bg-色名"；字体颜色的类名为class="f-色名"；边框颜色的类名为class="b-色名"。
色名-->对应色值
gray-->#eee
gray1-->#f2f2f2
white-->#ffffff
red-->#f00
yellow-->#ff6f3d
green-->#5fb878
blue-->#1e9fff
black-->#111111
完整代码class="bg-blue"或者class="f-yellow"或者class="b-yellow"。
背景色示例：
-
灰色
-
浅灰
-
白色
-
红色
-
黄色
-
绿色
-
蓝色
-
黑色
字体色示例：
灰色
浅灰
看不见的白色藏在里面了，找找吧
红色
黄色
绿色
蓝色
黑色
边框色示例：
行距
默认行距是“1.5”，也就是文字高度的1.5倍。当然也内置了一点自定义行距属性，类名是class="lh-数字"，数字代表行距是字体高度的倍数。数字有"1",“2”、“3”、“4”、“5”四种。
示例：
还有限制多行高度的属性，“rows-2”限制最多2行文字，行高为字体高度1.5倍，高度为行高2倍的块并超出隐藏；“rows-3”限制最多3行文字，行高为字体高度1.5倍，高度为行高3倍的块并超出隐藏；另外还有“rows-2s”和“rows-3s”区别在于后者限制的是最大高度。
示例：
另外还有限制有序列表行高的属性，类名分别为ul-2、ul-22、ul-24、ul-26、ul-3，限制ul>li的行高为类名里数字的倍数，超出隐藏。
示例：
- 行高为字体高度2倍的li列表，超出文字会被隐藏
- 行高为字体高度2倍的li列表，超出文字会被隐藏
- 行高为字体高度2倍的li列表，超出文字会被隐藏
- 行高为字体高度2.2倍的li列表，超出文字会被隐藏
- 行高为字体高度2.2倍的li列表，超出文字会被隐藏
- 行高为字体高度2.2倍的li列表，超出文字会被隐藏
- 行高为字体高度2.4倍的li列表，超出文字会被隐藏
- 行高为字体高度2.4倍的li列表，超出文字会被隐藏
- 行高为字体高度2.4倍的li列表，超出文字会被隐藏
- 行高为字体高度2.6倍的li列表，超出文字会被隐藏
- 行高为字体高度2.6倍的li列表，超出文字会被隐藏
- 行高为字体高度2.6倍的li列表，超出文字会被隐藏
- 行高为字体高度3倍的li列表，超出文字会被隐藏
- 行高为字体高度3倍的li列表，超出文字会被隐藏
- 行高为字体高度3倍的li列表，超出文字会被隐藏
表单
按钮
按钮样式可以用在button或者a上，当然你也可以用在任意的块或者内联元素上，已经做好了相应的初始化。类名为class="tx-btn"。
示例
可以后面加背景色自定义，字体颜色自定义，栗子：
按钮有四种大小，正常的就是class="tx-btn"，大一点是class="tx-btn tx-btn-big"，小一点的是class="tx-btn tx-btn-small"，最小的是class="tx-btn tx-btn-mini"。栗子如下：
按钮组
边框按钮样式，代码class="tx-btn tx-btn-primary"。栗子如下：
按钮圆角样式，代码class="tx-btn tx-btn-radius"。栗子如下：
100%宽度按钮样式，代码class="tx-btn tx-btn-d"。栗子如下：
响应式缩略图
响应式的缩略图一直是一个比较容易出问题的点，因为响应式缩略图宽度就不能固定，宽度不固定高度也就不好固定。所以我们直接是用百分比来控制图片的，不管在什么分辨率的屏幕下显示缩略图都会保证固定的比例。
类名为class="img-box" data-ratio="50"，其中的50意思就是这张缩略图会以长宽比为100：50的比例展示。内置的其他属性还有“40”、“60”、“75”、“100”、“150”分别对应固定长宽比的缩略图。
示例
FLEX布局
| 属性 | 介绍说明 |
| class="tx-flex" | 设定为flex布局 |
| class="tx-flex-hc" | 设定为flex布局并设置竖向居中 |
| class="tx-flex-wc" | 设定为flex布局并设置为横向居中 |
| class="tx-flex-wr" | 横向右对齐 |
| class="tx-flex-wb" | 横向两端对齐 |
| class="tx-flex-wrap" | flex布局超出屏幕换行显示 |
| class="tx-flex-sh" | flex项目属性，不管屏幕大小如何变动此项目宽度不变 |
| class="tx-flex-dtc" | 容器内项目为竖向排列 |
| class="tx-flex-st" | 此容器下的项目高度相同 |
| class="tx-flex-gr" | flex项目属性，会撑满剩余空间 |
| class="tx-flex-col1" | 此容器下的项目第一个固定第二个撑满 |
| class="tx-flex-col2" | 此容器下的项目第一个撑满第二个固定 |
文章正文通用样式
这是H1文本
这是H2文本
这是H3文本
这是H4文本
这是H5文本
这是H6文本
下面是一条分隔线
插入一张图片
这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落
还有一些内联元素
加粗、斜体、下划线？、
下面是一个表格
| 111 | 111 | 111 | 111 |
| 111 | 111 | 111 | 111 |
这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落这是正常段落
这是引用文字这是引用文字这是引用文字
引用里面的段落
下面是无序列表
- 这是ul>li无序列表
- 这是ul>li无序列表
- 这是ul>li无序列表
下面是有序列表
- 这是ol>li有序列表这是ol>li有序列表这是ol>li有序列表这是ol>li有序列表这是ol>li有序列表这是ol>li有序列表这是ol>li有序列表这是ol>li有序列表这是ol>li有序列表这是ol>li有序列表
- 这是ol>li有序列表
- 这是ol>li有序列表
- 这是ol>li有序列表
- 这是ol>li有序列表
- 这是ol>li有序列表
- 这是ol>li有序列表
其他
提示框，class="alert 类型"，类型有三种：“alert-danger”错误；“alert-warning”警示；“alert-success”绿色通行，示例如下：