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

.

一种琴音抚人生,一段相逢醉天涯。

 
 
 

日志

 
 

音画贴编辑小平台  

2010-08-29 18:04:01|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
欢迎您!启步学代码。
(游子学习笔记。 供初学HTML代码的朋友参考)

音画贴编辑小平台

  为了方便编辑音画贴,将常用的一些HTML标签代码资料和素材集中在此备用,这是最简单的代码编辑小平台.做音画贴要记住很多用英文写成的代码.像我一样不懂英文,根本就是没办法,只好采用复制修改套用代码的笨方法, 同时省去手动打字之劳.启步学代码,这个小平台,可以即学即用,立马见效.做法是:复制要用的标签或模式的代码,粘贴到下面HTML编辑浏览器,修改文字或图片地址等对象内容即可.

击点打开:HTML编辑浏览器

击点打开:HTML在线编辑器



常用字体代码:

   宋体 黑体 幼圆   隶书 新宋体 华文新魏 华文行楷  华文细黑 华文彩云
  方正姚体  楷体_GB2312  仿宋_GB2312 

   


◆常用颜色代码◆ 

红色
#FF0000
黄色
#FFFF00
暗青色
#008B8B
碧绿色
#7FFFD4
白色
#FFFFFF
蓝色
#0000FF
紫罗兰
#8A2BE2
褐色
#A52A2A
黑色
#000000
黄绿色
#7FFF00
巧可力
#D2691E
珊瑚色
#FF7F50
菊兰色
#6495ED
暗深红
#DC143C
青色
#00FFFF
暗金黄
#B8860B
暗灰色
#A9A9A9
暗绿色
#006400
桃色
#FFDAB9
暗红色
#8B008B
红紫色
#FF00FF
暗灰蓝
#483D8B
墨绿色
#2F4F4F
亮肉色
#FFA07A
米绸色
#FFF8DC
粟色
#800000
橙色
#FFA500
热粉红
#FF69B4
金色
#FFD700
茶色
#D2B48C


击点:更多的颜色代码.



编辑音画贴各种素材


◇黑马图片素材资源 ◇七色图片素材资源 ◇玫瑰图片素材资源  ◇中华图片素材资源

◇智慧漂亮相框素材 ◇忆石漂亮相框素材 ◇中国专业素材图库  ◇中华三合一边框素材






◆常用HTML标签代码◆

   ◆1.文字设置代码:
<font face=黑体 size=4 color=red>文字设置代码</font>

  ◆2.大号文字设置代码:
<font face=黑体 style=font:50pt color=red>文字设置代码</font>

  ◆3.文字的边外加光辉效果代码:
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"> <FONT style="FONT-SIZE: 60pt;FONT-FAMILY:隶书; COLOR: #ffff00"> 如画江山</FONT></div>

  ◆4.文字重叠效果代码:
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#000000,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%"> <FONT style="FONT-FAMILY:隶书">社会主义好!</FONT> </div>

  ◆5.文字竖排代码:
<p align=RIGHT> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪,<br> 三军过后尽开颜。<br> .....<br> </FONT></P>

  ◆6.一条横线代码:
<CENTER> <HR SIZE=2 color=#ffff00 ALIGN=CENTER WIDTH="500"> </CENTER>

  ◆7.贴图代码1:
<img src="图片地址">

  ◆8.贴图代码2:
<INPUT src="图片地址" type=image width=500>

  ◆9.羽化图片代码:
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="图片地址" type=image width=400>

  ◆10.超连接代码:
<A href="连接网页地址" target=_blank>说明文字</A>

  ◆11.从左向右移动的代码:
<MARQUEE scrollAmount=3 direction=right> 文字或图片从左向右移动 </marquee>

  ◆12.从右向左移动的代码:
<marquee scrollamount=2 direction=left> 文字或图片从右向左移动 </marquee>

  ◆13.从下向上移动的代码:
<marquee scrollamount=1 direction=up > 文字或图片从下向上移动 </marquee>

  ◆14.从上向下移动的代码:
<marquee scrollamount=5 direction=down >文字或图片从下向上移动 </marquee>

  ◆15.左右来回走移动的代码:
<marquee scrollamount=8 behavior=alternate > 文字或图片左右来回走移动 </marquee>

  ◆16.相对定位代码:
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 200px; ridge:">
</DIV>

  ◆17.绝对定位代码:
<DIV style="LEFT: 300px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 220px" >
</DIV>

  ◆18.相对定位与绝对定位加叠图片代码:
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 200px; ridge:">
<DIV style="LEFT: 300px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 220px" >
<INPUT type=image width=160 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" >
</INPUT> </DIV> </DIV>

  ◆19.各种常用标签语句:

<BR> 过行单标签.  <p></p> 过段标签. <pre>文字依原始样式显示标签</pre> 

&nbsp;一个空格.  <li>文字行首加一个圆点.</li>圆点标签.

  ◆20.定位标签代码:

<CENTER>内容居中</CENTER>
<DIV align=center> 内容居中</DIV>
<p align=CENTE>内容居中</P>
<p align=LEFT>内容居左</P>
<p align=RIGHT>内容居右</P>

  水平加竖直定位指令语句(放在表格的列标签内):
<td align=LEFT valign=top>居左靠顶</td>
<td align=center valign=top>居中靠顶</td>
<td align=right valign=top>居右靠顶</td>
<td align=LEFT valign=bottom>居左靠底</td>
<td align=center valign=bottom>居中靠底</td>
<td align=right valign=bottom>居右靠底</td>


  ◆21.银色播放器代码:
<EMBED src="音乐文件地址" width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">






编辑音画贴的各种代码:

1-颜色背景图框
 
<br> <DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px"> <TABLE borderColor=660000 cellSpacing=15 cellpadding=20 bgColor=#FFEEDD width=800 height=300 border=20> <TR><TD> <CENTER> <FONT style="FONT-SIZE: 40pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书> 这里贴标题文字</FONT> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" type=image width=400> <br> <font face=黑体 size=5 color=0000ff>下面插入各种内容. </font><br> </CENTER></TD></TR></TABLE> </DIV><br><br><br>
</textarea>

2-图片背景的图框
 
<TABLE id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px" borderColor=660000 height=200 width=780 background=http://7wind.net/wysc/beijing/image/b089.gif border=22> <TR> <TD> <CENTER> <FONT style="FONT-SIZE: 40pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书> 这里贴标题文字</FONT> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" type=image width=400> <br> <font face=黑体 size=5 color=0000ff>下面插入各种内容. </font><br> <BR> </TD></TR></TABLE>
</textarea>
3-红色背景淡化的图框
 
<br><br> <DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 10px"> <table border="15" width="900" cellspacing="5" cellpadding="5" bgcolor="#FFFF00" bordercolor="#800000" id="table1" height="330"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ff0000', endColorStr='#ffffff', gradientType='1')">   </td></tr></table> </DIV><br><br><br>
</textarea>

4-三合一图框
 
<TABLE cellSpacing=0 cellPadding=0 width="850" height=192 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875591710577.jpg border=0> <TBODY><TR><TD></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=60 width="850" height=60 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875592977128.jpg border=0> <TBODY><TR><TD> <center><font face=华文行楷 size=6 color=ffff00>在这张图框插入所有内容.</font></center> .</TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width="850" height=189 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875594164088.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>
</textarea>

103
5-10层图框代码
 
<BR><BR> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width=920 borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/200481313595718.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131404918.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=11 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813141196.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131407387.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131407387.jpg border=1> <TBODY><TR><TD> 。。。。。。<BR> <P align=center><font style=font:30pt face=华文行楷 color=ffff00> 在此开始插入内容 </FONT></p> 。。。。。。<BR> <BR><BR> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>
</textarea>

6--带滚动条文本框代码
 
<table align=center border=3 cellspacing=1 cellpadding=2 borderColor=#000666 width=500> <tr> <td bgcolor=#FAF4FF> <div style="overflow:auto;height:120;"> <br><P align=center><FONT face=仿宋_GB2312 color=#000666 size=4><B> <FONT size=5>如 梦 令 李清照</FONT></p>   昨夜雨疏风骤。浓睡不消残酒。试问卷帘人,—却道“海棠依旧”。知否?知否?应是绿肥红瘦!<br> <br><br>   一篇小令,才共六句,好似一幅图画,并且还有对话,并且还交代了事情的来龙去脉,—这可能是现代的电影艺术才能胜任的一种“镜头”表现法,然而它却实实在在是九百前的一位女词人自编自演的作品,不谓之奇迹,又将谓之何哉?<br>              (周汝昌)<br><br> </div></td></tr></table>
</textarea>


104
7-图片加Flash和文字
 
<TABLE cellSpacing=1 cellPadding=0 width=500 height=330 bordercolor=#BB5E00 background=http://photo.southcn.com/upload/F202922004.11.4.22.22.330.jpg border=3> <TR> <TD> <br> <CENTER> <font style=font:25pt face=隶书 color=#00ffff>新疆哈塔斯</font></CENTER> <EMBED align=right src=http://imgfree.21cn.com/free/flash/4.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;> </TD></TR></TABLE>
</textarea>

8-网页上绝对定位贴Flash
 
<EMBED style="LEFT: 750; WIDTH: 200px; POSITION: absolute; TOP: 25; HEIGHT: 200px" align=center src=http://imgfree.21cn.com/free/flash/72.swf type=application/octet-stream wmode="transparent" quality="high" ;;>
</textarea>

105
9-单元格定位内容居中
 
<TABLE borderColor=660000 cellSpacing=3 cellpadding=20 bgColor=00ff00 width=900 height=500 border=20> <TR> <td align="center"> <font face=黑体 size=4 color=red> 单元格内所有内容居中<br> <img src="http://img004.photo.wangyou.com/2004/10/25/25981/200411022452360.gif"> <br> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://img04.21cn.com/2007/04/06/1135249337.jpg" type=image width=500> <br> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://sucai.heima.com/sucai/news/xhtp/23.jpg" type=image width=400> <br> </font> </TD></TR></TABLE>
</textarea>

10-图片加立体边框代码
 
<center> <img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" width=450 style="border:22px #fbd44c ridge" )> </CENTER>
</textarea>

106
11-立体阴影框代码
 
<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"> <tr><td bgcolor="#ffffff" align=center valign=middle> <img src="http://photo4.hexun.com/p/2006/1227/65682/b_FB62298B118B3138C93268EEC6F09B98.jpg"> </td></tr></table></center>
</textarea>

12-图片左右颠倒实例代码
 
<INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg"type=image width=250 style="filter:fliph"> <INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg"type=image width=250 style="fliph:filter">
</textarea>

107
13-粒状阴影边框代码
 
<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" width=400 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#8600FF,strength=30)"></CENTER>
</textarea>

14-HTML代码编辑浏览框
 
插入内容 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0059)http://bbs.gw.com.cn/UploadFile/2006-9/2006985105830872.txt --> <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.2900.3020" name=GENERATOR></HEAD> <SCRIPT> function runEx(){ var winEx2 = window.open("", "winEx2", "width=500,height=300,status=yes,menubar=yes,scrollbars=yes,resizable=yes"); winEx2.document.open("text/html", "replace"); winEx2.document.write(unescape(event.srcElement.parentElement.children[0].value)); winEx2.document.close(); } function saveFile() { var win=window.open('','','top=10000,left=10000'); win.document.write(document.all.asdf.innerText) win.document.execCommand('SaveAs','','a.html') win.close(); } --> </SCRIPT> <table border="1" width="380" cellpadding="0" bgcolor="#64A600"> <tr> <td>  <META content="MSHTML 5.00.3315.2870" name=GENERATOR> <DIV align=center><TEXTAREA id=asdf style="BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 380; COLOR: 0000ff; BORDER-BOTTOM: #999999 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #FBFBFF" name=textfield rows=8 wrap=VIRTUAL>
</textarea>

108
15-文字边外加光辉效果代码
 
<CENTER> <div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"> <FONT style="FONT-SIZE: 70pt;FONT-FAMILY:隶书; COLOR: #ffff00"> 如画江山</FONT></div> </CENTER>
</textarea>

16-文字阴影果代码2
 
<CENTER> <DIV style="FONT-SIZE: 100pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 150%"> <FONT style="FONT-FAMILY: 华文行楷"> 网络世界 </DIV></CENTER>
</textarea>

108
17-文字阴影效果代码4
 
<CENTER> <FONT style="FONT-SIZE:80pt; FILTER: shadow(color=black, strength=15); WIDTH: 100%";FONT face=华文彩云 color=00ff00><B> 春风秋雨</B></FONT></CENTER>
</textarea>

18-文字阴影果代码
 
<CENTER> <div style="FONT-SIZE:70pt;filter:shadow(color=black,direction=180);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%"> <FONT style="FONT-FAMILY:隶书">社会主义好!</FONT> </div></CENTER>
</textarea>

108
19-靠右插入竖排文字
 
<DIV ALIGN=RIGHT> <table border="1" width="150" cellspacing="1" height="250" id="table2"> <tr> <td>  <DIV style="WRITING-MODE: tb-rl;LINE-HEIGHT: 5.em; LETTER-SPACING: 0.2em;"> <font face=仿宋_GB2312 style=font:16pt color=#0000FF><b>  <br> 《题临安驿》<br> -林 升<br> 山外青山楼外楼,<br> 西湖歌舞几时休。<br> 暖风熏得游人醉,<br> 直把杭州作卞州。<br>  <br> </font></div> </td></tr></table> </DIV>
</textarea>

20-绝对定位挂贴竖排文字1
 
<table id=table1 style="LEFT: 200px; WIDTH: 520px; POSITION: relative; TOP: 0px" border="3" cellspacing="1" height="350"bordercolor="#ff0000"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00ff00', endColorStr='#ffffff', gradientType='1')"> <font style="LEFT: 480px; WIDTH: 30px; POSITION: absolute; TOP: 10px" style=font:12pt face=宋体 color=0000ff><b> 毛主席诗词欣赏</b></FONT></DIV> <font style="LEFT: 430px; WIDTH: 30px; POSITION: absolute; TOP: 25px" style=font:22pt face=隶书 color=ff0000> ︻<br>采桑子<br>︼重阳</FONT></DIV> <DIV style="LEFT: 400px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </DIV> <font style="LEFT: 350px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 人生易老天难老<br>,岁岁重阳<br>。</b></FONT></DIV> <DIV style="LEFT: 330px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 280px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 今又重阳<br>,战地黄花分外香<br>。</b></FONT></DIV> <DIV style="LEFT: 260px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 210px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 一年一度秋风劲<br>,不似春光<br>。</b></FONT></DIV> <DIV style="LEFT: 190px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 140px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 胜似春光<br>,寥廓江天万里霜<br>。</b></FONT></DIV> <DIV style="LEFT: 120px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 20px; WIDTH: 30px; POSITION: absolute; TOP: 180px" style=font:12pt face=宋体 color=0000ff><b> 游子学编竖排文字</b></FONT></DIV> </td></tr></table>
</textarea>

108
21-绝对定位挂贴竖排文字2
 
<table id=table1 style="LEFT: 100px; WIDTH: 620px; POSITION: relative; TOP: 0px" height="350"> <td>  <td>  <table border="25" width=600" cellspacing="3" cellpadding="0" bgcolor="#FF3399" height="350" bordercolor="#000666"> <tr> <td> <DIV id=table1 style="LEFT: 0px; WIDTH: 600px; POSITION: relative; TOP: 0px"> <font style=font:22pt face=隶书 color=#FFFF37> <DIV style="LEFT: 550px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 毛主席诗词欣赏</DIV> <DIV style="LEFT: 500px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > ︻<br>采桑子<br>︼重阳</DIV> <DIV style="LEFT: 450px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 人生易老天难老<br>,</DIV> <DIV style="LEFT: 400px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 岁岁重阳<br>。</DIV> <DIV style="LEFT: 350px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 今又重阳<br>,</DIV> <DIV style="LEFT: 300px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 战地黄花分外香<br>。</DIV> <DIV style="LEFT: 250px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 一年一度秋风劲<br>,</DIV> <DIV style="LEFT: 200px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 不似春光<br>。</DIV> <DIV style="LEFT: 150px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 胜似春光<br>,</DIV> <DIV style="LEFT: 100px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 寥廓江天万里霜<br>。</DIV> </font> <DIV style="LEFT: 30px; WIDTH: 30px; POSITION: absolute; TOP: -50px" > <font style=font:15pt color=#FFFF37><b> 游子学编竖排文字</b></font></DIV> </DIV> </td></tr></table> </td></tr></table>
</textarea>

22-绝对定位挂贴竖排文字代码模块
<table id=table1 style="LEFT: 100px; WIDTH: 720px; POSITION: relative; TOP: 0px" border="3" cellspacing="1" height="350"bordercolor="#ff0000"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00ff00', endColorStr='#ffffff', gradientType='1')"> <font style="LEFT: 680px; WIDTH: 30px; POSITION: absolute; TOP: 10px" style=font:12pt face=宋体 color=0000ff><b> 毛主席诗词欣赏</b></FONT></DIV> <font style="LEFT: 630px; WIDTH: 30px; POSITION: absolute; TOP: 25px" style=font:22pt face=隶书 color=ff0000> ︻<br>采桑子<br>︼重阳</FONT></DIV> <DIV style="LEFT: 600px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </DIV> <font style="LEFT: 550px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 人生易老天难老<br>,岁岁重阳<br>。</b></FONT></DIV> <DIV style="LEFT: 530px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 480px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 今又重阳<br>,战地黄花分外香<br>。</b></FONT></DIV> <DIV style="LEFT: 460px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 410px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 一年一度秋风劲<br>,不似春光<br>。</b></FONT></DIV> <DIV style="LEFT: 390px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 340px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 胜似春光<br>,寥廓江天万里霜<br>。</b></FONT></DIV> <DIV style="LEFT: 320px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 270px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> <br>,<br>。</b></FONT></DIV> <DIV style="LEFT: 250px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 200px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> <br>,<br>。</b></FONT></DIV> <DIV style="LEFT: 180px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 130px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> <br>,<br>。</b></FONT></DIV> <DIV style="LEFT: 110px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 20px; WIDTH: 30px; POSITION: absolute; TOP: 180px" style=font:12pt face=宋体 color=0000ff><b> 游子学编竖排文字</b></FONT></DIV> </td></tr></table>
</textarea>

108
23-文字从下向上移动的代码
<center>  <MARQUEE scrollAmount=1 direction=up width=350 height=150> <font face=华文行楷 size=5 color=000666><b>    《梅花落》<BR> 隆冬十二月,寒风西北吹。<BR> 独有梅花落,飘荡不依枝。<BR> 留恋逐霜彩,漫步下冰斯。<BR> 何当与春日,共映芙蓉词。 </b></FONT></MARQUEE> </center>
</textarea>

24-整张页面来回移动的代码
 
<MARQUEE scrollAmount=3 behavior=alternate width="100%"> <table border="15" width="560" cellspacing="5" cellpadding="5" bgcolor="#FFFF00" bordercolor="#800000" id="table1" height="300"> <tbody> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#00ff00', gradientType='1')">   <DIV align=center valign=top> <MARQUEE behavior=alternate><B><FONT face=宋体 color=#9932CC size=5> <MARQUEE direction=up behavior=alternate width=30 height=40>网<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=80 height=70>络<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=50 height=40>世<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=50>界<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=65>欢<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=80>迎<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=50 height=70>大<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=60>家<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=30 height=50>光<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=60>临<BR></MARQUEE> </FONT></B></MARQUEE> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg" type=image width=160> </DIV> </td></tr></tbody></table></MARQUEE>
</textarea>

25-图片文字走四方的代码
 
<TABLE borderColor=fff000 height=350 cellSpacing=3 cellPadding=10 bgColor=#0000ff width=450 border=3> <TBODY> <TR> <TD> <MARQUEE scrollAmount=4 direction=down behavior=alternate height=350> <MARQUEE scrollAmount=4 behavior=alternate width=450> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFace/519242_200621410461352612.gif" type=image width=150><br><FONT color=fff000 size=4><B>走四方</B></FONT> </MARQUEE></MARQUEE> </TD></TR></TBODY></TABLE>
</textarea>

26-斜着移动合并的代码
 
<table border="1" width="800" height="400" bgcolor="#6495ED"> <tr> <td width="400" height="400"> <marquee scrollamount="5" direction="up" width="400" height="400"> <marquee scrollamount="5"direction="right" width="100%"height="30" > <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/200861116215857132.jpg" type=image width=150 height="150"> </marquee></marquee> </td> <td width="400" height="400"> <marquee scrollamount="5" direction="up" width="400" height="400"> <marquee scrollamount="5"direction="left" width="100%"height="30" > <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/200861116215857132.jpg" type=image width=150 height="150"> </marquee></marquee> </td></tr></table>
</textarea>

27-绝对定位挂贴Flash
 
<DIV id=table1 style="LEFT: 20px; WIDTH: 800px; POSITION: relative; TOP: 40px"> <TABLE borderColor=#127626 height=500 cellSpacing=0 cellPadding=0 width=700 background="http://hiphotos.baidu.com/dudu奶奶知道/pic/item/2baafd23e2c8055d9822ed3a.jpg" border=3> <TR> <TD> <EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: -60px; HEIGHT: 500px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=750 height=500 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 340px; HEIGHT: 200px" align=center src=http://www.easelq.cn/wode/flash/dongwu/lumi.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> </TD></TR></TABLE></DIV>
</textarea>

28-绝对定位相片加叠相框
 
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 500px; ridge:"> <INPUT style="LEFT: 130px; WIDTH: 220px; POSITION: absolute; TOP: 110px; HEIGHT: 320px" type=image width=220 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" ><br></INPUT> <br> <INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 550px" type=image height=1 width=500 src="http://bbs.gw.com.cn/UploadFile/2008-2/200821614421933537.gif"></INPUT> <br> </DIV>
</textarea>

29-羽化图片绝对定位加叠文字、图片和Flash
 
<TABLE style="LEFT: -50px; WIDTH: 900px; POSITION: relative; TOP: 0px"> <TBODY> <TR> <TD style="FILTER: Alpha(opacity=100,style=3)" width=900 background=http://hiphotos.baidu.com/淡然的人生路途/pic/item/6b31ef2a35400b2a5343c1f5.jpg height=700> <DIV style="LEFT:300px; WIDTH: 750px; POSITION: absolute; TOP: 280px; HEIGHT: 300px"> <DIV style="FILTER: shadow(color=#000066, strength=10); WIDTH: 600px"> <font face=隶书 style=font:40pt;color=#00ff00><b> 草原牧埸 </b></font></DIV></DIV> <EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 100px; HEIGHT: 300px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <EMBED style="LEFT: 10px; WIDTH: 600px; POSITION: absolute; TOP: 360px; HEIGHT: 300px" align=center src=http://www.easelq.cn/wode/flash/dongwu/lumi.swf width=600 height=250 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> </TD></TR></TBODY></TABLE>
</textarea>

30-绝对定位加叠文字、图片和Flash
 
<TABLE id=table1 style="LEFT: -10px; WIDTH: 940px; POSITION: relative; TOP: 10px" cellSpacing=10 align=center background=http://bbs.muwen.com/fileuploaddir/4B398368667.jpg WIDTH: 940px height=480 border=0> <TBODY> <TR> <TD align=center valign=top><BR><FONT style="FONT-SIZE: 35pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><B>【秋水伊人】</B></FONT> </DIV> <DIV id=Layer2 style="Z-INDEX: 2; LEFT: 173px; WIDTH: 20px; POSITION: absolute; TOP: 40px; HEIGHT: 20px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 25pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=00ff00>望穿秋水 不见伊人</FONT></DIV><BR> <DIV id=Layer2 style="Z-INDEX: 2; LEFT: 700px; WIDTH: 20px; POSITION: absolute; TOP: 40px; HEIGHT: 20px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 25pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=00ff00>梦魂无所寄空有泪</FONT></DIV> <DIV id=Layer2 style="Z-INDEX: 2; LEFT: 100px; WIDTH: 850px; POSITION: absolute; TOP: -10px; HEIGHT: 60px"> <EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf width=850 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;> </DIV> <DIV id=Layer2 style="Z-INDEX: 2; LEFT: 60px; WIDTH: 780px; POSITION: absolute; TOP: 60px; HEIGHT: 50px"> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg" type=image width=180> </DIV> <DIV id=Layer2 style="Z-INDEX: 2; LEFT: 60px; WIDTH: 780px; POSITION: absolute; TOP: 330px; HEIGHT: 50px"> <MARQUEE scrollAmount=3><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=00ffff>秋水伊人   望穿秋水不见伊人的倩影 羹残楼静孤燕两三声 往日的温情只换得眼前的凄情  梦魂无所寄空有泪满襟 几时归来呦伊人呦 几时你会走过那边地丛林 亭上的踏印点点地压真 依旧是当年的情景  只有你的女儿呦 已长的活泼天真 只有你留下的女儿呦 来安慰我这破碎的心  望断云山不见妈妈的慈颜  楼静羹残难耐襟寝寒 往日的欢乐只引出眼前的孤单 梦魂无所依空有泪难干 几时归来呦妈妈呦  几时你会回到故乡的家园 这里边的橱具 弃的落叶 依旧是当年的庭院 只有你的女儿呦 以堕入绝望的深渊  只有你背弃的女儿呦 在忍受无尽的摧残 </FONT></MARQUEE></FONT> </DIV> <DIV id=Layer2 style="Z-INDEX: 2; LEFT: 60px; WIDTH: 780px; POSITION: absolute; TOP: 360px; HEIGHT: 50px"> <EMBED src=http://www.gydh.net/MTV/qsyr.mp3 width=500 height=50 type=audio/x-pn-realaudio-plugin controls="controlpanel,statusbar" autostart="true" loop="true"> </CENTER><BR><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文新魏 color=#fff000>图文:网络/编辑:游子-绝对定位挂贴练习</FONT></CENTER><BR><BR> </TD></TR></TBODY></TABLE><BR>
</textarea>





 


  评论这张
 
阅读(50)| 评论(1)
推荐

历史上的今天

评论

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

页脚

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