酷酷猪音乐分享网

QQ登录

只需一步,快速开始

 注册  找回密码
查看: 9269|回复: 52

☆造福帖☆ 音乐帖美化简明教程

    [复制链接]

该用户从未签到

发表于 2011-1-13 22:26:24 | 显示全部楼层 |阅读模式
本帖最后由 优姬゛mm。 于 2011-5-4 23:16 编辑

☆☆☆☆音乐帖美化教程编辑导航索引☆☆☆☆
-----------------------
一楼⊙⊙⊙导航索引
二楼⊙⊙⊙用html代码美化帖子的一些基本
三楼⊙⊙⊙一些代码出来后的效果
四楼⊙⊙⊙基本表格的制作方法
五楼⊙⊙⊙常用的HTML代码
六楼⊙⊙⊙分享几个H懒人代码效果
七楼⊙⊙⊙懒人代码
八楼⊙⊙⊙附录:颜色 文字 代码参考
--------------
花了3个多小时,送给所有喜欢音乐的所有各位会员们
-没有人希望自己的帖子不好看。
-好听的歌曲配上好看的帖子,真的是给人一种无与伦比的享受。
-所以花点时间整理出这个帖,希望能帮助那些想出好贴,精贴。但又觉得自己做不到的童鞋们。
-
关于此贴,只是个基本教程。更多的东西需要大家自己发掘
-记得,如果你觉得这个帖子对你有帮助不要忘记介绍给同样对音乐有着爱好的朋友。 ^ ^
                                               
                                                            By  苏晴
  

评分

参与人数 2知名度 +32 酷酷币 +2 收起 理由
阿三哥哥 + 2 + 2 辛苦了 晴晴
AvA.Nadya + 30 辛苦了。

查看全部评分

该用户从未签到

 楼主| 发表于 2011-1-13 22:35:48 | 显示全部楼层
酷酷猪
本帖最后由 ﹏苏晴.゛ 于 2011-1-14 09:50 编辑

学前指导:


本来这些是不想说的,这些都是很基础的,但怕有的人刚学不知道,所以就重复下

一、我们论坛的编辑模式有两种,discuz代码模式和所见模式,要勾上启用html代码(在页面左边下方)才可以发html贴。


二、关于剪切,复制,和粘贴。


新手大多是喜欢用右键,但有时候右键不能使用,所以请熟练操作快捷键快又方便。

复制:ctrl+c

剪切:ctrl+x

粘贴:ctrl+v

全选:ctrl+a

撤消:ctrl+z




三、关于换行,高级模式下换行有两种。



1.直接敲回车键,可以达到换行的效果,但实际上是分段!下面的一行字会和上面的一行有距离。


2.shift+会车键,这个才是真正的换行,两行紧密排在一起!



四、有关html代码。



html代码由标签构成。常见的有段落,文字,图片,多媒体,表格等等。

接下来逐一的介绍这些标签的用法。





关于文字变色、字体、加粗、下划线、斜体大小,加入图片,超链接,图片超链接,引用,居左,居中,居右等 我便不多说了,基本大家都会用。



注:把鼠标放在任意一个图标上面都会出来这个图标得用处。
一、移动效果


语法: <marquee> 移动对象</marquee>


对象可是文字,图片,表格,播放器等等


同样可以通过设置图片大小的两种方法来设置对象活动的区域(注意,长和宽至少有一项是必须设置的)


width=300  height=300

或者style="width:300px;height:300px"


常用的参数可选的:


behavior:可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。

如果设定的方法是slide,那么文本就移动到文档上,并停留在页边距上。

如果设定为alternate,则文本从一边移动到另一边。

如果设定为scroll,文本将在页面上反复滚动。本属性不是必须使用的。

可以设定的值有:silidealternatescroll。 


direction:用于设定文本滚动的方向,可以设定的值有:left,right ,up,down。此属性不是必须使用的。

scrollamount:用于设定每个连续滚动文本后面的间隔,用来控制移动速度的,该间隔用像素表示。此属性不是必须使用的。

scrolldelay:用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。同样是用来控制滚动速度的,数值越大,速度越慢。


如:
    1. <marquee width=100  height=100 direction=up> http://www.51-126.com/up2/1294931949x1919154512.jpg</marquee>
    复制代码



效果: 见3楼图1

二、表格标签  (重要)



这是最复杂的一个了,不单是语法,更是效果最多样化的,可以说html贴最精华的部分也就在这了。
  1. <TABLE>

  2. <TBODY>

  3. <TR>

  4. <TD></TD></TR></TBODY></TABLE>
复制代码


可以看出是四层的标签。



<td>这里控制单元格属性

<tr>控制行属性

<table>控制表格属性

width:宽度(适用于tabletd

height:高度(适用于table,tr,td

cellSpacing:单元间距,单元格与表格边线、两单元格之间的距离(适用与table

cellPadding:单元边距,单元格内的内容距单元格边线的距离(适用于table

border:边框厚度(适用于table

bgcolor:背景色(适用于tabletd,两个可同时设置)

background:背景图片(实用于tabletd,两个可同时设置,不要与背景色重复使用)



下面举几个简单的例子:



1.最简单的在图片上写字。


如:
  1. <table bordercolor=#841a00 height=200 cellspacing=2 width=400 background=http://www.51-126.com/up2/1294931949x1919154512.jpg border=2>
  2. <tbody>
  3. <tr>
  4. <td>输入文字 </td></tr></tbody></table>
复制代码

效果:
见3楼图2


2.如不需要边框的话 边框厚度设置成0就好了。



如:
  1. <table bordercolor=#841a00 height=200 cellspacing=2 width=545 background=http://www.51-126.com/up2/1294931949x1919154512.jpg border=0>
  2. <tbody>
  3. <tr>
  4. <td>输入文字 </td></tr></tbody></table>
复制代码


效果:
见三楼图3





------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3.背景填充色



如:
  1. <TABLE borderColor=gray height=150 cellSpacing=10 width=400 bgColor=yellow border=30>
  2. <TBODY>
  3. <TR>
  4. <TD bgColor=green>输入文字</TD></TR></T></TBODY></TABLE>
复制代码


效果:
见3楼图4

(同样的,也可以改变border=30 中的30来改变黄色边框的大小,设置为0则为没有边框)



------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
三、滤镜效果



先从无参数的滤镜开始。











1.纵向翻转



基本语法:基本语法:style="filter: flipv()"



主要适用范围:文字<font>,图片<img>,播放器<embed>等等。



如:
  1. <IMG style="filter: flipv()" src=http://www.51-126.com/up2/1294931949x1919154512.jpg>
复制代码


效果:

见三楼图5



2.黑白效果



基本语法:style="filter: gray()"



主要适用范围:图片<img>,播放器<embed>,表格<table>,单元格<td>



如:
  1. <embed  style="filter: xray()" width=300 height=28 autostart=false src=www.7yiku.com/new/7yiku/ykfile26/lian/music/3ca6df9ecb317044fafda56266c1664dca968f8dyk/7YiKu.Com.mp3 >
复制代码

效果:

见三楼图6



3.x光效果(黑白底片)



基本语法:style="filter: xray()"



主要适用范围:图片<img>,播放器<embed>,表格<table>,单元格<td>



如:
  1. <IMG style="filter: xray()" src=http://www.51-126.com/up2/1294931949x1919154512.jpg>
复制代码



效果:
见三楼图7


------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4.羽化效果(半透明效果)



基本语法:style="filter: alpha(opacity=10,finishopacity=70,style=3)"





opacity属性:设置起始透明度,取值0至100之间的任意数值,100表示完全不透明;finishopacity属性为终止透明度,缺省为0 X7;S  
style属性:设置渐变风格,0表示均匀渐变,1表示线性渐变,2表示放射渐变,3表示直角渐变,缺省值为0。





主要适用范围:文字<font>,图片<img>,播放器<embed>,表格<table>,单元格<td>



如:
  1. <img style="filter: alpha(opacity=10,finishopacity=70,style=3)" src="http://www.51-126.com/up2/1294931949x1919154512.jpg">
复制代码


效果:
见三楼图8



------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

评分

参与人数 1知名度 +10 收起 理由
Kupig、尛乖 + 10 太好了,这下新人就知道怎么套用代码了

查看全部评分

该用户从未签到

 楼主| 发表于 2011-1-13 23:40:04 | 显示全部楼层
本帖最后由 ﹏苏晴.゛ 于 2011-1-23 21:39 编辑

 

图1

 

图2

UID=70。苏晴

 

 

图3

UID=70。苏晴

 

 

图4

苏晴

 

 

图5

 

图6 播放器

 

 

 

 

 

图7  X光效果

 

 

 

 

图8  羽化效果

 

该用户从未签到

 楼主| 发表于 2011-1-14 00:16:15 | 显示全部楼层
本帖最后由 ﹏苏晴.゛ 于 2011-1-14 01:54 编辑

1.首先在我们发帖的时候必须要做的一件事情,就是"搜索"为了避免发过别人已经发过的帖子。这也是个好习惯。

-2.接下来才是主题,进入版块选择发帖。找到工具栏里的表格我们点击打开,出现这里的表格行数:就是你准备要用多少行,一般来说一个漂亮的音乐帖,最少是3行。第一行:歌名介绍。第二行是图片美化和播放器。第三行是地址。当然也可以按照个人的喜欢排版;表格列数:这个指的是表格横排有多少列,比如你想发左边是图片右边是播放器,和行数其实是差不多的,你可以理解为一个是竖着看,一个是横着看。表格宽度:没有必要解释;背景颜色:指的是表格的颜色。

3.
以上都是表格工具的具体介绍,下面才是表格的制作,比如:我们设置表格行数是1、列数是1、宽度是500、颜色为粉红#FF00FF

1.jpg
-

4.
输入后我们提交得到这样的表格,效果如图:
2.jpg
-

5.
接着我们把鼠标点在第一层粉红色的线框里,这时我们要上层了,再次打开表格-

6.
输入数据注意:宽度要比你第一层的要小,具体小多少自己把握一般10到50就可以了。我这里是从500变到了490。否则表格出来的效果是很不好看的。提交后得到:

3.jpg

-

7.
第三层输入的时候我们再次把鼠标放入蓝色线框里,这时我们要先按回车键2次,然后在随便打个字。如图:

4.jpg

-

8.
再次打开表格,这里表格行数和列数不变、改变的依然是宽度我从490变到了480,然后点击提交-

9.
之后变成这样:

5.jpg

有人问你打的“晴”字呢?那是为了插入随便打的,我都把表格弄好了当然要把那个字删了。-

10.
最后在在表格里输入想写的话、想插入的图片、想插入的音乐。-

11.
在编辑好所有表格以后,我们在切换到源码模式全部选择然后居中。为什么要选这步?因为这样表格整体看上去比较对称。当然这步可以在表格刚做好的时候就去进行,个人喜欢放在最后。如图:

6.jpg

-

12.
需要注意的是如果添加图片用图片添加的工具可能在添加的时候不是自己想要的位置,这个时候我们可以用鼠标拖到我们想到的表格层位置,个人建议用附件上传,这样我们插入就不会错位了。-

13
.以上的方法只是最普通的一种,用表格习惯的朋友都有简单的方法就是复制粘贴的方法,那种方法也是我喜欢用的。那种方法教程比较抽象,想学的朋友可以自己变通下,利用快捷键:CTRL+C;CTRL+V。

该用户从未签到

 楼主| 发表于 2011-1-14 00:47:13 | 显示全部楼层

k

本帖最后由 ﹏苏晴.゛ 于 2011-1-16 21:27 编辑

精品的表格其实是可以达到H代码的效果,有人会说H代码的边框表格是办不到的。其实并不完全是的。
-这在于FLASH的变通应用。但有些效果表格是确实达不到的!
-关于H代码只有版主和HTML代码组可以用,因为考虑到大多的友友对H代码不了解,容易对版面造成错位所以暂且这么设置了这个权限。
-如果觉得自己能力可行的请申请代码组权限


HTML标签代码  

     
1.文字设置代码
<font face=黑体 size=4 color=red>文字设置代码</font>

  2.大号文字设置代码
<font face=黑体 style=font:50pt color=red>文字设置代码</font>

  3.文字的边外加光辉效果代码
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"> <FONT style="FONT-SIZE: 60pt;FONT-FAMILY:隶书; COLOR: #ffff00"> 如酷酷猪音乐</FONT></div>

  4.文字重叠效果代码
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#000000,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%"> <FONT style="FONT-FAMILY:隶书">酷酷猪音乐论坛</FONT> </div>

  5.文字竖排代码
<p align=RIGHT> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 酷酷猪音乐论坛,<br> 欢迎新来的宝贝。<br> .....<br> </FONT></P>

  6.一条横线代码
<CENTER> <HR SIZE=2 color=#ffff00 ALIGN=CENTER WIDTH="500"> </CENTER>

  7.贴图代码1
<img src="图片地址">

  8.贴图代码2
<INPUT src="图片地址" type=image width=500>

  9.羽化图片代码
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="图片地址" type=image width=400>

  10.超连接代码
<A href="连接网页地址" target=_blank>说明文字</A>

  11.从左向右移动的代码
<MARQUEE scrollAmount=3 direction=right> 文字或图片从左向右移动 </marquee>

  12.从右向左移动的代码
<marquee scrollamount=2 direction=left> 文字或图片从右向左移动 </marquee>

  13.从下向上移动的代码
<marquee scrollamount=1 direction=up > 文字或图片从下向上移动 </marquee>

  14.从上向下移动的代码
<marquee scrollamount=5 direction=down >文字或图片从下向上移动 </marquee>

  15.左右来回走移动的代码
<marquee scrollamount=8 behavior=alternate > 文字或图片左右来回走移动 </marquee>

  16.相对定位代码
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 200px; ridge:">
</DIV>

  17.绝对定位代码
<DIV style="LEFT: 300px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 220px" >
</DIV>

  18.相对定位与绝对定位加叠图片代码
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 200px; ridge:">
<DIV style="LEFT: 300px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 220px" >
<INPUT type=image width=160 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" >
</INPUT> </DIV> </DIV>

  19.各种常用标签语句

<BR> 过行单标签.  <p></p> 过段标签. <pre>文字依原始样式显示标签</pre> 

一个空格.  <li>文字行首加一个圆点.</li>圆点标签.

  20.定位标签代码

<CENTER>内容居中</CENTER>
<DIV align=center> 内容居中</DIV>
<p align=CENTE>内容居中</P>
<p align=LEFT>内容居左</P>
<p align=RIGHT>内容居右</P>

  水平加竖直定位指令语句(放在表格的列标签内):
<td align=LEFT valign=top>居左靠顶</td>
<td align=center valign=top>居中靠顶</td>
<td align=right valign=top>居右靠顶</td>
<td align=LEFT valign=bottom>居左靠底</td>
<td align=center valign=bottom>居中靠底</td>
<td align=right valign=bottom>居右靠底</td>


  21.银色播放器代码
<EMBED src="音乐文件地址" width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">

该用户从未签到

 楼主| 发表于 2011-1-14 01:15:56 | 显示全部楼层
本帖最后由 ﹏苏晴.゛ 于 2011-1-23 21:40 编辑

懒人常见H代码共享

 

第一种:普通版-颜色背景图框


这里贴标题字如酷酷猪音乐论
下面插入各种内容.


第二种:普通版-颜色背景淡化


 

第三种:普通版-背景动画触碰


By.苏晴

 

 

第四种:普通版-背景动画移动

 

 

 

 

 
K
u
k
u
p
i
g



 

第五种:普通版-边框粒子效果

 

该用户从未签到

 楼主| 发表于 2011-1-14 01:21:33 | 显示全部楼层
本帖最后由 ﹏苏晴.゛ 于 2011-1-14 09:52 编辑

第一种:普通版-颜色背景图框
  1. <br>

  2. <DIV id=table1 style="LEFT: 0px; WIDTH: 600px; POSITION: relative; TOP: 20px">

  3. <TABLE borderColor=660000 cellSpacing=15 cellpadding=20 bgColor=#FFEEDD width=500 height=300 border=20>

  4. <TR><TD>

  5. <CENTER>

  6. <FONT style="FONT-SIZE: 19pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #000000; LINE-HEIGHT: 150%" face=隶书>

  7. 这里贴标题文字如酷酷猪音乐论</FONT>

  8. <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://www.51-126.com/up2/1294938406x1919154512.jpg" type=image width=400>

  9. <br>

  10. <font face=黑体 size=5 color=000000>下面插入各种内容.

  11. </font><br>

  12. </CENTER></TD></TR></TABLE>

  13. </DIV><br><br><br>
复制代码
第二种:普通版-颜色背景淡化
  1. <br><br>

  2. <DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 10px">

  3. <table border="15" width="600" cellspacing="5" cellpadding="5" bgcolor="#FFFF00" bordercolor="#800000" id="table1" height="330">

  4. <tr>

  5. <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ff0000', endColorStr='#ffffff', gradientType='1')">  

  6. </td></tr></table>

  7. </DIV><br><br><br>
复制代码


第三种:普通版-背景动画触碰
  1. <TABLE borderColor=fff000 height=350 cellSpacing=3 cellPadding=10  bgColor=#0000ff width=450 border=3>

  2. <TBODY>

  3. <TR>

  4. <TD>

  5. <MARQUEE scrollAmount=4 direction=down behavior=alternate height=350>

  6. <MARQUEE scrollAmount=4 behavior=alternate width=450>

  7. <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://www.51-126.com/up2/1294938406x1919154512.jpg" type=image width=150><br><FONT color=fff000 size=4><B>by.苏晴</B></FONT>

  8. </MARQUEE></MARQUEE>

  9. </TD></TR></TBODY></TABLE>
复制代码
第四种:普通版-背景动画移动
  1. <MARQUEE scrollAmount=3 behavior=alternate width="100%">

  2. <table border="15" width="560" cellspacing="5" cellpadding="5" bgcolor="#FFFF00" bordercolor="#800000" id="table1" height="300">

  3. <tbody>

  4. <tr>

  5. <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#00ff00', gradientType='1')">  

  6. <DIV  align=center valign=top>

  7. <MARQUEE behavior=alternate><B><FONT face=宋体 color=#9932CC size=5>

  8. <MARQUEE direction=up behavior=alternate width=30 height=40>K<BR></MARQUEE>

  9. <MARQUEE direction=up behavior=alternate width=80 height=70>u<BR></MARQUEE>

  10. <MARQUEE direction=up behavior=alternate width=50 height=40>k<BR></MARQUEE>

  11. <MARQUEE direction=up behavior=alternate width=40 height=50>u<BR></MARQUEE>

  12. <MARQUEE direction=up behavior=alternate width=40 height=65>p<BR></MARQUEE>

  13. <MARQUEE direction=up behavior=alternate width=40 height=80>i<BR></MARQUEE>

  14. <MARQUEE direction=up behavior=alternate width=50 height=70>g<BR></MARQUEE>

  15. <MARQUEE direction=up behavior=alternate width=40 height=60>欢<BR></MARQUEE>

  16. <MARQUEE direction=up behavior=alternate width=30 height=50>迎<BR></MARQUEE>

  17. <MARQUEE direction=up behavior=alternate width=60 height=60>您<BR></MARQUEE>

  18. </FONT></B></MARQUEE>

  19. <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://www.51-126.com/up2/1294938406x1919154512.jpg" type=image width=160>

  20. </DIV>

  21. </td></tr></tbody></table></MARQUEE>
复制代码
第五种:普通版-边框粒子效果
  1. <CENTER><img src="http://www.51-126.com/up2/1294938406x1919154512.jpg" width=400 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#000000,strength=30)"></CENTER>
复制代码

该用户从未签到

 楼主| 发表于 2011-1-14 01:30:22 | 显示全部楼层
附录:
[ 网页颜色代码对照表 —— 代码篇 ]


颜色预览
颜色名
颜色英文
论坛代码
████
浅粉红
LightPink
#ff9999
████
粉红
Pink
#ffc0cb
████
深红(猩红)
Crimson
#dc143c
████
淡紫红
LavenderBlush
#fff0f5
████
弱紫罗兰红
PaioletRed
#db7093
████
热情的粉红
HotPink
#ff69b4
████
深粉红
DeepPink
#ff1493
████
中紫罗兰红
MediumVioletRed
#c71585
████
暗紫色(兰花紫)
Orchid
#da70d6
████
蓟色
Thistle
#d8bfd8
████
洋李色(李子紫)
Plum
#dda0dd
████
紫罗兰
Violet
#ee82ee
████
洋红(玫瑰红)
Magenta
#ff00ff
████
深洋红
DarkMagenta
#8b008b
████
紫色
Purple
#800080
████
中兰花紫
MediumOrchid
#ba55d3
████
暗紫罗兰
DarkViolet
#9400d3
████
暗兰花紫
DarkOrchid
#9932cc
████
靛青(紫兰色)
Indigo
#4b0082
████
蓝紫罗兰
BlueViolet
#8a2be2
████
中紫色
MediumPurple
#9370db
████
中暗蓝色(中板岩蓝)
MediumSlateBlue
#7b68ee
████
石蓝色(板岩蓝)
SlateBlue
#6a5acd
████
暗灰蓝色(暗板岩蓝)
DarkSlateBlue
#483d8b
████
淡紫色(熏衣草淡紫)
Lavender
#e6e6fa
████
幽灵白
GhostWhite
#f8f8ff
████
纯蓝
Blue
#0000ff
████
中蓝色
MediumBlue
#0000cd
████
午夜蓝
MidnightBlue
#191970
████
暗蓝色
DarkBlue
#00008b
████
海军蓝
Navy
#000080

████
老花色(旧蕾丝)
OldLace
#fdf5e6
████
浅黄色(小麦色)
Wheat
#f5deb3
████
鹿皮色(鹿皮靴)
Moccasin
#ffe4b5
████
橙色
Orange
#ffa500
████
番木色(番木瓜)
PapayaWhip
#ffefd5
████
白杏色
BlanchedAlmond
#ffebcd
████
纳瓦白(土著白)
NavajoWhite
#ffdead
████
古董白
AntiqueWhite
#faebd7
████
茶色
Tan
#d2b48c
████
硬木色
BurlyWood
#deb887
████
陶坯黄
Bisque
#ffe4c4
████
深橙色
DarkOrange
#ff8c00
████
亚麻布
Linen
#faf0e6
████
秘鲁色
Peru
#cd853f
████
桃肉色
PeachPuff
#ffdab9
████
沙棕色
SandyBrown
#f4a460
████
巧克力色
Chocolate
#d2691e
████
重褐色(马鞍棕色)
SaddleBrown
#8b4513
████
海贝壳
Seashell
#fff5ee
████
黄土赭色
Sienna
#a0522d
████
浅鲑鱼肉色
LightSalmon
#ffa07a
████
珊瑚
Coral
#ff7f50
████
橙红色
OrangeRed
#ff4500
████
深鲜肉(鲑鱼色)
DarkSalmon
#e9967a
████
番茄红
Tomato
#ff6347
████
浅玫瑰色(薄雾玫瑰)
MistyRose
#ffe4e1
████
鲜肉(鲑鱼色)
Salmon
#fa8072
████
雪白
Snow
#fffafa
████
淡珊瑚色
LightCoral
#f08080
████
玫瑰棕色
RosyBrown
#bc8f8f
████
印度红
IndianRed
#cd5c5c
████
纯红
Red
#ff0000
████
棕色
Brown
#a52a2a
████
火砖火砖色(耐火砖)
FireBrick
#b22222
████
深红色
DarkRed
#8b0000
████
栗色
Maroon
#800000
████
纯白
White
#ffffff
████
白烟
WhiteSmoke
#f5f5f5
████
淡灰色(庚斯博罗灰)
Gainsboro
#dcdcdc
████
浅灰色
LightGrey
#d3d3d3
████
银灰色
Silver
#c0c0c0
████
深灰色
DarkGray
#a9a9a9
████
灰色
Gray
#808080
████
暗淡的灰色
DimGray
#696969
████
纯黑
Black
#000000


████
皇家蓝(宝蓝)
RoyalBlue
#4169e1
████
矢车菊蓝
CornflowerBlue
#6495ed
████
亮钢蓝
LightSteelBlue
#b0c4de
████
亮蓝灰(亮石板灰)
LightSlateGray
#778899
████
灰石色(石板灰)
SlateGray
#708090
████
闪兰色(道奇蓝)
DodgerBlue
#1e90ff
████
爱丽丝蓝
AliceBlue
#f0f8ff
████
钢蓝(铁青)
SteelBlue
#4682b4
████
亮天蓝色
LightSkyBlue
#87cefa
████
深天蓝
DeepSkyBlue
#00bfff
████
亮蓝
LightBlue
#add8e6
████
粉蓝色(火药青)
PowderBlue
#b0e0e6
████
军兰色(军服蓝)
CadetBlue
#5f9ea0
████
蔚蓝色
Azure
#f0ffff
████
淡青色
LightCyan
#e0ffff
████
弱绿宝石
PaleTurquoise
#afeeee
████
青色
Cyan
#00ffff
████
暗瓦灰色(暗石板灰)
DarkSlateGray
#2f4f4f
████
暗青色
DarkCyan
#008b8b
████
水鸭色
Teal
#008080
████
中绿宝石
MediumTurquoise
#48d1cc
████
浅海洋绿
LightSeaGreen
#20b2aa
████
绿宝石
Turquoise
#40e0d0
████
宝石碧绿
Aquamarine
#7fffd4
████
中宝石碧绿
MediumAquamarine
#66cdaa
████
中春绿色
MediumSpringGreen
#00fa9a
████
薄荷奶油
MintCream
#f5fffa
████
春绿色
SpringGreen
#00ff7f
████
中海洋绿
MediumSeaGreen
#3cb371
████
海洋绿
SeaGreen
#2e8b57
████
蜜色(蜜瓜色)
Honeydew
#f0fff0
████
淡绿色
LightGreen
#90ee90
████
弱绿色
PaleGreen
#98fb98
████
暗海洋绿
DarkSeaGreen
#8fbc8f
████
闪光深绿
LimeGreen
#32cd32
████
闪光绿
Lime
#00ff00
████
森林绿
ForestGreen
#228b22
████
纯绿
Green
#008000
████
暗绿色
DarkGreen
#006400
████
黄绿色(查特酒绿)
Chartreuse
#7fff00
████
草绿色(草坪绿)
LawnGreen
#7cfc00
████
绿黄色
GreenYellow
#adff2f
████
暗橄榄绿
DarkOliveGreen
#556b2f
████
黄绿色
YellowGreen
#9acd32
████
橄榄褐色
OliveDrab
#6b8e23
████
米色(灰棕色)
Beige
#f5f5dc
████
亮菊黄
LightGoldenrodYellow
#fafad2
████
象牙色
Ivory
#fffff0
████
浅黄色
LightYellow
#ffffe0
████
纯黄
Yellow
#ffff00
████
橄榄
Olive
#808000
████
暗黄褐色(深卡叽布)
DarkKhaki
#bdb76b
████
柠檬绸
LemonChiffon
#fffacd
████
灰菊黄(苍麒麟色)
PaleGoldenrod
#eee8aa
████
黄褐色(卡叽布)
Khaki
#f0e68c
████
金色
Gold
#ffd700
████
玉米丝色
Cornsilk
#fff8dc
████
金菊黄
Goldenrod
#daa520
████
暗金菊黄
DarkGoldenrod
#b8860b
████
花的白色
FloralWhite
#fffaf0


文字颜色对照表

暗洋红color=darkmagenta(#8B008B)暗红色color=darkred(#8B0000)
褐玫瑰红color=rosybrown(#BC8F8F)印地安红color=indianred(#CD5C5C)
深红色color=crimson(#DC143C)红色color=red(#FF0000)
艳粉色color=hotpink(#FF69B4)深粉红color=deeppink(#FF1493
丁香红color=lilacred(#FF33CC橙红色color=orangered(#FF4500)
番茄色color=tomato(#FF6347)鲜肉色color=salmon(#FA8072)
珊瑚色color=coral(#FF7F50)浅珊瑚色color=lightcoral(#F08080)
浅肉色color=lightsalmon(#FFA07A)浅粉色color=lightpink(#FFB6C1)
粉红色color=pink(#FFC0CB)浅玫瑰色color=mistyrose(#FFE4E1)


重褐色color=saddlebrown(#8B4513)栗色color=maroon(#800000)
土黄色color=sienna(#A0522D)赭色color=sienna(#A0522D)
火砖色color=firebrick(#B22222)褐色color=brown(#A52A2A)
巧克力色color=chocolate(#D2691E)秘鲁色color=peru(#CD853F)
暗金黄色color=darkgoldenrod(#B8860B)实木色color=burlywood(#DEB887)
苍麒麟色color=palegoldenrod(#EEE8AA)茶色color=tan(#D2B48C)
金麒麟色color=goldenrod(#DAA520)沙褐色color=sandybrown(#F4A460)
暗桔色color=darkorange(#FF8C00)橙色color=orange(#FFA500)
金黄色color=gold(#FFD700)黄色color=yellow(#FFFF00)
暗卡其色color=darkkhaki(#BDB76B)卡其色color=khaki(#F0E68C)
纳瓦白color=navajowhite(#FFDEAD)桔黄色color=bisque(#FFE4C4)
鹿皮色color=moccasin(#FFE4B5)桃色color=peachpuff(#FFDAB9)


墨绿色color=darkslategray(#2F4F4F) 暗绿色color=darkgreen(#006400)
暗橄榄绿color=darkolivegreen(#556B2F)森林绿color=forestgreen(#228B22)
深绿褐色color=olivedrab(#6B8E23)绿色color=green(#008000)
间海蓝color=mediumseagreen(#3CB371)海绿色color=seagreen(#2E8B57)
浅海蓝color=lightseagreen(#20B2AA)水鸭色color=teal(#008080)
间绿色color=mediumaquamarine(#66CDAA)橄榄色color=olive(#808000)
暗海蓝color=darkseagreen(#8FBC8B)黄绿色color=yellowgreen(#9ACD32)
橙绿色color=limegreen(#32CD32)浅绿色color=lightgreen(#90EE90)
酸橙色color=lime(#00FF00)黄绿色color=greenyellow(#ADFF2F)
黄绿色color=chartreuse(#7FFF00)草绿色color=lawngreen(#7CFC00)
苍木色color=palegreen(#98FB98)春绿色color=springgreen(#00FF7F)
间春绿color=mediumspringgreen(#00FA9A)碧绿色color=aquamarine(#7FFFD4)


藏青色color=navyblue(#4B4B4B藏青色color=navy(#000080)
间宝石绿color=mediumturquoise(#48D1CC)暗青色color=darkcyan(#008B8B)
暗宝石绿color=darkturquoise(#00CED1)青绿色color=turquoise(#40E0D0)
苍绿色color=paleturquoise(#AFEEEE)青色color=cyan(#00FFFF)


暗灰蓝color=darkslateblue(#483D8B)暗蓝色color=darkblue(#00008B)
中灰蓝color=midnightblue(#191970)靛蓝色color=indigo(#4B0082)
浅蓝灰color=lightslategray(#778899)钢蓝色color=steelblue(#4682B4)
石蓝色color=slateblue(#6A5ACD)军蓝色color=cadetblue(#5F9EA0)
间蓝色color=mediumblue(#0000CD)宝蓝色color=royalblue(#4169E1)
间暗蓝color=mediumslateblue(#7B68EE)蓝色color=blue(#0000FF)
菊蓝色color=cornflowerblue(#6495ED)闪蓝色color=dodgerblue(#1E90FF)
深天蓝color=deepskyblue(#00BFFF)天蓝色color=skyblue(#87CEEB)
浅天蓝color=lightskyblue(#87CEFA)浅蓝色color=lightblue(#ADD8E6)
浅钢蓝color=lightsteelblue(#B0C4DE)粉蓝色color=powderblue(#B0E0E6)


间紫罗兰色color=mediumvioletred(#c71585)紫色color=purple(#800080)
苍紫罗兰色color=palevioletred(#DB7093)紫罗兰色color=blueviolet(#8A2BE2)
紫丁香色color=violet(#EE82EE)暗紫色color=darkviolet(#9400D3)
紫红色color=Fuchsia(#FF00FF)暗紫色color=darkorchid(#9932CC)
淡紫色color=orchid(#DA70D6)间紫色color=mediumpurple(#9370DB)
杨李色color=plum(#DDA0DD)间紫色color=mediumorchid(#BA55D3)
蓟色color=thistle(#D8BFD8)淡紫色color=lavender(#E6E6FA)


黑色color=black(#000000)暗灰色color=dimgray(#696969)
灰色color=gray(#808080)灰石色color=slategray(#708090)
暗灰色color=darkgray(#A9A9A9)银白色color=silver(#C0C0C0)
浅灰色color=lightgrey(#D3D3D3)淡灰色color=gainsboro(#DCDCDC)


白杏色color=blanchedalmond(#FFEBCD)古董白=antiquewhite(#FAEBD7)
苍木色color=papayawhip(#FFEFD5)亚麻色color=linen(#FAF0E6)
米色color=beige(#F5F5DC)灰褐色color=beige(#F5F5DC)
老花色color=oldlace(#FDF5E6)米绸色color=cornsilk(#FFF8DC)
浅金黄color=lightgoldenrodyellow(#FAFAD2)浅黄色color=lightyellow(#FFFFE0)
柠檬绸色color=lemonchiffon(#FFFACD)米色color=beige(#F5F5DC)
艾利斯兰color=aliceblue#F0F8FF
浅青色color=lightcyan(#E0FFFF)天蓝色color=azure(#F0FFFF)

该用户从未签到

发表于 2011-1-14 01:35:24 | 显示全部楼层
真是辛苦了  等我有耐心 一样样学   多多指教{:1_132:}

该用户从未签到

发表于 2011-1-14 01:47:13 | 显示全部楼层
真是辛苦你了
教程写的很详细很全面  很受益

点评

混沌剑神 www.aoswx.com/book/991.html 大武主www.gmwxw.com/book/231.html  发表于 2014-9-23 09:35
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|酷酷猪音乐分享网 ( 苏ICP备14015220号 )

GMT+8, 2018-1-19 05:29 , Processed in 0.192628 second(s), 12 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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