发新话题
打印

如何美化你的贴子——HTML代码实际应用讲解

本主题由 老夫子 于 2008-2-18 03:41 设置高亮

如何美化你的贴子——HTML代码实际应用讲解

一:背景

 

 

一个完整的HTML帖子应该是:

美贴=背景+文章+插图+收尾

 

原代码如下: <TABLE align=center background="背景图片网址" border=10 cellSpacing=1

borderColor=#841A00 width=500><TBODY><TR><TD>帖子的文章加图片</TD></TR></TBODY></TABLE>

注意:前边用了多少<table......><tr><td>后面就要有多少 </td></tr></table>收尾。多收和少收都会使帖子出错哦 :)

常用的参数设定及注解:

<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF"> width="400" 表格宽度,接受绝对值(如 500)及相对值(如 80%)。 border="10" 表格边框的厚度。 cellspacing="2" 表格格线的厚度 cellPadding=5 表格格线内厚度 align="CENTER" 表格的摆放位置(水平),可选值为:左: left, 右: right, 居中: center valign="TOP". 表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。    background="背景图片网址" 表格的背景图片,与 bgcolor 不要同用。 bgcolor="#0000FF" 表格的底色,与 background 不要同用 bordercolor="#CF0000" 表格边框颜色 bordercolorlight="#00FF00" 表格边框向光部分的颜色 bordercolordark="#00FFFF" 表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

二.文字应用

1.文字基本设制

基本代码如下:

< align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字 </FONT></P> < align=center>表示居中,< align=left>表示居左,< align=right>表示居右。 face=字体 常用字体为:宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等 size=字体大小,这里的最大值为7 取值越大文字就越大另一种贴法: <font style=font:40pt face=新宋体 color=#ff0000>插入文字</font> font:40pt 数值越大文字就越大。 color=颜色代码。

下面是颜色选择器网址,大家可以自己选择:http://mhqsh.go1.icpcn.com/tsq/tsq.htm

 

2.移动文字

效果:

 

移动文字可以根据下列代码自行调节

基本代码:<marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1><font color=red size=+2 face=华文新魏>插入文字 </font></marquee>

说明: direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right) behavior=移动方式, scroll 一圈一圈绕着走, slide 只走一次, behavior=alternate 来回走 width=宽度  height=高度  scrolldelay=速度  scrollamount=位移上面的参数大家可以根据不同的情况自行调节。

3。文字特效

效果1

 

欧浪欢迎你的到来

代码如下: <table align=center border=3 bordercolor="#CD5C5C" width=500 height=375><td background=http://my.e-yu.cn/ctv/tp/fengjing/lu10.jpg><marquee behavior=alternate scrollamount=3 direction=down height=350><marquee behavior=alternate scrollamount=3 width=500><img src=http://my.e-yu.cn/ctv/tp/fengjing/xing01.gif><font color=red size=6><b>欧浪欢迎你的到来</b><img src=http://my.e-yu.cn/ctv/tp/fengjing/xing01.gif></font></marquee></table><br>

效果2

 

 
 

 

 

代码如下: <center><table width=500><tr><td><font color=#991144&><marquee behavior=alternate><MARQUEE behavior=alternate><FONT face=宋体 color=red size=5><B><MARQUEE direction=up behavior=alternate width=60 height=120>欧</MARQUEE><FONT color=orange> <MARQUEE direction=up behavior=alternate width=60 height=80>浪</MARQUEE><FONT color=#FF8CA9><MARQUEE direction=up behavior=alternate width=60 height=120>欢</MARQUEE><FONT color=green> <MARQUEE direction=up behavior=alternate width=60 height=80>迎</MARQUEE></B><FONT color=blue><MARQUEE direction=up behavior=alternate width=60 height=120>光</MARQUEE><FONT color=lime> <MARQUEE direction=up behavior=alternate width=60 height=80>临 </MARQUEE></FONT></FONT></FONT></FONT></FONT></FONT></marquee></font>&l t;/td></tr></table></center>

 

 

[ 本帖最后由 老夫子 于 2008-2-18 02:30 编辑 ]
~欢迎游览小站~

TOP

三.贴图

1.基本代码:

<img src=图片网址 width=图片宽度 height=图片长度> 注意:设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小,以免失真,若需要改图片大小最好使用图像编辑工具(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)。图片的居中,居左,居右相信大家都很清楚了,这里不再重复。。。。。

2.给图片加边框

 

基本代码:

<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://bbsimg.qianlong.com/upload/00/81/74/59/817450 1076328132978.gif  width=444 height=177></td></table> 说明: border="6" 表格边框的厚度,不同浏览器有不同的内定值。 cellspacing="2" 表格格线的厚度 cellPadding=1 表格格线内厚度 borderColor=#841A00 边框色彩 

~欢迎游览小站~

TOP

四.透明FLAH的应用

1.常用效果

 

基本代码如下:

<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#660000 background=图片><TBODY><TD><EMBED src=透明网址 width=590 height=406 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>

注意:长和宽的设定要根据FLASH的实际大小来设定

~欢迎游览小站~

TOP

2.定位透明FLASH效果

注意:这种方法由于是通过坐标的方式把透明FLASH固定到了某一点,所以在不同的环境和不同的论坛要相应调整不同的位置。定位较为麻烦,而且最大的弊病就是屏幕分辨率设置不一样,观看的效果也不一样(比如你是用分辨率1024×768做的帖子,你感觉固定的位置很好。但别人用分辨率800×600观看却偏得很远。本人建议一般不要用这种方法。

 

 



 

基本代码如下:

<TABLE align=center background=贴图 border=10 cellPadding=5 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD><br>
<center><table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=贴图 width=400 height=300></td></table></center><br>
<EMBED style="LEFT: 400px; WIDTH: 400px; POSITION: absolute; TOP: 4150px; HEIGHT: 300px" align=right src=透明网址width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
</TD></TR></TBODY></TABLE>

.说明:TOP: 4150px 指FLASH与帖子上边之间的距离。
LEFT: 400px 是指FLASH与帖子左边的距离
WIDTH: 400px HEIGHT: 300px 是指FLASH定位的范围宽度和高度,
后面的width=400 height=300 就是指FLASH的宽和高了。


<table>...</table> 这是一个做表格的元素.它的属性:
align="center" 表格水平位置居中.
border="0" 表格边框厚度为"0"(因为没用颜色做框)
cellpadding="0" 表格内文字等与格线的距离为"0"
cellspacing="16" 表格格线的厚度为"16"
width="96%" 表格宽度为"96%"(相对可视宽度的96%)
background= 背景图的地址=
<tr>...</tr> 定义表行的元素(竖几格,横几格等)看起来好象没做表格,实际上我们做了(只是没做那种财务上的表格)所以不能省.
<td>...</td> 这是定义表元的元素,也就是定义一个表格的具体内容的元素,它的属性和元素<table>...</table>的属性差不多,这里用了:
width="100%" 表格宽度为"100%"
align="center" 表格水平位置居中.


 

六.表格制作

1.必须掌握的表格属性:

<tr>  表行
<th>  表头
<td>  表元(表格的具体内容)
align定义表格的对齐方式,有三个属性值center,left,right
background 定义表格的背景图案,属性值为图片的地址
bgcolor 定义表格的背景颜色,属性值是各种颜色代码
border 定义表格的边框宽度,属性值是数字
bordercolor 定义表格边框的颜色,属性值是各种颜色代码
background 定义背景图案
cellpadding 定义单元格内容与单元格边框之间的距离,属性值是数字
cellspacing 定义表格中单元格之间的距离
height 定义表格的高度,属性值是数字
width定 义表格的宽度,属性值是数字
colspan 定义合并表格的列数,属性值是数字
rowspan 定义合并表格的行数,属性值是数

实例1:

表格的基本结构:<tr> 表行  <th>表头  <td> 表元(表格的具体内容)的运用。(这一般可以在做专辑是做链接用)

姓名 性别 年龄
老徐  男 25

代码如下:<table border=1>
<tr><th>姓名</th><th>性别</th><th>年龄</th>
<tr><td>老徐</td><td>男</td><td>25</td>
</table>

加蓝色背景代码如下:<TABLE border=1>
<TBODY>
<TR><TH><FONT style="BACKGROUND-COLOR: #2173ef">姓名</FONT></TH>
<TH><FONT style="BACKGROUND-COLOR: #2173ef">性别</FONT></TH>
<TH><FONT style="BACKGROUND-COLOR: #2173ef">年龄</FONT></TH>
<TR>
<TD>老徐</TD>
<TD>&nbsp;男</TD>
<TD>25</TD></TR></TBODY></TABLE>

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

实例2

表格的基本结构:<tr> 表行  <th>表头  <td> 表元(表格的具体内容)的运用!

 

日       期 6-11 8-11 10-11
旅游地点 巴黎  伦敦  希腊

代码如下:
<table border=1>
<tr><th>日期</th><td>6-11</td><td>8-11</td><td>10-11</td>
<tr><th>旅游地点</th><td>巴黎
</td><td>伦敦</td><td>希腊</td>
</table>

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

实例3:

一般情况下,表格的总长度和总宽度是根据各行和各列的总和自动调整的,如果我们要直接固定表格的大小,可以使用下列方式:width和height属性分别指定表格一个固定的宽度和长度,可以用数值来表示,也可以用百分比(与整个屏幕相比的大小比例)来表示。 格与格之间的线为格间线,它的宽度可以使用中的CELLSPACING属性加以调节!

苹果 香蕉 葡萄
 200公斤 200公斤 100公斤

代码如下:
<table width=300 height=100 border=3 cellspacing=5>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>

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

 实例4:

表格内文字的对齐/布局. 表格中数据的排列方式有两种,分别是左右排列和上下排列。左右排列是以ALIGN属性来设置,而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种:居左(left)、居右(right)和居中(center);而上下排列基本上比较常用的有四种:上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。

 

居左 居中 居右
A A A

代码如下:
<table border=1 width="200">
<tr><th>居左</th><th>居中</th><th>居右</th>
<tr><td align=left>A</td><td align=center>A</td><td align=right>A</td>
</table>

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

实例5:

(跨多行、多列的表元)

要创建跨多行、多列的表元,只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性,这两个属性的值,表明了表元中要跨越的行或列的个数。
跨多列的表元 <th colspan=#> <td colspan=#>
colspan表示跨越的列数,例如colspan=2表示这一格的宽度为两个列的宽度。
跨多行的表元 <th rowspan=#> <td rowspan=#> 
rowspan所要表示的意义是指跨越的行数,例如rowspan=2就表示这一格跨越表格两个行的高度。

值班人员
一月 二月 三月
老花 清风 猫王

代码如下:<table border>
<tr><th colspan=3>值班人员 </th>
<tr><th>一月</th><th>二月</th><th>三月</th>
<tr><td>老花</td><td>清风</td><td>猫王</td>
</table>

值班人员 一月 二月 三月
老花 清风 猫王

代码如下:<table border>
<tr><th rowspan=2>值班人员</th>
<th>星期一</th><th>星期二</th> <th>星期三</th></tr>
<tr><td>月光</td><td>三十三天</td><td>海洋</td></tr>
</table>

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

实例6.

(表格的颜色)在表格中,既可以对整个表格填入底色,也可以对任何一行、一个表元使用背景色。
表格的背景色彩   <table bgcolor=#>
行的背景色彩    <tr bgcolor=#>
表元的背景色彩   <th bgcolor=#>或 <td bgcolor=#>

 

彩电 冰箱 家电

A

B

代码如下:
<table border=2 bgcolor=aqua><tr><th bgcolor=blue>彩电</th><th bgcolor=blue>冰箱</th><th rowspan=2>家电</th><tr bgcolor=yellow><td>A</td><td>B</td></table>

 

六.贴歌代码

1.背景音乐(适合 mid wma等格式)
<bgsound src=音乐网址 Loop=-1>

2.音频(适合MP3 WMA RM等很多格式)代码如下:
<embed src=音乐网址 type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=40>

3.视频
<embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400>

4.FLASH
<embed src=网址 width=400 height=400>

说明:AutoStart=true 表示是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为true
Loop=true 表示设定播放重复次数,LOOP=3表示重复3次,true表示无限次播放,FALSE播放一次即停止。
width=宽度 height=高度 可以设定控制播放器面板的大小,如果都设置为0就可以把播放器隐藏了

~欢迎游览小站~

TOP

七.背景素材做框的方法

 

素材一

http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/20061251103542951.jpg

素材二

http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512352452292.jpg

素材三

http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512355471460.jpg

素材四

http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/20061251236961486.jpg

素材五

http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512365016267.gif

素材六

http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512371874866.gif

 

用背景素材做框的原理就是把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果.


 

 

先看懂这个代码:
<table>...</table> 这是一个做表格的元素.它的属性:
align="center" 表格水平位置居中.
border="0" 表格边框厚度为"0"(因为没用颜色做框)
cellpadding="0" 表格内文字等与格线的距离为"0"
cellspacing="30" 表格格线的厚度为"30"
width="100%" 表格宽度为"100%"(相对可视宽度的100%)
background= 背景图的地址=
<tr>...</tr> 定义表行的元素(竖几格,横几格等)看起来好象没做表格,实际上我们做了(只是没做那种财务上的表格)所以不能省.
<td>...</td> 这是定义表元的元素,也就是定义一个表格的具体内容的元素,它的属性和元素<table>...</table>的属性差不多,这里用了:
width="100%" 表格宽度为"100%"
align="center" 表格水平位置居中.
看懂了这个代码后,这里有很重要的两点要说明:
1.cellspacing="30"的意义:对照前面学过的用颜色做表格的方法,可以看出,这里什么也没有,只有一张填满的背景图,表格格线的厚度为"30"就变成了定义下一层背景图离这个背景图边线的距离,而<td>...</td>中的 width="100%" 就定义了下一层背景图要填满这个(扣除"30"的)空间.好了,这个"30"就是我们看到的框的最外层的厚度.
2.这第一层背景图很难看,因为我没设定高度(height=)这个"不设定高度"太好了,等框做好后,你可以把你想放的一切都放进去,你放一个图,它就比一个图高,你放十个图,它就自动比十个图高.不设定高度,在里面调度字画轻松自如。

 

 

温馨祝您阅贴愉快! 

代码如下:

<TABLE cellSpacing=30 cellPadding=0 width="100%" background=http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/20061251103542951.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=3 cellPadding=30 width="100%" background=http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512355471460.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=3 cellPadding=8 width="100%" background=http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512352452292.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=2 cellPadding=2 width="100%" background=http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512355471460.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=3 cellPadding=8 width="100%" background=http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512352452292.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=3 borderColorDark=#ecc956 cellPadding=0 width="100%" background=http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/20061251236961486.jpg>
<TBODY>
<TR>
<TD>
<><BR></P>
< align=center><B><FONT color=#eeeeee size=6><IMG src="http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512365016267.gif" border=0></FONT></B></P>
< align=center><IMG src="http://lumeiruxer.16789.net/s-helpSite/domName/lumeiruxer/200612512371874866.gif" border=0></P>
< align=center><B><FONT color=#eeeeee size=6>插入内容</FONT></B></P>
<P align=center> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

[ 本帖最后由 老夫子 于 2008-2-18 02:37 编辑 ]
~欢迎游览小站~

TOP

今天无意闯如宝库了,都是好东东啊

TOP

发新话题