层级网
主页 > 公羽 >

层级网文章更新格式汇总(不用看)

公计划这篇可以不看!我套格式用的
<div class="s_tt b_b"> <p class="s_tt_l"><span>聊天内容</span></p> <p class="s_tt_r"><span>反方的聊天内容</span></p> </div>

层级网文章格式汇总

文章格式其实需要更好的展现才能方便用户访问,为了方便取用,层级网的所有文章格式都在这里汇总了:所有的一切都是为了便于访问者提高阅读体验。(text-shadow:1px 1px 1px #f00;)

单个P样式(灰紫):p class="s_h3b"(跟下面长内容的一样式相同)

单个P样式(红red):p class="s_h3b_r"

单个P样式(绿green):p class="s_h3b_g"

标题标题p标记文字再写一点标题标题p标记文字再写一点标题标题p标记文字再写一点标题标题p标记文字再写一点标题标题p标记文字再写一点标题标题p标记文字再写一点 p class="s_h3b"(注意:这里面只能有一个P,包含多个P的话可以用下面的blockquote标记

接续正常的P标记内的文字

h3标题也可以用上述的样式:H3 class="s_h3b"

接续正常的P标记内的文字

块儿(里有2段以上的P段落):在P段落外套一个<blockquote>标记 即可

<p>大力做好层级网等文字内容演示很多的情况都如此这只是演示文字你没必要挨个看文字文字内容演示很多的情况都如此这只是演示文字你没必要挨个看</p>

<p>大力做好层级网等文字内容演示很多的</p>

改blockquote颜色的样式:div class="s_div_blo1"

<p>大力做好层级网等文字内容演示很多的情况都如此这只是演示文字你没必要挨个看文字文字内容演示很多的情况都如此这只是演示文字你没必要挨个看</p>

<p>大力做好层级网等文字内容演示很多的</p>

<p>你没必要挨个看文字文字内容演示</p>

 

再做一个深色白底字的样式:

深色底居中的样式: p class="s_h3b_a"(小红)

紧接文字示样紧接文字示样紧接文字示样

深色底居中的样式: p class="s_h3b_b"(小绿)

深色底居中的样式: p class="s_h3b_c"(小蓝)

深色底居中的样式: p class="s_h3b_d"(小黑)

以上都(只能有一个P标记)文字再写一点标题标题p标记文字再写一点标题标题p标记文字再写一点标题标题p标记文字再写一点 p class="s_h3b_c"(只能有一个P标记)

上面两个样式都可以使用style行内样式改变颜色。 紧接文字示样紧接文字示样紧接文字示样

 

居中圆角小标题P标记(移动端样式已改,不必小于15个字):

包含span p class="s_h3cb"

下面三个需接续span里的style样式:

包含span p class="s_h3cb" span style="background:#555"

包含span p class="s_h3cb" span style="background:#72bf55"

包含span p class="s_h3cb" span style="background:#ff5e52"

包含span p class="s_h3cb_a" 绿

示例包含span p class="s_h3cb_a cb_b" 红

示例包含span p class="s_h3cb_a cb_c" 蓝

示例包含span p class="s_h3cb_a cb_d" 黑

字数要小于15个字(移动端才不会出错)紧接文字示样紧接文字示样紧接文字示样

 

小贴士:div class="s_div_ts" 有边框,加左右两边的margin值

<p>P标签温馨提示</p>

P标签 提示文字内容很温馨的感觉继续文字介绍提示文字内容很温馨的感觉继续文字介绍提示文字内容很温馨的感觉继续文字介绍

紧接文字示样紧接文字示样紧接文字示样

红色警示块儿:div class="s_div_ts_red"

警示块 P标签

P标签 提示文字内容很温馨的感觉继续文字介绍提示文字内容很温馨的感觉继续文字介绍提示文字内容很温馨的感觉继续文字介绍

嘿,你被警告了孩子。紧接文字示样。

 

引用样式1div class="s_div_yin1"

<p>文字介引用的格式文字介绍引用的格式<p>

接续P标签内的文字看看效果

<p>引用格式其实可以更炫酷,比如加上cengji.com什么的,但在移动版效果不太好,于是就用这种简单的已经足够用了。</p>

<p>如果需要某名人的引述,用这种格式简直太棒了。</p>

<p>——某名人·洛夫斯基</p>

接续文字说明。有span标记是为了嵌套cengji.com的标识

<div class="s_div_yin1"> <p>文字</p> <p>文字</p> <p align="right">&amp;mdash;&amp;mdash;某名人&amp;middot;洛夫斯基</p> </div>

 

测试所有里面的a标签,看看颜色和格式(未测)

再看能不能尝试一下文内插入表情图片。。。(未测)

h3粗框样式div class="s_div_h3b"(h3标签内带小图)

H3较重要备注样式H3

P初始设置的文字为14,因为相对文字较小,大段不是很重要的文字可以用这个格式。。。这是一个很入古老的样式,只有我自己知道这有多陈旧,还是保留下来吧。P

P这里的P标签没有margin-bottom的值,所以没有类似分段的效果。大概是基本很少被调用的样式了P

<div class="s_div_h3b"> <h3>H3较重要</h3> <p>初始设置的文字</p> <p>初始设置的文字</p> <p class="h3b_p">框里的备注样式,可删除</p> </div>

H3较重要备注样式较重要备注样式较重要备注样式较重要备注样式较重要备注样式较重要备注样式较重要备注样式较重要备注样式H3

P初始设置的文字为14,因为相对文字较小,大段不是很重要的文字可以用这个格式。。。这是一个很入古老的样式,只有我自己知道这有多陈旧,还是保留下来吧。P

P这里的P标签没有margin-bottom的值,所以没有类似分段的效果。大概是基本很少被调用的样式了P

p class="h3b_p" 再次备注解释说明:样式较重要备注样式较重要样式较重要备注样式较重要样式较重要备注样式较重要样式较重要备注样式较重要 P

这里的P标签没有margin-bottom的值,所以没有类似分段的效果。大概是基本很少被调用的样式了

紧接着的文字

备注框样式:div class="s_div_bz"

文字大段不是很重要的文字很重要的文很重要的文大段不是很重要的文字大段不是很重要的文字

文字大段不是很重要的文字大段不是很重要的文字大段不是很重要的文字

 

虚线框样式:div class="s_div_x"

P这同样是一个非常陈旧样式,偶尔可以一用吧。。。P

标题H4标题

P这同样是一个非常陈旧样式,偶尔可以一用吧。。。P

P大力做好层级网等文字内容演示很多的情况都如此这只是演示文字你没必要挨个看文字内容演示很多的情况都如此这只是演示文字你没必要挨个看文字内容演示很多的情况都如此这只是演示文字你没必要挨个看P

SL答案样式:div class="dainfo"

标题H4标题

这同样是一个非常陈旧样式,偶尔可以一用吧。。。

大力做好层级网等文字内容演示很多的情况都如此这只是演示文字你没必要挨个看文字内容演示很多的情况都如此这只是演示文字你没必要挨个看文字内容演示很多的情况都如此这只是演示文字你没必要挨个看

接续一段文字

嵌套嵌套嵌套嵌套嵌套(这文字需包含在P标记里面)

大力做好层级网等文字内容演示很多的情况都如此这只是演示文字你没必要挨个看文字内容演示很多的情况都如此这只

接下来紧接P标签内的文字

div class="gginfo"

ZK信息类样式:(标题14粗、P文字14、line-height:30),P没设置margin-bottom

标题H4

初始设置的文字为14,因为相对文字较小,大段不是很重要的文字可以用这个格式。。。这是一个很入古老的样式,只有我自己知道这有多陈旧,还是保留下来吧。

这里的P标签没有margin-bottom的值,所以没有类似分段的效果。大概是基本很少被调用的样式了

接下来就接续P标签内的文字

 

聊天对话的感觉(div class="s_tt"这会是一个常用的样式,多端兼容未详测)

<div class="s_tt"> <p class="s_tt_l"><span>聊天内容</span></p> <p class="s_tt_r"><span>反方的聊天内容</span></p> </div>

11:37

聊天内容

反方的聊天内容反方的聊天内容反方的聊天内方的聊天内方的聊天内方的聊天内方的聊天内容反方的聊天的聊天内容反方的内容

08:41

正方内容结束聊天内容聊天内容聊天内容

22:53

昨天 18:15

聊天内容聊天内容聊天内容聊天内容

星期三 00:13

聊天内容聊天内容聊天内容聊天内容

XXX 开启了朋友验证,你还不是他(她)朋友。
请先发送朋友验证请求,对方验证通过后,才能聊天。
发送朋友验证

2020年2月7日 23:58

聊天内容聊天内容聊天内容聊天内容

对方拒收了你的消息

黑色对话框:div class="s_tt b_b"

11:37

聊天内容

反方的聊天内容反方的聊天内容反方的聊天内方的聊天内方的聊天内方的聊天内方的聊天内容反方的聊天的聊天内容反方的内容

08:41

正方内容结束聊天内容聊天内容聊天内容

22:53

昨天 18:15

聊天内容聊天内容聊天内容聊天内容

星期三 00:13

聊天内容聊天内容聊天内容聊天内容

XXX 开启了朋友验证,你还不是他(她)朋友。
请先发送朋友验证请求,对方验证通过后,才能聊天。
发送朋友验证

2020年2月7日 23:58

聊天内容聊天内容聊天内容聊天内容

对方拒收了你的消息

<div class="s_tt"> <p class="s_tt_date">08:41</p> <p class="s_tt_date">22:53</p> <p class="s_tt_date">昨天 18:15</p> <p class="s_tt_date">星期三 00:13</p> <p class="s_tt_date">2020年2月7日 23:58</p> <p class="s_tt_l"><span>聊天内容</span></p> <p class="s_tt_r"><span>反方的聊天内容</span></p> <p class="s_tt_r"><span>反方的聊天内容</span></p> <p class="s_tt_date"><span>XXX 开启了朋友验证,你还不是他(她)朋友。<br/>请先发送朋友验证请求,对方验证通过后,才能聊天。<br/><i>发送朋友验证</i></br/></br/></span></p> <p class="s_tt_date"><span>对方拒收了你的消息</span></p> </div>



接续文字显示接续文字显示接续文字显示

图片下面的文字:


图片下<br />标记转行进行图片说明的文字(需要加font-size:12px

图片下面接续文字的效果图片下面接续文字的效果(P段落)

 

表格下面的文字:

表头标题内容
表格内容 表格内容 表格内容
1 1 1
2 2 2
表格底部信息

表格下面接续的文字,看一看间隔什么的,PC和移动版是不是间隙不够或比较难看?

 

01 p class="f56"

如01开头接上类似这种粗棕红的文字 洋气范儿就出来了。

上面的f56是最大的标题,一般只用于01这样的分段文字。

文内第二大标题 p class="f30"

文内第三大标题 p class="f26"

标题h2标签标题文字再写一点 H2

标题标题h3标题文字再写一点 H3

标题标题h4标题文字再写一点 H4(不太用)

标题标题h5标题文字再写一点 H5(不太用)

h6样式

标题标题h6标题文字再写一点 H6

普通文字说明里面文字说明用<span class="lywz">实现的行内h6样式

H6的优化版:div class="s_div_h6"

<p>不是虚线边框,文字大概14px不是虚线边框,文字大概14px不是虚线边框,文字大概文字大概14px不是虚线边框,文字大概文字大概14px不是虚线边框,文字大概文字大概14px不是虚线边框,文字大概14px</p>

<p>不是虚线边框,文字大概14px不是虚线边框</p>

本样式重设了line-height,font-size:14px,P的margin值等。。紧接着的文字演示紧接着的文字演示

 

ol序列列表:

  1. 序列文字一然后继续序列序列文字一然后继续序列序列文字一然后继续序列序列文字一然后继续序列
  2. 序列文字一然后继续序列序列文字一然后继续序列
  3. 序列文字一然后继续序列序列文字一然后继续序列
  4. 序列文字一然后继续序列序列文字一然后继续序列序列文字一然后继续序列
  5. 序列文字一然后继续序列
  6. 序列文字一然后继续序列序列文字一然后继续序列

ol序列结束接一个p标签然后看看情况

div class="dainfo"与 ol列 综合使用(标题H4标题 不用H4也行)

  1. 序列文字一然后继续序列序列文字一然后继续序列序列文字一然后继续继续序列序列文字一继续序列序列文字一序列序列文字一然后继续序列
  2. 序列文字一然后继续序列序列文字一然后继续序列

 

各种颜色下划线等:

文字演示文字演示很多内容文字演示文字演示很多内容文字演示文字演示很多内容文字演示文字演示很多内容文字演示文字演示很多内容文字演示文字演示很多内容文字演示文字演示很多内容文字演示文字演示很多内容

<strong style="color:#060;">粗绿</strong>

<strong style="color:#cf5800;">粗棕红</strong>

<strong style="color:#060;">粗大红</strong>

<strong style="color:#f00;">粗最红</strong>

<strong style="color:#03C;">粗蓝</strong>

 



公羽2020-01-01
公羽厅的二维码

相关信息

年度热门点击

全站随机推荐