TA的每日心情 | 慵懒
2019-12-30 16:57 |
|---|
签到天数: 29 天 连续签到: 2 天 [LV.4]偶尔看看III
|
楼主 |
发表于 2004-12-15 03:29
|
显示全部楼层
边框和HTML快速入门
[这个贴子最后由折翅的蝴蝶在 2004/12/15 03:33am 第 1 次编辑]
（二）
#Moderation Mode
一.HTML简介:
HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。
所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
通过HTML可以表现出丰富多彩的设计风格.可以实现页面之间的跳转.可以展现多媒体的效果.
二.HTML的基本结构
<*HTML>
<*HEAD>
头 部 信 息
<*/HEAD>
<*BODY>
文 档 主 体， 正 文 部 分
<*/BODY>
<*/HTML>
其中<*HTML>在最外层， 表示这对标记间的内容是HTML文 档。我们还会看到一些Hompage省略<*HTML>标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<*HEAD> 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<*BODY> 标记一般不省略， 表示正文内容的开始。
具体内容,大家看看这个教材,讲解的很详细的：
http://www.shanxiwindow.net/teaching/htmlbook/
三.如何用HTML语言来编辑多彩的图片和多媒体效果:
1.单纯一个图片加文字,如下图所示:
有时候，
我觉得自己象一只小小鸟，
想要飞,
却怎么样也飞不高.
就可以利用HTML语言编辑成一个精美的图片,如下所示:
<html><center>
<table cellpadding=5 cellspacing=5 border=5 WIDTH=500 align=center table background="http://asp5.6to23.com/Rswellco/24.gif"><tr><td><center>
<img src=http://www.lcyz.net/zrw/gif/IEgif/BIRD/Keets.gif>
<font color=red size=4>有时候，
我觉得自己象一只小小鸟，
想要飞,
却怎么样也飞不高.</font>
</td></table></center></html>
上图所示的就是一个简单的HTML语言编辑,命令如下 使用时,把里面的小星号去掉)
<*html>
<*center><*table cellpadding=5 cellspacing=5 border=5 WIDTH=500 align=center table background="http://asp5.6to23.com/Rswellco/24.gif"><*tr><*td><*center>
<*img src=http://www.lcyz.net/zrw/gif/IEgif/BIRD/Keets.gif>
<*font color=red size=4>有时候，
我觉得自己象一只小小鸟，
想要飞,
却怎么样也飞不高.<*/font>
<*/td><*/table><*/center>
<*/html>
上面的命令里,center是居中,border为外框边界的尺寸,align为排列,background为背景,width为宽度.size=5为字号,color为字体颜色,可用英文表示,也可以用颜色代码来表示.
颜色代码表如下:
http://asp5.6to23.com/Rswellco/yansebiao.htm
还可以把最外的边框加上颜色,命令是这样的:
比上面的命令里多了个bordercolor="#CD5C5C",大家看到了么,这个就是边框颜色.
<*html>
<*center><*table border=5 bordercolor="#CD5C5C" WIDTH=500 align=center table background="http://asp5.6to23.com/Rswellco/24.gif"><*tr><*td><*center>
<*img src=http://asp5.6to23.com/Rswellco/sakura-6.gif>
<*font color=red size=4>有时候，
我觉得自己象一只小小鸟，
想要飞,
却怎么样也飞不高.<*/font>
<*/td><*/table><*/center>
<*/html>
如图所示:
<html>
<center><table border=5 bordercolor="#CD5C5C" WIDTH=500 align=center table background="http://asp5.6to23.com/Rswellco/24.gif"><tr><td><center>
<img src=http://asp5.6to23.com/Rswellco/sakura-6.gif>
<font color=red size=4>有时候，
我觉得自己象一只小小鸟，
想要飞,
却怎么样也飞不高.</font>
</td></table></center>
</html>
如果不要边框怎办,把border改为border=0就行了.
如果不要背景怎办,把background=http://背景地址删掉就可.
四.图片与文字的移动.
1,图片文字的从头到尾的移动
命令如下：
<*marquee>
<*img src=http://asp5.6to23.com/Rswellco/kuma07_icon_03.gif>
<*/marquee>
效果如下：
<marquee>
<img src=http://asp5.6to23.com/Rswellco/kuma07_icon_03.gif>
</marquee>
2.从左往右移动.
命令：
<*marquee direction=right>
大家向右转
<*/marquee>
效果如下：
<marquee direction=right>
大家向右转
</marquee>
3。,可以添加速度控制快慢．
命令：
<*marquee scrollamount=20>
你跑得好快
<*/marquee>
速度快慢由自己控制,改改数据就可.
效果如下：
<marquee scrollamount=20>
你跑得好快
</marquee>
4．控制在一段距离内走动
命令：
<*marquee width=150 align=middle>
欢迎大家
<*/marquee>
效果如下：
<marquee width=150 align=middle>
欢迎大家
</marquee>
5.添加轨道
命令：
<*marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>
欢迎来到唐诗宋词
<*/marquee>
效果如下：
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>
欢迎来到唐诗宋词
</marquee>
一.两张图片的移动，从画中出来：
命令：
<*marquee align=# width=150><*img src=http://www.tingxiao.com/non-cgi/usr/12/12_320_1.jpg><*/marquee><*/font><*img src=http://www.tingxiao.com/non-cgi/usr/12/12_320_6.jpg>
效果如下：
<marquee align=# width=150> </marquee></font>
二.多张图片横向移动
<*marquee><*img src="绝对地址">，<*img src="绝对地址">，<*img src="绝对地址">，<*/marquee>
文字和图片上移．
命令：
<*marquee scrollamount=1 direction=up>
文字和图片内容
<*/marquee>
例如命令如下：
<*marquee scrollamount=2 direction=up>
<*img src=http://www.tingxiao.com/non-cgi/usr/12/12_320_1.jpg>
<*font color=#8B008B size=4>
守一盏孤灯
叹一夜心情
寂寞带着轻柔的翅膀
<*/font>
<*/marquee>
效果如下所示：
<marquee scrollamount=2 direction=up>
<img src=http://www.tingxiao.com/non-cgi/usr/12/12_320_1.jpg>
<font color=#8B008B size=4>
守一盏孤灯
叹一夜心情
寂寞带着轻柔的翅膀
</font>
</marquee>
如何把图片做成朦胧效果
命令如下：
<*img src="http://asp5.6to23.com/Rswellco/momijionnanoko1.gif" width=350 height=380 style="filter:Alpha(*opacity=100,style=2);">
举例说明：
命令：
<*html>
<*center><*table border=7 bordercolor="#CD5C5C" WIDTH=500 align=center table background="http://asp5.6to23.com/Rswellco/3113c1.gif"><*tr><*td><*center>
<*img src="http://asp5.6to23.com/Rswellco/momijionnanoko1.gif" width=350 height=380 style="filter:Alpha(*opacity=100,style=2);">
<*font color=red size=4>ＨＩ，
大家好
欢迎光临唐诗宋词<*/font>
<*/td><*/table><*/center>
<*/html>
则效果如下所示：
<html>
<center><table border=7 bordercolor="#CD5C5C" WIDTH=500 align=center table background="http://asp5.6to23.com/Rswellco/3113c1.gif"><tr><td><center>
<img src="http://asp5.6to23.com/Rswellco/momijionnanoko1.gif" width=350 height=380 style="filter:Alpha(opacity=100,style=2);">
<font color=red size=4>HI,
大家好
欢迎大家光临唐诗宋词</font>
</td></table></center>
</html>
命令里的opacity意思为＂不透明性＂。
|
|
IP卡
狗仔卡
></P></HTML>
显身卡
中总是在眼中
XImageTransform.Microsoftpadding:8px;position:absolute;;border:;top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-120);left:expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-280);text-align:right;"><*img border="0"src="http://www.3lian.com/sucai/img1/419/052611.";;width="80" height="50"><*/DIV>