找回密码
 ╱人◕‿‿◕人╲订下契约(注册新用户)

QQ登录

只需一步,快速开始

搜索
查看: 1709|回复: 13
收起左侧

斑竹滴帖子排版手册

[复制链接]

签到天数: 543 天

连续签到: 15 天

[LV.9]以坛为家II

星座|金牛座宫崎骏|龙猫3宫崎骏|龙猫1杀戮の天使|瑞吉儿杀戮の天使|艾札克歌王|寿岭二恋与|许墨歌王|一之濑时矢刀剑乱舞|狮子王刀剑神域|亚丝娜刀剑神域|有纪刀剑神域|诗乃刀剑神域|桐人野良神|雪音Free|叶月渚全职猎人|伊耳谜

发表于 2018-5-14 01:31:28 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看,没有帐号?╱人◕‿‿◕人╲订下契约(注册新用户)

x
使用前,请先开启帖子的HTML功能哦!
简介

唔……大家之前有看到我排版的比较漂亮的帖子,我终于有闲心去把样式库写好了(日常使用应该够了),下面是使用说明。

颜色主题

我在样式库里给大家预置了3个颜色主题,分别是蓝色(默认颜色)、红色、和绿色。看下面的三个按钮:

蓝色按钮
绿色按钮
红色按钮

3个按钮的代码如下:

  1. <div class="gn_btn">蓝色按钮</div>
  2. <div class="gn_btn gn_btn_green">绿色按钮</div>
  3. <div class="gn_btn gn_btn_red">红色按钮</div>
复制代码

你可以随意选择你喜欢的颜色,注意,div标签在不添任何class属性的情况下,代表,100%宽度,根据内容自动调整高度的一个“盒子”,在指定class样式后会根据样式规定进行调整,我这里统一使用div标签来生成“盒子”。

你可以直接复制代码到任何一个开启html功能的帖子里面查看效果哦!(注意该功能只对版主开发

正文和标题

HTML文档格式中规定,换行使用“<br>”标签,通常情况下,如果你没有在行的末尾添加br标签的话,用回车换行是无效的。

要写正文内容的时候,请先用div标签生成一个“盒子”,并指定它的class属性为content,像这样:

<div class="gn_content">这里是正文内容</div>

然后在class属性为gn_content的标签里,添加标题和段落,要添加标题,请使用以下代码来生成,就像本文的3个标题一样:

  1. <div class="gn_title"><span></span>我是蓝色标题</div>
  2. <div class="gn_title"><span class="gn_title_red"></span>我是红色标题</div>
  3. <div class="gn_title"><span class"gn_title_green"></span>我是绿色标题</div>
复制代码

不理解直接复制粘贴即可。

然后是段落,在class属性为gn_content的盒子里,使用p标签可以生成一个首行缩进2字符,文字大小15px的段落,如下图示:

<div class="gn_content"> <p>我是段落A</p> <p>我是段落B</p> <p>我是段落C</p> </div>

然后是灰色的块,像本文开头的那句话一样,使用class属性为gn_box的div标签生成一个灰色圆角块,如下代码:

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

各种div标签可以随意组和,但是注意,只有在class为content的盒子下,p标签的缩进才会按上述给定的标准。

卡片容器
将div的class属性设置为gn_card,将会生成一个卡片,就像本文的样子。一个卡片分为头部header(通常用于写标题),和身体body(通常用于写卡片内容),生成一个具有头部和身体的卡片,请使用:
  1. <div class="gn_card">
  2. <div class="gn_card_head">我是头部</div>
  3. <div class="gn_card_body">我是身体</div>
  4. </div>
复制代码
效果如下:
我是头部
我是身体
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复

使用道具 举报

签到天数: 543 天

连续签到: 15 天

[LV.9]以坛为家II

星座|金牛座宫崎骏|龙猫3宫崎骏|龙猫1杀戮の天使|瑞吉儿杀戮の天使|艾札克歌王|寿岭二恋与|许墨歌王|一之濑时矢刀剑乱舞|狮子王刀剑神域|亚丝娜刀剑神域|有纪刀剑神域|诗乃刀剑神域|桐人野良神|雪音Free|叶月渚全职猎人|伊耳谜

 楼主| 发表于 2018-5-14 03:33:22 | 显示全部楼层
通用范例:
蓝色默认标题

一个段落A

红色默认标题

一个段落B

绿色默认标题

一个段落C

一个普通文本带换行

  1. <div class="gn_box">
  2. <div class="gn_content">
  3. <div class="gn_title"><span></span>蓝色默认标题</div>
  4. <p>一个段落A</p>
  5. <div class="gn_title"><span class="gn_title_red"></span>红色默认标题</div>
  6. <p>一个段落B</p>
  7. <div class="gn_title"><span class="gn_title_green"></span>绿色默认标题</div>
  8. <p>一个段落C</p>
  9. 一个普通文本带换行<br>
  10. </div>
  11. </div>
复制代码
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

签到天数: 571 天

连续签到: 10 天

[LV.9]以坛为家II

技术宅七周年刀剑神域|诗乃刀剑神域|有纪刀剑乱舞|狮子王刀剑乱舞|骨喰藤四郎魔卡少女樱|李小狼魔卡少女樱|木之本樱PP|槙岛圣护魔卡少女樱|月城雪兔Free|橘真琴K-ON|琴吹紬野良神|一岐日和星座|天秤座

发表于 2018-5-15 14:16:48 | 显示全部楼层
本帖最后由 千梦 于 2018-5-15 14:19 编辑

这么厉害,年纪大了,操作不来,觉得还是随性比较好
然后我就好奇的试了下
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

签到天数: 10 天

连续签到: 1 天

[LV.3]偶尔看看II

发表于 2018-5-15 21:45:00 | 显示全部楼层
<div class="gn_box">
<div class="gn_content">
<div class="gn_title"><span></span>感觉这样好好看啊</div>
<p>wwww</p>
</div>
</div>
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

签到天数: 10 天

连续签到: 1 天

[LV.3]偶尔看看II

发表于 2018-5-15 21:45:29 | 显示全部楼层
大佬又是你!【前排围观
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-5-17 23:25:34 | 显示全部楼层
<div class="gn_btn">我也试一试</div>
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

签到天数: 543 天

连续签到: 3 天

[LV.9]以坛为家II

技术宅七周年刀剑乱舞|萤丸刀剑乱舞|三日月宗近刀剑乱舞|狮子王刀剑乱舞|和泉守兼定刀剑乱舞|山姥切国广刀剑乱舞|大和守安定刀剑乱舞|加州清光刀剑乱舞|鸣狐刀剑乱舞|骨喰藤四郎刀剑乱舞|鲶尾藤四郎刀剑乱舞|药研藤四郎刀剑乱舞|今剑刀剑乱舞|爱染国俊刀剑乱舞|五虎退恋与|许墨

发表于 2018-5-21 22:36:18 | 显示全部楼层
本帖最后由 戴蒙先生 于 2018-5-25 22:21 编辑

不是很懂,测试一下

换行符
所以这是类似引用
  1. <div class="gn_box">所以这是类似引用</div>
复制代码

下载地址
按钮怎么添加链接呢?
  1. <div class="gn_btn gn_btn_green">下载地址</div>
复制代码

剧情简介

彼得帕克(汤姆·赫兰德 Tom Holland 饰)在内战后受到了钢铁侠托尼斯塔克(小罗伯特·唐尼 Robert Downey Jr. 饰)的赏识,表面上,彼得进入托尼的公司成为了一名实习生,实际上,他和复仇者联盟的成员们一起接受了各种各样的训练。托尼虽然欣赏彼得的勇敢和正直,却并不认为他目前已经拥有加入复联的实力,他派出了特工哈皮(乔恩·费儒 Jon Favreau 饰)暗中观察,这让十分想证明自己的彼得感到万分焦躁。

在对付两个银行劫匪的过程中,彼得发现劫匪们使用的是一种前所未见的新型武器,他孤身一人深入敌后顺藤摸瓜找到了幕后主使秃鹰(迈克尔·基顿 Michael Keaton 饰),让他彼得没有想到的是,秃鹰竟然是他爱慕的女生利兹(劳拉·海瑞尔 Laura Harrier 饰)的父亲。

  1. <div class="gn_box">
  2. <div class="gn_title"><span></span>剧情简介</div>
  3. <div class="gn_content">
  4. <p>段落1 </p>
  5. <p>段落2</p>
  6. </div>
  7. </div>
复制代码

百度一下



  1. <div class="gn_btn"><a href="https://www.baidu.com/" target="_blank">百度一下</a></div>
复制代码


排版真好看

点评

哦哦对了里面一层是单引号 或者像楼下新的写法那样  发表于 2018-5-22 17:21
下载地址 这样写,注意有双重引号  详情 回复 发表于 2018-5-22 01:09
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

签到天数: 543 天

连续签到: 15 天

[LV.9]以坛为家II

星座|金牛座宫崎骏|龙猫3宫崎骏|龙猫1杀戮の天使|瑞吉儿杀戮の天使|艾札克歌王|寿岭二恋与|许墨歌王|一之濑时矢刀剑乱舞|狮子王刀剑神域|亚丝娜刀剑神域|有纪刀剑神域|诗乃刀剑神域|桐人野良神|雪音Free|叶月渚全职猎人|伊耳谜

 楼主| 发表于 2018-5-22 01:09:35 | 显示全部楼层
  1. <div class="gn_btn gn_btn_green><a href="http://www.baidu.com" target="_blank">打开百度</a></div>
复制代码
那改成这样

点评

会啦!【之前那个好看~但是不能新窗口打开_(:3」∠)_  发表于 2018-5-22 18:09
那改成这样  发表于 2018-5-22 17:19
点不开啊QAQ  发表于 2018-5-22 11:06
get  发表于 2018-5-22 11:03
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

本版积分规则


小黑屋|手机版|腾讯分析|技术宅(基宅) ( 粤ICP备18082987号-1

GMT+8, 2019-7-22 22:08 , Processed in 0.122129 second(s), 43 queries .

快速回复 返回顶部 返回列表