技术宅社区

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

QQ登录

只需一步,快速开始

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

斑竹滴帖子排版手册

[复制链接]

签到天数: 792 天

连续签到: 89 天

[LV.10]以坛为家III

国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫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>
复制代码
效果如下:
我是头部
我是身体
签名被小宅喵吞掉了~~~~(>_<)~~~~

签到天数: 792 天

连续签到: 89 天

[LV.10]以坛为家III

国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫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>
复制代码
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 790 天

连续签到: 2 天

[LV.10]以坛为家III

阴阳师|安倍晴明阴阳师|酒吞童子宫崎骏|千寻宫崎骏|龙猫2刀剑神域|诗乃刀剑神域|有纪刀剑乱舞|狮子王刀剑乱舞|骨喰藤四郎魔卡少女樱|李小狼魔卡少女樱|木之本樱魔卡少女樱|月城雪兔PP|槙岛圣护Free|橘真琴K-ON|琴吹紬野良神|一岐日和国庆70周年纪念

发表于 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>
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 667 天

连续签到: 2 天

[LV.9]以坛为家II

技术宅七周年国庆70周年纪念阴阳师|酒吞童子阴阳师|茨木童子阴阳师|大天狗刀剑乱舞|萤丸刀剑乱舞|三日月宗近刀剑乱舞|鸣狐刀剑乱舞|药研藤四郎刀剑乱舞|今剑刀剑乱舞|五虎退文豪野犬|太宰治·武装侦探社文豪野犬|中原中也文豪野犬|太宰治·港口黑手党恋与制作人|许墨恋与制作人|李泽言

发表于 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
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 792 天

连续签到: 89 天

[LV.10]以坛为家III

国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫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
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

本版积分规则

小黑屋手机版腾讯分析

JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!

GMT+8, 2020-4-6 03:17 Processed in 0.146013 second(s), 63 queries .

© 2020 技术宅(基宅) Powered by Discuz! X3.4 Theme by Jvmao 粤ICP备18082987号-1

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