How edit

出自新阅读实验室

(修订版本间差异)
跳转到: 导航, 搜索
(颜色)
(颜色)
 
(23个中途的修订版本没有显示)
第1行: 第1行:
-
==关于编辑==
+
==编辑指南==
为了更加方便的编辑,也为了使内容更加易读美观,我添加了一些class,以方便在编辑的时候直接使用,更加人性化、语义化的编辑:
为了更加方便的编辑,也为了使内容更加易读美观,我添加了一些class,以方便在编辑的时候直接使用,更加人性化、语义化的编辑:
第5行: 第5行:
-
# 添加了wikitable类 ,使用时直接在表格<pre style="display: inline; width: auto;margin: 0;padding:0;">{|</pre>后加入 <pre style="display: inline; width: auto; margin: 0;padding:0;">class="wikitable"</pre>即可得到背景为灰色,边框宽度为1px,颜色为<span style="background: #aaa">#AAA</span>的表格;
+
# 添加了wikitable类 ,使用时直接在表格<pre class="graybg" style="display: inline; width: auto;margin: 0;padding:0;">{|</pre>后加入 <pre class="graybg" style="display: inline; width: auto; margin: 0;padding:0;" class="graybg">class="wikitable"</pre>即可得到背景为灰色,边框宽度为1px,颜色为<span style="background: #aaa">#AAA</span>的表格;
-
# 想得到 <pre style="display: inline; width: auto; margin: 0;padding:0;">加粗且背景加深</pre>的表格头,只需用 <pre style="display: inline; width: auto;margin: 0;padding:0;">!(需要换行)或!!(不需要换行)</pre>代替即可,例如
+
# 想得到 <pre style="display: inline; width: auto; margin: 0;padding:0; " class="graybg">加粗且背景加深</pre>的表格头,只需用 <pre style="display: inline; width: auto;margin: 0;padding:0;" class="graybg">!(需要换行)或!!(不需要换行)</pre>代替即可,例如
{| width="80%"
{| width="80%"
第76行: 第76行:
为了更加方便的编辑,使wiki代码更加干净整洁,在css中添加了常用颜色的类,使用时只需给需要颜色的位置添加class="xxxxxcolor",需要背景颜色的位置添加class="XXXbg"即可,
为了更加方便的编辑,使wiki代码更加干净整洁,在css中添加了常用颜色的类,使用时只需给需要颜色的位置添加class="xxxxxcolor",需要背景颜色的位置添加class="XXXbg"即可,
-
PS:# class是可以覆盖的,如:class="redcolor greencolor"将显示绿色;
+
PS:
-
# 为了美观,并没有使用原色,而是用中间色代替原色。
+
# class是可以覆盖的,如:class="redcolor greencolor"将显示绿色;
 +
# 为了美观,并没有使用原色,而是用中间色代替原色。
 +
{|
 +
|width="60%"|
{|class="wikitable"
{|class="wikitable"
-
!类名!!颜色值!!类名!!颜色值
+
!颜色!!类名(文字颜色)!!类名(背景色)!!十六进制
|-
|-
-
|redcolor
+
|红色
-
|class="redcolor"|#b22222
+
|class="redcolor"|redcolor
-
|redbg
+
|class="redbg"|redbg
-
|class="redbg"|#b22222
+
|#b22222
 +
|-
 +
|绿色
 +
|class="greencolor"|greencolor
 +
|class="greenbg"|greenbg
 +
|#0e774a
 +
|-
 +
|蓝色
 +
|class="bluecolor"|bluecolor
 +
|class="bluebg"|bluebg
 +
|#0046ff
 +
|-
 +
|橘色
 +
|class="orangecolor"|orangecolor
 +
|class="orangebg"|orangebg
 +
|#ff8c00
 +
|-
 +
|黄色
 +
|class="yellowcolor"|yellowcolor
 +
|class="yellowbg"|yellowbg
 +
|#ffd700
 +
|-
 +
|褐色
 +
|class="perucolor"|perucolor
 +
|class="perubg"|perubg
 +
|#d2691e
 +
|-
 +
|灰色
 +
|class="graycolor"|graycolor
 +
|class="graybg"|grayebg
 +
|#c0c0c0
 +
|-
 +
|海绿/seagreen
 +
|class="seagreencolor" | seagreencolor
 +
|class="seagreenbg" | seagreencolor
 +
|#2E8B57
|}
|}
 +
|<pre>
 +
{|class="wikitable"
 +
!颜色!!类名(文字颜色)!!类名(背景色)!!十六进制
 +
|-
 +
|红色
 +
|class="redcolor"|redcolor
 +
|class="redbg"|redbg
 +
|#b22222
 +
|-
 +
|绿色
 +
|class="greencolor"|greencolor
 +
|class="greenbg"|greenbg
 +
|#0e774a
 +
|-
 +
|蓝色
 +
|class="bluecolor"|bluecolor
 +
|class="bluebg"|bluebg
 +
|#0046ff
 +
|-
 +
|橘色
 +
|class="orangecolor"|orangecolor
 +
|class="orangebg"|orangebg
 +
|#ff8c00
 +
|-
 +
|黄色
 +
|class="yellowcolor"|yellowcolor
 +
|class="yellowbg"|yellowbg
 +
|#ffd700
 +
|-
 +
|褐色
 +
|class="perucolor"|perucolor
 +
|class="perubg"|perubg
 +
|#d2691e
 +
|-
 +
|灰色
 +
|class="graycolor"|graycolor
 +
|class="graybg"|grayebg
 +
|#c0c0c0
 +
|-
 +
|海绿/seagreen
 +
|class="seagreencolor" | seagreencolor
 +
|class="seagreenbg" | seagreencolor
 +
|#2E8B57
 +
|}
 +
</pre>
 +
|}
 +
 +
另,html颜色参见[http://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2 网页颜色]
 +
 +
::例如:

在2011年5月9日 (一) 04:42的最新修订版本

编辑指南

为了更加方便的编辑,也为了使内容更加易读美观,我添加了一些class,以方便在编辑的时候直接使用,更加人性化、语义化的编辑:

表格

  1. 添加了wikitable类 ,使用时直接在表格
    {|
    后加入
    class="wikitable"
    即可得到背景为灰色,边框宽度为1px,颜色为#AAA的表格;
  2. 想得到
    加粗且背景加深
    的表格头,只需用
    !(需要换行)或!!(不需要换行)
    代替即可,例如
类别一 类别二
橘子 苹果
面包
奶油 冰淇凌
{|
|类别一
|类别二
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

替换为

类别一类别二
橘子 苹果
面包
奶油 冰淇凌
{|
!类别一!!类别二
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

颜色

为了更加方便的编辑,使wiki代码更加干净整洁,在css中添加了常用颜色的类,使用时只需给需要颜色的位置添加class="xxxxxcolor",需要背景颜色的位置添加class="XXXbg"即可,

PS:

  1. class是可以覆盖的,如:class="redcolor greencolor"将显示绿色;
  2. 为了美观,并没有使用原色,而是用中间色代替原色。
颜色类名(文字颜色)类名(背景色)十六进制
红色 redcolor redbg #b22222
绿色 greencolor greenbg #0e774a
蓝色 bluecolor bluebg #0046ff
橘色 orangecolor orangebg #ff8c00
黄色 yellowcolor yellowbg #ffd700
褐色 perucolor perubg #d2691e
灰色 graycolor grayebg #c0c0c0
海绿/seagreen seagreencolor seagreencolor #2E8B57
{|class="wikitable"
!颜色!!类名(文字颜色)!!类名(背景色)!!十六进制
|-
|红色
|class="redcolor"|redcolor
|class="redbg"|redbg
|#b22222
|-
|绿色
|class="greencolor"|greencolor
|class="greenbg"|greenbg
|#0e774a
|-
|蓝色
|class="bluecolor"|bluecolor
|class="bluebg"|bluebg
|#0046ff
|-
|橘色
|class="orangecolor"|orangecolor
|class="orangebg"|orangebg
|#ff8c00
|-
|黄色
|class="yellowcolor"|yellowcolor
|class="yellowbg"|yellowbg
|#ffd700
|-
|褐色
|class="perucolor"|perucolor
|class="perubg"|perubg
|#d2691e
|-
|灰色
|class="graycolor"|graycolor
|class="graybg"|grayebg
|#c0c0c0
|-
|海绿/seagreen
|class="seagreencolor" | seagreencolor
|class="seagreenbg" | seagreencolor
|#2E8B57
|}

另,html颜色参见网页颜色

例如:
个人工具
名字空间
变换
动作
导航
工具箱