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

Blue_sdo

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

Blue_sdo

展开Biu

<div class="gn_btn gn_btn_green"><a href="http://www.baidu.com" target="_blank">打开百度</a></div>
<div class="gn_btn gn_btn_green><a href="http://www.baidu.com" target="_blank">打开百度</a></div>
那改成这样
[查看全文]

戴蒙先生

展开Biu

本帖最后由 戴蒙先生 于 2018-5-25 22:21 编辑 <br /><br />不是很懂，测试一下 *本站禁止HTML标签噢*  *本站禁止HTML标签噢*
换行符 *本站禁止HTML标签噢*
<div class="gn_box">所以这是类似引用</div>
<div class="gn_box">所以这是类似引用</div>
 *本站禁止HTML标签噢*
<div class="gn_btn gn_btn_green">下载地址</div>按钮怎么添加链接呢？
<div class="gn_btn gn_btn_green">下载地址</div>
*本站禁止HTML标签噢*
<div class="gn_box">
<div class="gn_title"> *本站禁止HTML标签噢* </span>剧情简介</div>
<div class="gn_content">
*本站禁止HTML标签噢* 彼得帕克（汤姆·赫兰德 Tom Holland 饰）在内战后受到了钢铁侠托尼斯塔克（小罗伯特·唐尼 Robert Downey Jr. 饰）的赏识，表面上，彼得进入托尼的公司成为了一名实习生，实际上，他和复仇者联盟的成员们一起接受了各种各样的训练。托尼虽然欣赏彼得的勇敢和正直，却并不认为他目前已经拥有加入复联的实力，他派出了特工哈皮（乔恩·费儒 Jon Favreau 饰）暗中观察，这让十分想证明自己的彼得感到万分焦躁。 </p>
*本站禁止HTML标签噢* 在对付两个银行劫匪的过程中，彼得发现劫匪们使用的是一种前所未见的新型武器，他孤身一人深入敌后顺藤摸瓜找到了幕后主使秃鹰（迈克尔·基顿 Michael Keaton 饰），让他彼得没有想到的是，秃鹰竟然是他爱慕的女生利兹（劳拉·海瑞尔 Laura Harrier 饰）的父亲。</p>
</div>
</div>
<div class="gn_box">
<div class="gn_title"> *本站禁止HTML标签噢* </span>剧情简介</div>
<div class="gn_content">
*本站禁止HTML标签噢* 段落1 </p>
*本站禁止HTML标签噢* 段落2</p>
</div>
</div>
*本站禁止HTML标签噢*
<div class="gn_btn" onclick="javascript:window.location.href='https://www.baidu.com/'">百度一下</div>
*本站禁止HTML标签噢*  *本站禁止HTML标签噢*  *本站禁止HTML标签噢*
<div class="gn_btn"><a href="https://www.baidu.com/" target="_blank">百度一下</a></div>
<div class="gn_btn"><a href="https://www.baidu.com/" target="_blank">百度一下</a></div>
*本站禁止HTML标签噢*
*本站禁止HTML标签噢*
排版真好看@@22!!
[查看全文]

老王的右手

<div class="gn_btn">我也试一试</div>
[查看全文]

bowencraft

大佬又是你！【前排围观
[查看全文]

bowencraft

<div class="gn_box">
<div class="gn_content">
<div class="gn_title"> *本站禁止HTML标签噢* </span>感觉这样好好看啊</div>
*本站禁止HTML标签噢* wwww</p>
</div>
</div>
[查看全文]

千梦

展开Biu

本帖最后由 千梦 于 2018-5-15 14:19 编辑 <br /><br /><div class="gn_title"><span class="gn_title_red"></span>这么厉害，年纪大了，操作不来，觉得还是随性比较好</div>
<div class="gn_btn gn_btn_green">然后我就好奇的试了下</div>
[查看全文]

Blue_sdo

展开Biu

通用范例： *本站禁止HTML标签噢*
<div class="gn_box">
<div class="gn_content">
<div class="gn_title"> *本站禁止HTML标签噢* </span>蓝色默认标题</div>
*本站禁止HTML标签噢* 一个段落A</p>
<div class="gn_title"><span class="gn_title_red"></span>红色默认标题</div>
*本站禁止HTML标签噢* 一个段落B</p>
<div class="gn_title"><span class="gn_title_green"></span>绿色默认标题</div>
*本站禁止HTML标签噢* 一个段落C</p>
一个普通文本带换行 *本站禁止HTML标签噢*
</div>
</div>
*本站禁止HTML标签噢*
<div class="gn_box">
<div class="gn_box">
<div class="gn_content">
<div class="gn_title"> *本站禁止HTML标签噢* </span>蓝色默认标题</div>
*本站禁止HTML标签噢* 一个段落A</p>
<div class="gn_title"><span class="gn_title_red"></span>红色默认标题</div>
*本站禁止HTML标签噢* 一个段落B</p>
<div class="gn_title"><span class="gn_title_green"></span>绿色默认标题</div>
*本站禁止HTML标签噢* 一个段落C</p>
一个普通文本带换行 *本站禁止HTML标签噢*
</div>
</div>
</div>
[查看全文]