How edit
出自新阅读实验室
(修订版本间差异)
(→表格) |
(→颜色) |
||
(26个中途的修订版本没有显示) | |||
第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=" | + | {| width="80%" |
|width="50%"| | |width="50%"| | ||
{| class="wikitable" | {| class="wikitable" | ||
+ | |类别一 | ||
+ | |类别二 | ||
+ | |- | ||
|橘子 | |橘子 | ||
|苹果 | |苹果 | ||
第23行: | 第26行: | ||
<pre> | <pre> | ||
{| | {| | ||
+ | |类别一 | ||
+ | |类别二 | ||
+ | |- | ||
|橘子 | |橘子 | ||
|苹果 | |苹果 | ||
第34行: | 第40行: | ||
</pre> | </pre> | ||
|} | |} | ||
+ | 替换为 | ||
+ | |||
+ | {| width="80%" | ||
+ | |width="50%"| | ||
+ | {| class="wikitable" | ||
+ | !类别一!!类别二 | ||
+ | |- | ||
+ | |橘子 | ||
+ | |苹果 | ||
+ | |- | ||
+ | |面包 | ||
+ | |饼 | ||
+ | |- | ||
+ | |奶油 | ||
+ | |冰淇凌 | ||
+ | |} | ||
+ | |width="50%"| | ||
+ | <pre> | ||
+ | {| | ||
+ | !类别一!!类别二 | ||
+ | |- | ||
+ | |橘子 | ||
+ | |苹果 | ||
+ | |- | ||
+ | |面包 | ||
+ | |饼 | ||
+ | |- | ||
+ | |奶油 | ||
+ | |冰淇凌 | ||
+ | |} | ||
+ | </pre> | ||
+ | |} | ||
+ | |||
+ | ===颜色=== | ||
+ | 为了更加方便的编辑,使wiki代码更加干净整洁,在css中添加了常用颜色的类,使用时只需给需要颜色的位置添加class="xxxxxcolor",需要背景颜色的位置添加class="XXXbg"即可, | ||
+ | |||
+ | PS: | ||
+ | # class是可以覆盖的,如:class="redcolor greencolor"将显示绿色; | ||
+ | # 为了美观,并没有使用原色,而是用中间色代替原色。 | ||
+ | {| | ||
+ | |width="60%"| | ||
+ | {|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> | ||
+ | {|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,以方便在编辑的时候直接使用,更加人性化、语义化的编辑:
表格
- 添加了wikitable类 ,使用时直接在表格
{|
后加入class="wikitable"
即可得到背景为灰色,边框宽度为1px,颜色为#AAA的表格; - 想得到
加粗且背景加深
的表格头,只需用!(需要换行)或!!(不需要换行)
代替即可,例如
|
{| |类别一 |类别二 |- |橘子 |苹果 |- |面包 |饼 |- |奶油 |冰淇凌 |} |
替换为
|
{| !类别一!!类别二 |- |橘子 |苹果 |- |面包 |饼 |- |奶油 |冰淇凌 |} |
颜色
为了更加方便的编辑,使wiki代码更加干净整洁,在css中添加了常用颜色的类,使用时只需给需要颜色的位置添加class="xxxxxcolor",需要背景颜色的位置添加class="XXXbg"即可,
PS:
- class是可以覆盖的,如:class="redcolor greencolor"将显示绿色;
- 为了美观,并没有使用原色,而是用中间色代替原色。
| {|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颜色参见网页颜色
- 例如: