(重点)HTML代码实际应用讲解1

来源:百度文库 编辑:神马文学网 时间:2024/04/28 18:51:16
HTML代码实际应用讲解一:背景
一个完整的HTML帖子应该是:
美贴=背景+文章+插图+收尾
原代码如下:

帖子的文章加图片

注意:前边用了多少后面就要有多少收尾。多收和少收都会使帖子出错哦 :)
常用的参数设定及注解:

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.文字基本设制
基本代码如下:

插入文字


表示居中,

表示居左,

表示居右。
face=字体 常用字体为:宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等
size=字体大小,这里的最大值为7 取值越大文字就越大
另一种贴法:
插入文字
font:40pt 数值越大文字就越大。
color=颜色代码。下面是颜色选择器,大家可以自己选择:
2.移动文字
效果:
移动文字
可根据下面基本代码
自行调节效果
基本代码:
插入文字
说明:
direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)
behavior=移动方式, scroll 一圈一圈绕着走, slide 只走一次, behavior=alternate 来回走
width=宽度  height=高度  scrolldelay=速度  scrollamount=位移
上面的参数大家可以根据不同的情况自行调节。
3。文字特效
效果1
欢迎你的到来
代码如下:

欢迎你的到来

效果2






代码如下:

文字特效有很多种,本论坛有单独的教程。这里不再介绍 :)
三.贴图
1.基本代码:

注意:设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小,以免失真,若需要改图片大小最好使用图像编辑工具(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)。图片的居中,居左,居右上面已经介绍了,这里不再重复。。。。。
2.给图片加边框
效果:

基本代码:

说明:
border="6" 表格边框的厚度,不同浏览器有不同的内定值。
cellspacing="2" 表格格线的厚度
cellPadding=1 表格格线内厚度
borderColor=#841A00 边框色彩
3.图片朦胧
A.圆形效果

代码: 
B.方形效果

代码: 
呵呵,不过这类特效月光等用动网7。0版本的系统都不支持,只能到其他论坛去试验。
四.透明FLAH的应用
1.常用效果
',1)">
代码如下:

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

',2)">
代码如下:
http://pugongyingw.51.net/image/bj/20.jpg" border=10 cellPadding=5 cellSpacing=2 borderColor=#841A00 width=500>






说明:TOP: 6910px 指FLASH与帖子上边之间的距离。
LEFT: 400px 是指FLASH与帖子左边的距离
WIDTH: 400px HEIGHT: 300px 是指FLASH定位的范围宽度和高度
后面的width=400 height=300 就是指FLASH的宽和高了。
五.贴歌代码
1.背景音乐(适合 mid wma等格式)

2.音频(适合MP3 WMA RM等很多格式)
',3)">
代码如下:

3.视频

4.FLASH

说明:AutoStart=true 表示是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为true
Loop=true 表示设定播放重复次数,LOOP=3表示重复3次,true表示无限次播放,FALSE播放一次即停止。
width=宽度 height=高度 可以设定控制播放器面板的大小,如果都设置为0就可以把播放器隐藏了。
六.表格
1.掌握表格的以下属性:
 表行
 表头
 表元(表格的具体内容)
align定义表格的对齐方式,有三个属性值center,left,right
background 定义表格的背景图案,属性值为图片的地址
bgcolor 定义表格的背景颜色,属性值是各种颜色代码
border 定义表格的边框宽度,属性值是数字
bordercolor 定义表格边框的颜色,属性值是各种颜色代码
background 定义背景图案
cellpadding 定义单元格内容与单元格边框之间的距离,属性值是数字
cellspacing 定义表格中单元格之间的距离
height 定义表格的高度,属性值是数字
width定 义表格的宽度,属性值是数字
colspan 定义合并表格的列数,属性值是数字
rowspan 定义合并表格的行数,属性值是数字
实例1表格的基本结构: 表行  表头   表元(表格的具体内容)的运用
姓名
性别
年龄
王林

25
代码如下:



姓名性别年龄
王林25

实例2表格的基本结构: 表行  表头   表元(表格的具体内容)的运用
日期
9-11
11-13
13-14
旅游地点
青岛
黄山
杭州
代码如下:



日期9-1111-1313-14
旅游地点青岛黄山杭州

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



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

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



居左居中居右
ABC

实例5.跨多行、多列的表元
要创建跨多行、多列的表元,只需在或中加入ROWSPAN或COLSPAN属性,这两个属性的值,表明了表元中要跨越的行或列的个数。
跨多列的表元  
colspan表示跨越的列数,例如colspan=2表示这一格的宽度为两个列的宽度。
跨多行的表元  
rowspan所要表示的意义是指跨越的行数,例如rowspan=2就表示这一格跨越表格两个行的高度。
值班人员
星期一
星期二
星期三
小雨
南瓜
小白
代码如下:




值班人员
星期一星期二星期三
小雨南瓜小白

值班人员
星期一
星期二
星期三
阿毒
泉水
翱翔
代码如下:


  

值班人员星期一星期二星期三
阿毒泉水翱翔

实例6.表格的颜色:
在表格中,既可以对整个表格填入底色,也可以对任何一行、一个表元使用背景色。
表格的背景色彩   
行的背景色彩    
表元的背景色彩   

彩电
冰箱
家电
A
B
代码如下:
彩电冰箱家电
AB