◆ 1>背景
<body background="http://cry./sc/set/white/0515/kos_bg8.jpg">内容部分</BODY>
<BODY> 常用参数解说:
background="bg1.gif"
设定背景墙纸。GIF 或 JPEG 皆可,可以是绝对途径或相对途径。
bgcolor="#FFFFFF"
设定背景颜色。当己设定背景墙纸时会失去作用,除非墙纸有透明部分。
text="#000000"
用以设定文字颜色。 #000000 代表黑色,亦可以采用颜色的名称,即 text="black"
◆ 2>表格
背景使用的表格:
<!-- 背景表格(开始) --><TABLE align=center background="http://cry./sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff">内容部分</TD></TR></TBODY></TABLE><!-- 背景表格(结束) -->图片边框使用的表格:
<!-- 图片边框表格(开始) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD>内容部分</TD></TR></TBODY></TABLE><!-- 图片边框表格(结束) -->落款部分使用的表格:
<!-- 落款部分(开始) --><TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100">文字格</TD><TD>图片格</TD></TR></TBODY></TABLE>><!-- 落款部分(结束) -->
<TABLE>相关参数解说:
<TR>
指表格列数
<TD>
指表格行数
align="center"
表格的摆放位置(水平),可选值为: left, right, center
background="kos_bg5.jpg"
表格的背景,与 bgcolor 不要同用。可以在<td>中与<TABLE>中分别使用。
border="1"
表格边框厚度,不同浏览器有不同的内定值,故请指明。
cellpadding="0"
文字与格线的距离
cellspacing="60"
表格格线厚度
bordercolordark="#D66D31"
表格边框背光部分的颜色。(效果帖中背景边框粉红色线部分)
bordercolorlight="#EF82BD"
表格边框向光部分的颜色。(效果帖中背景边框桔红色部分)
width="520"
表格宽度,接受绝对值(如 80)及相对值(如 80%)。可以在<td>中与<TABLE>中分别使用。
bgcolor="#Ffffff"
表格底色,与 background 不要同用。可以在<td>中与<TABLE>中分别使用
bordercolor="#F7D75A"
表格边框颜色
注明:有些参数在<TABLE>与<TD>中可以同用,产生不同效果。
◆ 3>文字
主题文字:
<!-- 主题文字(开始) --><FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童 话</B></FONT><!-- 主题文字(结束) -->
相关参数解说:
COLOR: #EF598C 文字颜色
FILTER: glow(color=#F7D75A) 发光颜色
FONT-FAMILY: 华文彩云 文字字体
FONT-SIZE: 40pt 文字大小
LINE-HEIGHT: 150% 区域的高度
WIDTH: 100% 文字区域的宽度
注明:主题文字是用CSS滤镜实现的发光字效果与css语法和html语法的编写上有所区别,有关CSS滤镜效果将在以后的教程中作详细的说明。
<!-- 文字1(开始) --><font face=宋体 size=2 color=#DE3C73>忘了有多久<br>再没听到<br>你对我说你最爱的故事</font><!-- 文字1(结束) -->
<!-- 签名文字(开始) --><font face=宋体 size=2 color=#DE3C73>音乐:童话/光良<br><br>编缉:雪夜寒星<br><br></font><!-- 签名文字(结束) -->
相关参数解说:
face=宋体 字体
size=2 文字大小
color=#DE3C73 文字颜色
◆ 4>图片
实例中,分隔线、图片和装饰图都是应用的图片标签(废话,都是图片当然用图片标签),下面以内容图片做参照说明:
<!-- 图片1(开始) --><IMG src="http://cry./web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0"><!-- 图片1(结束) -->
相关参数解说:
src="pic00.jpg" 图片连接地址
width="260" 图片宽
height="377" 图片高
◆ 5>音乐
<!-- 音乐(开始) --><bgsound src="http://cry./web/css/bbsjc/images/tonghua.wma" loop=3><!-- 音乐(结束) -->
<BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多。
相关参数解说:
src="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart=true
是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
loop=infinite
是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。
◆ 6>总结
除以上所说明的代码以外实例还用到了一个排版标记<br>,该标记称为换行标记。作用:令字、画、表格等显示于下一行。
关与<!-- 以下部分图片和文字为重复使用相同代码(只是更换了图片地址和文字) -->注释部分,大家可以先编缉设定好一张图片和所配文字的代码,由于其它图片和文字所用到的效果相同,所以只用复制粘帖多次,把相应的图片和文字进行更换就可以了。
|