使用前,请先开启帖子的HTML功能哦!
简介
唔……大家之前有看到我排版的比较漂亮的帖子,我终于有闲心去把样式库写好了(日常使用应该够了),下面是使用说明。
颜色主题
我在样式库里给大家预置了3个颜色主题,分别是蓝色(默认颜色)、红色、和绿色。看下面的三个按钮:
蓝色按钮
绿色按钮
红色按钮
3个按钮的代码如下:
-
- <div class="gn_btn">蓝色按钮</div>
- <div class="gn_btn gn_btn_green">绿色按钮</div>
- <div class="gn_btn gn_btn_red">红色按钮</div>
-
复制代码
你可以随意选择你喜欢的颜色,注意,div标签在不添任何class属性的情况下,代表,100%宽度,根据内容自动调整高度的一个“盒子”,在指定class样式后会根据样式规定进行调整,我这里统一使用div标签来生成“盒子”。
你可以直接复制代码到任何一个开启html功能的帖子里面查看效果哦!(注意该功能只对版主开发)
正文和标题
HTML文档格式中规定,换行使用“<br>”标签,通常情况下,如果你没有在行的末尾添加br标签的话,用回车换行是无效的。
要写正文内容的时候,请先用div标签生成一个“盒子”,并指定它的class属性为content,像这样:
这里是正文内容
然后在class属性为gn_content的标签里,添加标题和段落,要添加标题,请使用以下代码来生成,就像本文的3个标题一样:
-
- <div class="gn_title"><span></span>我是蓝色标题</div>
- <div class="gn_title"><span class="gn_title_red"></span>我是红色标题</div>
- <div class="gn_title"><span class"gn_title_green"></span>我是绿色标题</div>
-
复制代码
不理解直接复制粘贴即可。
然后是段落,在class属性为gn_content的盒子里,使用p标签可以生成一个首行缩进2字符,文字大小15px的段落,如下图示:
然后是灰色的块,像本文开头的那句话一样,使用class属性为gn_box的div标签生成一个灰色圆角块,如下代码:
- <div class="gn_box">这里可以写一些东西,或者存放代码。</div>
复制代码
各种div标签可以随意组和,但是注意,只有在class为content的盒子下,p标签的缩进才会按上述给定的标准。
卡片容器
将div的class属性设置为gn_card,将会生成一个卡片,就像本文的样子。一个卡片分为头部header(通常用于写标题),和身体body(通常用于写卡片内容),生成一个具有头部和身体的卡片,请使用:
-
- <div class="gn_card">
- <div class="gn_card_head">我是头部</div>
- <div class="gn_card_body">我是身体</div>
- </div>
-
复制代码效果如下: