注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

阳光地带

好友相聚在网上,畅谈秋月春风。有缘千里喜相逢,往来多少事,都付笑谈中。

 
 
 

日志

 
 

☆在网页中添加「flash动画」的方法  

2008-04-26 13:04:17|  分类: 电脑知识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

http://lql00399.blog.163.com/ 

(一)图片、flash动画坐标控制、定位的方法

 

加定位FLASH代码如下:

<EMBED style="LEFT: 0px; WIDTH: 750px; POSITION: absolute; TOP: 410px; HEIGHT: 260px" align=left src=flash地址  type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

style="LEFT: 0px; WIDTH: 750px; POSITION: absolute; TOP: 410px; HEIGHT: 260px"这就是定位用的

实例代码如下:

<DIV style="LEFT: -214px; WIDTH: 1000px; POSITION: relative; TOP: 70px">

<TABLE height= cellSpacing=0 cellPadding=0 width= background="图片地址" border=0>

<TBODY>

<TR>

<TD align=middle>

<P align=center></P></TD></TR></TBODY></TABLE>

<TABLE height= cellSpacing=0 cellPadding=0 width= background="图片地址" border=0>

<TBODY>

<TR>

<TD align=middle>

<P align=center></P></TD></TR></TBODY></TABLE>

<EMBED style="LEFT: 0px; WIDTH: 750px; POSITION: absolute; TOP: 410px; HEIGHT: 260px" align=left src=http://www.yyly8.com/yy/12/xt/e003/033.files/3.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED><EMBED src=http://www.yyly8.com/yy/12/xt/e004/043.files/xt001.wma hidden=true type=audio/mpeg autostart="true" loop="true"></EMBED>

在这个图框中加叠一组动画图片.代码如下:

<CENTER>

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=图片地址  border=3>

<TR>

<TD>

<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>

<TR><TD>

<EMBED align=right src=flash地址1  width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=flash地址2  width=480 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=flash地址3  width=450 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=flash地址4  width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=flash地址5   width=500 height=330 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

</TD></TR></TABLE>

</TD></TR></TABLE></CENTER>

  【说明】

  ◇这里插入Flash动画,flash地址1为最下层,依次……,flash地址5为最上层。

  ◇插入Flash的代码如下:

<EMBED align=right src=flash地址  width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

我们还可再加叠图片和文字

<CENTER>

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=图片地址 border=3>

<TR>

<TD>

<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>

<TR><TD>

<EMBED align=right src=flash地址1  width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=flash地址2  width=480 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=flash地址3  width=450 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=flash地址4  width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=flash地址5  width=500 height=330 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<TABLE id=table2 style="LEFT: 350px; ridge; WIDTH: 180px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">

<TR>

<TD>

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=180 width=180 src="图片地址">

</TD></TR></TABLE>

<TABLE id=table2 style="LEFT: 10px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 50px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 30pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>

文字<br>文字<br>文字

</FONT>

</TD></TR></TABLE>

<TABLE id=table2 style="LEFT: 100px; ridge; WIDTH: 400px; ridge; POSITION: absolute; TOP: 300px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 20pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>

坐标控制绝对定位贴图</FONT>

</TD></TR></TABLE>

</TD></TR></TABLE></TD></TR></TABLE>

  【说明】

  ◇用绝对定位加叠图片,竖排文字和横排文字等三个内容。

  ◇加叠羽化图片的代码:

<TABLE id=table2 style="LEFT: 350px; ridge; WIDTH: 180px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">

<TR>

<TD>

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=180 width=180 src="图片地址">

</TD></TR></TABLE>

◇加叠竖排文字的代码:

<TABLE id=table2 style="LEFT: 10px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 50px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 30pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>

文字<br>文字<br>文字

</FONT>

</TD></TR></TABLE>

◇加叠横排文字的代码:

<TABLE id=table2 style="LEFT: 100px; ridge; WIDTH: 400px; ridge; POSITION: absolute; TOP: 300px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 20pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>

坐标控制绝对定位贴图</FONT>

</TD></TR></TABLE>

 坐标控制绝对定位贴图参考实例代码:

<DIV style="LEFT: -10px; WIDTH: 760px; POSITION: relative; TOP: 0px">

<TABLE style="BORDER-LEFT-COLOR: #8c8c00; BORDER-BOTTOM-COLOR: #8c8c00; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #8c8c00; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-RIGHT-COLOR: #8c8c00; BORDER-BOTTOM-STYLE: ridge" height=580 cellSpacing=0 cellPadding=0 width="100%" background=图片地址 border=22>

<TBODY>

<TR>

<TD>

</p></TD></TR></TBODY></TABLE><BR><BR><BR><BR>

<EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 10px; HEIGHT: 300px" align=center src=flash地址1  width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

<EMBED style="LEFT: 250px; WIDTH: 480px; POSITION: absolute; TOP: 200px; HEIGHT: 200px" align=center src=flash地址2  width=180 height=100 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

<EMBED style="LEFT: 50px; WIDTH: 600px; POSITION: absolute; TOP: 260px; HEIGHT: 400px" align=center src=http://youngcolor.com.ne.kr/swf1/24.swf width=650 height=400 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

<EMBED style="LEFT: 200px; WIDTH: 700px; POSITION: absolute; TOP: 200px; HEIGHT: 300px" align=center src=flash地址3  width=700 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <BR><BR>

<TABLE id=table2 style="LEFT: 80px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=yellow); WIDTH: 100%; COLOR: navy; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>文字部分</B></FONT>

</FONT>

</TD></TR></TABLE>

<TABLE id=table2 style="LEFT: 180px; ridge; WIDTH: 520px; ridge; POSITION: absolute; TOP:500px; HEIGHT:60px">

<TR><TD>

<P align=center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=silvergreen); WIDTH: 100%; COLOR:00ff00; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"> 文字部分

</FONT></P></TD></TR></TABLE>

 

(二)音画flash定位代码

 

 坐标控制绝对定位贴图的方法。

(1)绝对定位外部挂贴,要插入的内容往往不是在自已的贴子里。

(2)在背景图片加叠Flash后,要再加文字或图片很困难。

(3)在背景图同一区域中的多个位置上,要插入图文,虽然有靠左居顶等指令,但仍不是很好的办法。近日在整理学习笔记时,觉得有一种代码指令可以解决这些问题,提供大家参考探讨。

设置一个规定范围的表格(图框),代码如下:

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 550px" background=http://bbs.guqu.net/UploadFile/2004-12/20041230144914462.jpg border=0>

<TR>

<TD>

插入图文

</TD></TR></TABLE>

表格化的绝对定位代码:

<TABLE id=table1 style="ridge; LEFT: 10px; WIDTH: 220px; ridge; POSITION: absolute; TOP: 0px; HEIGHT: 120px">

<TR>

<TD>

文字设置代码:

<FONT style="FONT-SIZE: 25pt; FILTER: shadow color=apar); WIDTH: 150%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>

文字内容

</FONT>

或插入图片贴图代码:

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=160 width=140 src="图片地址">

</TD></TR></TABLE>

代码语句说明:

LEFT: 10px; WIDTH: 220px;插入内容与左边的距离和宽度的范围。

TOP: 0px; HEIGHT: 400px插入内容与顶部的距离和高度的范围。

  可以把特效放在任何位置的代码

一般有时候我们只能把东西放在面板里,比如说天气预报等,但是怎么把它们移出去放到面板外面页面内的任意位置呢,方法不是没有的,可以用下面这段定位代码来实现:

<DIV style="RIGHT: 300px; ; TOP: 100px"> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD>某个东西的代码(比如天气预报等)</TD></TR></TBODY></TABLE></DIV>

把特效文字的代码替代“某个东西的代码(比如天气预报等)”这几个字,然后把代码添加到空白面板里就可以了。

这段代码的基本原理是设置一个表格,然后把特效文字代码放进去,再定位表格的位置而已。

定位坐标RIGHT: 300px和TOP: 100px分别表示距离屏幕右边缘和上边缘的的距离,其具体数值可根据实际需求而定。

以此类推,大家可以把其他其他东西的代码放进去替代“某个东西的代码(比如天气预报等)”这几个字,比如说涂鸦板,天气预报,新闻,播放器等等代码,这样就能把他们定位到主页上的任意位置。

举一反三,我们还可以把它和之前我介绍的随屏滚动的代码(具体详见文章两侧的掛件(对联)代码结合起来,使其在拉动页面滚动条的时候能随着屏幕滚动:

<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: +eval(document.body.clientWidth)-980); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; ; ; TOP: +eval(document.body.clientHeight)-200); TEXT-ALIGN: center"> <TABLE cellSpacing=0 cellPadding=0 align=center border=0> <TBODY> <TR> <TD>要定位的东西的代码</TD></TR></TBODY></TABLE></DIV>

关于定位坐标-980和-200的说明:

 1、clientWidth后面负数的绝对值越大越靠近左侧。

2、clientHeight后面负数的绝对值越大越靠近上部。

3、代码中的那个8px好像是坐标参数,保持默认即可,无需改动。

这样比如说你如果把涂鸦板的代码放进去,添加空白面板后,你的涂鸦板就能跟着屏幕滚动了。

同理,你如果把透明FLASH的代码代进去,比如说两只飞舞的蓝色蝴蝶的代码

<EMBED style="LEFT: 0px; ; TOP: -70px" align=right src=http://imgfree.21cn.com/free/flash/9.swf width=950 height=1500 type=application/x-shockwave-flash wmode="transparent" quality="high" ;> 这样就解决了透明FLASH只能在页面某一部分显示,等拉动滚动条后就看不见了的问题,使其能在页面漂浮。

定位代码(万能定位):

<EMBED style="LEFT: 120px; WIDTH: 768px; POSITION: absolute; TOP: 20px; HEIGHT: 140px" align=right src=http://user.hjenglish.com/yangbb/pics/snow.swf type=application/octet-stream QUALITY="high"></EMBED>

<DIV></DIV>

代码解释:

代码如:LEFT: 120px; WIDTH: 768px;  TOP: 600px 分别表示您的FLASH处于的位置,其中LEFT: 120px 表示FLASH离您的新浪标题处最左侧的距离.WIDTH: 768px 表示您设定的FLASH大小,  TOP: 20px  表示您的FLASH距离首页顶部的距离, 以上数值可以随意更改.

其中的FLASH链接地址您可以自己修改成自己喜欢的FLASH地址,当然了,记住,这不是主页背景用到的那些FLASH,而是用在首页标题处的.

代码:(部分可随机调整)

<MARQUEE style="Z-INDEX: 3; LEFT: 20px; POSITION: absolute; TOP: -200px; HEIGHT: 250px" scrollAmount=7 direction=right width=935 height=250><EMBED src=flash地址  type=application/x-shockwave-flash wmode="transparent" quality="high" tybe="application/x-shockwave-flash"></MARQUEE>

 

(三)网页上透明FLASH代码详解及FLASH页面定位

 

〔一〕首先教大家最简单的插入Flash的代码,透明(很多刚开始学FLASH的同学问的最多的问题),无坐标控制:

注意wmode="transparent"是控制Flash是否透明显示的,如果不想让它显示为透明的,直接把wmode="transparent"去掉即可。

<EMBED height=360 pluginspage=http://www.macromedia.com/go/getflashplayer src=img/1.swf type=application/x-shockwave-flash width=500 wmode="transparent" quality="high"></EMBED>

〔二〕再教教大家加入绝对坐标的透明Flash,绝对坐标意味着不管你的窗口拉多大,那个Flash依然乖乖地在原地不动

<EMBED style="LEFT: 250px; WIDTH: 550px; POSITION: absolute; TOP: 200px;

HEIGHT: 1000px" align=right src=flash地址  width=500 height=2000 type=application/octet-stream ;; quality="high" wmode="transparent">

〔三〕最后教教大家如何加入相对坐标的透明Flash,注意下面代码的table部分,这主要是使用表格作为容器,把Flash“装”到表格里,这样不管浏览者把浏览器拉多大,Flash永远和表格一起动。而且,表格可以设置背景图片,表格上面再放一个透明Flash与背景图片相配合,哇塞,效果好得不得了。

<table border="0" cellPadding="0" cellSpacing="0" width=600 height=382 align=center

 background=图片地址>

<TD width=600 height=382><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer

src=flash地址  width="100%" height="100%"

type=application/x-shockwave-flash wmode="transparent"

quality="high"></EMBED></TD></td></table>

flash定位代码

其实对一些已有的各类源代码进行一些改动,以达到自己理想的效果,并不是一件难事儿!今天,现在就为大家改成了一个很实用的“多功能网页滚动式定位代码”用此代码你可以把任何喜欢的东西定位在网页任何你喜欢的位置上。下面介绍一下自改代码的方式;大家也可以对一些不满意的代码进行修改,改成自己需要的满意的代码!!这个例子是;把悬浮挂件的源代码和flash时钟的源代码嫁接在一起,就变成了一个能把flash时钟定位在网页任何位置的“网页时钟定位代码”也可以把‘悬浮挂件’的源代码和‘播放器’的源代码嫁接在一起,变成“网页播放器定位代码”,变变变变变变!想怎么变就怎么变!任何东西都可以定位在网页上~

一.插入FLASH动画的代码的代码如下:

 <IFRAME id=sgnframe border=0 marginWidth=0 frameSpacing=0 marginHeight=0 src="你的flash动画地址" frameBorder=0 width=600 scrolling=no height=400></IFRAME>

  其中width=和height=分别为FLASH的长和宽

 二. 绝对定位代码,使特效或者其他插件在任何情况下都不变形

    其中left:和top:分别为距离左边框和顶边框的距离

<table border="0" cellpadding="0" width="100%" style="position:absolute;z-index:100;border-collapse: collapse;left:0px;top:12px;width:expression(eval(document.body.clientWidth));background-color:transparent;" ><tr><td align="center">FLASH内容</td></tr></table>

让博客横幅绝对的定位

一 代码如下:(绝对定位源代码)

<table border="0" cellpadding="0" width="100%" style="position:absolute;z-index:100;border-collapse: collapse;left:0px;top:12px;width:expression(eval(document.body.clientWidth));background-color:transparent;" ><tr><td align="center">这里覆盖需要定位的内容</td></tr></table>

二代码如下:(绝对定位+框架)

<table border="0" cellpadding="0" width="100%" style="position:absolute;z-index:100;border-collapse: collapse;left:0px;top:12px;width:expression(eval(document.body.clientWidth));background-color:transparent;" ><tr><td align="center"><IFRAME marginWidth=0 marginHeight=0 src="在文字上覆盖地址" frameBorder=0 width=770 scrolling=no height=48></IFRAME>

</td></tr></table>

有时候自己上传的FLSH导航栏,FLASH横幅,播放器等等都需要绝对的居中,不能有一点偏离!把你上传后打开的地址复制,然后粘贴覆盖到代码中的 文字即可,然后复制代码-粘贴到模块中,调整代码中的上下数值,把你想要的效果放在特定的位置!

代码说明:

top:12px 上下位置的数值,数字越大,定位的东西越往下。(自动居中,只调整上下即可)

width=770 框架的长 height=48 框架的宽 可根据实际情况自己调整。

代码随意的定位

代码如下:

<TABLE cellSpacing=0 cellPadding=0 border=0>

<TBODY>

<TR>

<TD>这里覆盖连接代码</TD></TR></TBODY></TABLE></DIV>

你想怎么定位就在以上代码中 “这里覆盖连接代码 ”覆盖添加上连接的代码,比如说,你想定位一张图片,那么只要在代码中 “这里覆盖连接代码” 上覆盖了这个图片连接的代码:<IMG src="文字上覆盖图片地址">就行了。

代码演示:(定位图片)

<DIV> </DIV><DIV style="RIGHT: 300px; POSITION: absolute; TOP: 100px">

<TABLE cellSpacing=0 cellPadding=0 border=0>

<TBODY>

<TR>

<TD><IMG src="文字上覆盖图片地址">

</TD></TR></TBODY></TABLE></DIV>

参数说明:

RIGHT: 300px和TOP: 100px分别表示距离屏幕右边缘和上边缘的的距离,具体数值可根据实际情况自己修改。

注:比如说我想放一个视频,那么你就要把连接视频的代码覆盖在定位代码中的 这里覆盖连接代码 上。

如果需要绝对定位的居中,请使用本站的:

示例代码:

<TABLE height=210 width=532 align=center border=0>

<TBODY>

<TR>

<TD><EMBED style="WIDTH: 478px; HEIGHT: 392px" src=flash地址  width=478 height=392 type=application/x-shockwave-flash></EMBED></TD></TR>

<TR>

<TD vAlign=top width=97 height=106></TD>

<TD vAlign=top width=425 height=106></TD></TR>

<TR>

<TD vAlign=top width=522 colSpan=2 height=13>

<P align=center>&nbsp;</P></TD></TR></TBODY></TABLE>

示例代码

<EMBED style="LEFT: 0px; ; TOP: 10px" align=right src=flash地址  width=600 height=400 type=application/x-shockwave-flash wmode="transparent" quality="high" ;></EMBED>

下落星星代码

<EMBED style="LEFT: 680px; ; TOP: 420px" align=right src=http://media.163888.net/virtualdir1/2006/01/05/18/Flash/22957710937153.swf width=200 height=280 type=application/x-shockwave-flash wmode="transparent" quality="high" ;>

水滴的代码

<CENTER><EMBED style="LEFT: 10px; ; TOP: -70px" align=right src=http://www.mydeskcity.com/Images/drip.swf width=700 height=400 type=application/x-shockwave-flash wmode="transparent" quality="high" ;></CENTER>

博客左右挂件装饰代码设置

 1.挂件在固定位置:

<DIV style="RIGHT: 10px; ; TOP: 100px"><IMG src="图片地址" border=0></A></DIV>

(以上为右挂件代码,更换RIGHT为LEFT,则为左挂件代码)

2.挂件随滚动条移动:

<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: +eval(document.body.clientWidth)-1020); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; ; ; TOP: +eval(document.body.clientHeight)-600); TEXT-ALIGN: center"><IMG src="图片地址" border=0></DIV>

代码说明:

(document.body.clientWidth)-1020);表示图片的左右位置,负数值越大距离左侧越远

(document.body.clientHeight)-600);表示图片的上下位置,负数值越大距离下方越远

 FLASH的叠加代码:

<CENTER><TABLE style="WIDTH: 280px; HEIGHT: 222px" cellSpacing=8 cellPadding=1 width=280 align=center background=图片地址  border=1 table>

<TBODY>

<TR>

<TD><EMBED align=right src=flash地址1  width=280 height=170 type=application/octet-stream wmode="transparent" quality="high" ><EMBED align=right src=flash地址2  width=280 height=170 type=application/octet-stream quality="high" wmode="transparent" ></TD></TR></TBODY></TABLE></CENTER>

html语言基本常识:

<html> </html>标志着html文件的开始与结束

<head> </head>头部标志符

<title> </title>网页的标题

<boby> </boby>构成web的主体

1.background 定义网页的背景图案

2.bgcolor 背景色(默认 白)

3.text 文字颜色(默认 黑)

4.link 超链接颜色(默认 蓝)

5.alink 当前被选中的超链接颜色(默认 红)

6.vlink 已被访问过的超链接颜色(默认 紫)

<font> </font>标志符可以控制字符的样式

1.face 设置文字的字体效果

2.color 设置文字颜色

3.size 设置字体大小

<b></b>   粗体     <strike></strike>删除线

<big></big>大字体   <sub></sub>下标

<i></i>斜体       <sup></sup>上标

<s></s>删除线     <u></u>下划线

<small></small>小字体

<hn></hn>设置文件中的标题 nj 1~6的数字

<p></p>(paragraph)划分段落

<pre></pre>预格式化标志符

<hr> 换行并绘制一条水平线(没有结束标志符)

1.width 水平线长度

2.size 水平线粗细

3.noshade 无阴影

4.align 水平线的对齐方式(left   center   right)

5.color 水平线颜色

<br> 强制换行(没有结束标志符)

<ol>

<li>......</li>

<li>......</li>

.......

</ol> 设置有序列表   li可是1.2.3....或a.b.c....或A.B.C...或i.ii.iii.....或I.II.III....

(两个属性:type start)

<ul>

<li>......</li>

<li>......</li>

......

</ul> 无序列表 (一个属性:type disc实心圆 circle空心圆 square方框)

<a></a>实现超链接

1.href 定义超链接所指向的文档的URL

2.target 目标窗口

3.name 锚名称 (该属性一般在创建页面内超链接时使用)

<a href="/URL"> </a>使用a标志符创建超链接时,可以使用相对路径(同一网站内的文件),也可以使用绝对路径(指向本站点以外的文件)

<a > </a>

.....

<a href="#锚点名称"> </a> 创建网面内超链接逻辑上分为两步,首先定义锚点,然后再创建指向锚点的超链接

<a href="mailto:电子邮箱地址"> </a>指向电子邮箱的超链接>

<img> 插入图像

1.src 设置被引用的图像文件所在的位置

2.alt 设置图像的简单文字说明

3.width,height 设置图像的宽度与高度

4.align 对齐方式(left,right,top,bottom,middle)

5.border 边框宽度

6.hspace ,vspace 定义了图像与周围元素的水平和垂直间距

<map >

<area>

<area>

......

</map>

<img src="/"usemap="#图像映射名称"> <map></map>定义了图像映射的区域

                img通过usemap可以确定与所建立的图像映射区域的关系

                area定义图像不同区域与不同文档之间建立链接

                1.shape 形状(rect矩形 circle圆 poly多边形)

                2.coords 坐标

                3.target 目标窗口

                4.alt 替换文字

<table>

<caption> </caption>

<tr>

<th> </th><th> </th>......

</tr>

<tr>

<td> </td><td> </td>......

</tr>

<tr>

<td> </td><td> </td>

</tr>

......

</table>   table标记符定义表格 caption定义表格标题 tr标记符定义表格的行   th,td标志符定义表格的单元格 th定义表头单元格

table可以创建一个新的表格

1.width(宽),height(高)

2.border(边框)

3.bgcolor(背景颜色)

4.align(对齐方式left right center)

5.cellpadding(填充距)

6.cellspacing(单元格间距)

7.rules(分隔线   none无分隔线 groups在行列之间有   rows只有行分隔线   cols只有列 all所有)

8.frame(边框 void无边框 above只显示顶部边框 below只显示底部边框 hsides只显示顶,底部边框   vsides只显示左右边框 lhs显示左边框 rhs显示右 box显示所有)

<tr> </tr>表行

1.align 对齐方式(left center right)

2.valign 垂直对齐方式 (top middle bottom baseline)

3.bgcolor 背景颜色

<td></td>表格数据

1.width,height

2.align(left right center)

3.valign(top middle bottom)

4.bgcolor

5.rowspan 单元表的行数

6.colspan 单元表的列数

<frameset>

<frame>

<frame>

......

<frame>

</frameset>   frameset是将窗口分割成若干个子窗口,子窗口数取决于frame的个数

<frame> 标记符来标识子窗口(无结果符)

1.name

2.src(源) 设置框架内容的URL

3.frameborder(框架边框)

4.marginwidth (框架的左右边距)

5.marginheight(框架的上下边距)

6.scrolling(是否显示滚动条 auto自动 yes显示   no不显示)

7.noresize(不允许调整框架的尺寸)

<a herf="目标文件"target="目标框架名">超链接内容</a>

1._top 表示将超链接的目标文件装入整个浏览器窗口

2._self 表示将超链接的目标文件装入当前框架,以取代该框架中正在显示的文件

3._blank 表示将超链接的目标文件装入一个新的浏览窗口

4._parent 表示将超链接的目标文件装入当前框架的父框架

<iframe></iframe>定义了一个页面内的框架

1.src(源) 设置框架内容的URL

2.name

3.width,height

4.align (top middle bottom)

5.frameborder(框架边框)

6.marginwidth(框架左右边框),marginheight(框架上下边框)

7.scrolling(是否显示滚动条 auto yes no)

<form></form>表单

1.method(方法) 定义表单的提交方式

2.action(动作) 指定表单所对应的处理程序

<input> 定义了一个用于用户输入的表单元素(无结束标记符)

1.name 标识表单元素

2.type 指定表单元素的类型(text文本 password密码 checkbox复选框 radio单选框 submit提交按钮 reset重置按钮)

<input type="text">将type指定为text,在浏览器中显示一个文本输入框,供用户输入信息

1.value (初始值)

2.size (尺寸)

3.maxlength(输入文本的最大字符数)

<input type="password">密码文本框

例:<form>

密码:<input type="password"size="10"maxlength="15">

</form>

<input type="checkbox">复选框

例:<from>

<p>你的爱好:</P>

<input type="checkbox"value="music"checked>音乐

<input type="checkbox"value="sports">体育

<input type="checkbox"value="other">其它

</form>

<input type="radio">单选框

例:<form>

<p>公司的人数:</p>

<p><input type="radio">少于10人</p>

<p><input type="radio"checked>10人至100人</p>

<p><input type="radio">100人以上</p>

</form>

<input type="submit">提交按钮

<form>

<input type="submit"value="提交">

</form>

<input type="reset">重置按钮

<input type="image">图像提交按钮

<input type="file">

<input type="buttom">

<input type="hidden">

<textarea> </textarea>定义一个用于用户多行输入的表单元素

1.name 指定文本域的名称

2.rows 指定文本域的高度

3.cols 指定文本域的宽度

<select>

<option></option>

<option></option>

......

<option></option>

</select> 定义了一个选项列表表单元素

1.name 指定选取项列表的名称

2.size 指定列表选项显示时一次显示选项的数目

3.multiple使用该属性可以允许多重选择

4.value 指定当该选项被选中并提交后,浏览器传给服务器的数据

5.selected 指定哪一个选项在默认状态下是选中状态

<label></label>选中该控件

<marquee></marquee>创建一些滚动字幕

1.direction(方向 left right up down)

2.behavior (行为   scroll绕圈滚动 slide只滚一次 alternate来回滚动)

3.loop (循环)

4.scrollamount(滚动的速度)

5.scrolldelay(滚动延时)

6.align(对齐方式 top middle bottom)

7.bgcolor

8.height,width

9.hspace,vspace(垂直和水平间距)

<applet>

<param>

<param>

......

</applet> applet用来在网页中插入一个Java小应用程序对象

1.code(源代码) 指定Java小应用程序的源代码文件(.class文件)

2.name

3.width,height

4.align

param用来定义Java小应用程序中的参数

1.name

2.value(值)给变量赋值

3.valuetype(值类型 data表示value指定的值将作为一个字符串传递的对象

        ref表示value指定的值是一个URL

        object表示value指定的值是一个指向同一文档中一个object的标志符)

4.type(类型)当valuetype属性的值设置为ref时,此属性指定了URL所代表资源的内容类型

<object>

<param>

<param>

......

</object> object可以定义很多种不同的多媒体文件

1.classid:该属性指定了浏览器中用来播放相应多媒体对象的控件ID

2.codebase:定义多媒体文件相对位置的根目录

3.codetype:指定当下载由classid所指定的对象时使用的数据内容的类型

4.data:定义多媒体文件的位置

5.type:定义多媒体文件的类型

6.width,height

selector{property1:value1;property2:value2......}selector表示需要应用式样的对象

                    property表示由css标准定义的样式属性

                    value表示样式赂性的值

例:h2{text-align:center;font-family:楷体_gb2312}

selector.classname{property1:value1;......} 标记符类

.classname{property:value;......} 通用类

#IDname{property:value;......}用户定义ID

虚类

a:link或:link 当超链接末被访问过时,超链接的显示方式

a:visited或:visited 当超链接已经被访问过时,超链接的显示方式

a:active或:active当超链接当前为选中姿态时,超链接的显示方式

a:hover或:hover 当鼠标指针悬停在超链接上时,超链接的显示方式

例:   a:link{color:blue}

长度单位

1.em:它所代表的长度是当前字体中m字母的宽度

2.ex:它所代表的长度是当前字体中x字母的高度

3.px:像素,它是相对于计算机屏幕的分辨率来定义的

in:英寸,1in=2.54cm 1cm=10mm

pt:点,1点=1/72in   pc:帕 1帕=12点

font-family(字体族)

font-family:字体名称 | 字体族名称

例:   p{font-family:黑体,宋体,serif}

font-style(字体风格)

font-style:字体风格名称

例:   p{font-style:oblique}

font-size(字体大小)

font-size:绝对大小 | 相对大小 | 百分比

font-variant(字体变形)

font-varient:字体变形值

1.normal(普通)

2.small-caps(小型大写字母)

font-weight(字体加粗)

font-weight:字体加粗值

1.normal(普通)

2.bold(加粗)

3.bolder(更粗)

4.lighter(更细)

letter-spacing(字符间距)

letter-spacing:数值

text-decoration(文字修饰)

text-decoration:文字修饰效果

1.none 无

2.underline 下划线

3.overline 上划线

4.line-through 删除线

5.bink 闪烁

text-transform(文本转换)

text-transform:文本转换方式

1.none 无

2.capitalize 使所有单词的第一个字母大写

3.uppercase 使所有单词字母都大写

4.lowercase 使所有单词字母都小写

text-align(文本对齐方式)

text-align:对齐方式

1.left

2.right

3.justify 可调整

text-indent(文本缩放)

text-indent:缩放的数值

line-height(行高)

line-height:数值

margin(页边距)

margin:数值

padding(填充距)

padding:数值

例: table{padding:2cm 3cm 5cm}上填充距2cm,左右填充距为3cm,下填充距5cm

border-style(边框样式)

border-style:边框样式

1.none

2.dotted 点线

3.dashed 虚线

4.solid 实线

5.double

6.groove 凹线

7.ridge 凸线

8.inset 内陷

9.outset 外凸

border-color(边框颜色)

border-color: 颜色值

border-width(边框宽度)

border-width:数值

1.thin 细

2.medium 中

3.thick 宽

border(边框)

border:边框样式|边框宽度|边框颜色

例: h1{border:5px solid red}

float(浮动)

float:参数

1.none

2.left

3.right

 

                                                阳光收集整理

 

 

  评论这张
 
阅读(562)| 评论(6)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018