斑竹滴帖子排版手册 - 喵宅苑 MewoGarden × 技术宅社区II | Z站 Z Station 棒棒哒纯文字二次元技术社区

<div class="gn_content"> <div class="gn_box">使用前，请先开启帖子的HTML功能哦！</div> <div class="gn_title"><span></span>简介</div> <p>唔……大家之前有看到我排版的比较漂亮的帖子，我终于有闲心去把样式库写好了（日常使用应该够了），下面是使用说明。</p> <div class="gn_title"><span class="gn_title_red"></span>颜色主题</div> <p>我在样式库里给大家预置了3个颜色主题，分别是蓝色（默认颜色）、红色、和绿色。看下面的三个按钮：</p> <div class="gn_btn">蓝色按钮</div> <div class="gn_btn gn_btn_green">绿色按钮</div> <div class="gn_btn gn_btn_red">红色按钮</div> <p>3个按钮的代码如下：</p> <div class="gn_box">

<div class="gn_btn">蓝色按钮</div> <div class="gn_btn gn_btn_green">绿色按钮</div> <div class="gn_btn gn_btn_red">红色按钮</div>

</div> <p>你可以随意选择你喜欢的颜色，注意，div标签在不添任何class属性的情况下，代表，100%宽度，根据内容自动调整高度的一个“盒子”，在指定class样式后会根据样式规定进行调整，我这里统一使用div标签来生成“盒子”。</p> <p>你可以直接复制代码到任何一个开启html功能的帖子里面查看效果哦！（注意该功能只对版主开发）</p> <div class="gn_title"><span class="gn_title_green"></span>正文和标题</div> <p>HTML文档格式中规定，换行使用“<br>”标签，通常情况下，如果你没有在行的末尾添加br标签的话，用回车换行是无效的。</p> <p>要写正文内容的时候，请先用div标签生成一个“盒子”，并指定它的class属性为content，像这样：</p> <xmp> <div class="gn_content">这里是正文内容</div> </xmp> <p>然后在class属性为gn_content的标签里，添加标题和段落，要添加标题，请使用以下代码来生成，就像本文的3个标题一样：</p> <div class="box">

<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>

</div> <p>不理解直接复制粘贴即可。</p> <p>然后是段落，在class属性为gn_content的盒子里，使用p标签可以生成一个首行缩进2字符，文字大小15px的段落，如下图示：</p> <xmp> <div class="gn_content"> <p>我是段落A</p> <p>我是段落B</p> <p>我是段落C</p> </div> </xmp> <p>然后是灰色的块，像本文开头的那句话一样，使用class属性为gn_box的div标签生成一个灰色圆角块，如下代码：</p> <div class="gn_box">

<div class="gn_box">这里可以写一些东西，或者存放代码。</div>

</div> <p>各种div标签可以随意组和，但是注意，只有在class为content的盒子下，p标签的缩进才会按上述给定的标准。</p> <div class="gn_title"><span></span>卡片容器</div> <div class="gn_card"> <div class="gn_card_body"> 将div的class属性设置为gn_card，将会生成一个卡片，就像本文的样子。一个卡片分为头部header（通常用于写标题），和身体body（通常用于写卡片内容），生成一个具有头部和身体的卡片，请使用：<br>

<div class="gn_card"> <div class="gn_card_head">我是头部</div> <div class="gn_card_body">我是身体</div> </div>

效果如下： <div class="gn_card"> <div class="gn_card_header">我是头部</div> <div class="gn_card_body">我是身体</div> </div> </div> </div> </div> </div>

喵宅苑 MewoGarden × 技术宅社区II | Z站 Z Station 棒棒哒纯文字二次元技术社区

正文

回复