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

人无癖不可与交,以其无深情也。

人无疵不可与交,以其无真情也。

 
 
 

日志

 
 

各种常用HTML标签实用代码  

2012-02-11 11:14:39|  分类: 代码解析 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自在水一方《各种常用HTML标签实用代码》

 

   素材:取之网络
常用HTML标签实用代码
  编辑:在水一方

(一)全屏及图框代码:

◆1.全屏(相对定位)代码:
<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px">
</DIV><br><br>
◆2颜色背景图框代码.
<TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 bgColor="图框背景颜色代码" width="图框宽度" height="图框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>
◆3图片背景的图框代码.
<TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 background="背景图片地址" width="图框宽度" height="图框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>

(二)文字设置代码:

 

◆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="FILTER: shadow(color=#00ff00, strength=5); WIDTH: 600px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 50pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#808000> 期待您的精采! </FONT></DIV>
◆5.文字重叠效果代码:
<DIV style="FILTER: shadow(color=#000000, strength=5); WIDTH: 700px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ff0000> 春风秋雨 </FONT></DIV>
◆5.文字有颜色背景的代码:
<font STYLE="background-color:#0000ff" font face=黑体 style="FONT-SIZE: 22pt; color=#FFECEC"><b> 〖文字有颜色背景的代码〗</font></b>

(三)文字竖排代码:

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

(四)各种贴图代码:

  ◆1.贴图代码1:
<img src="图片地址">
  ◆2.贴图代码2:
<INPUT src="图片地址" type=image width=500>
  ◆3.羽化图片代码:
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="图片地址" type=image width=400>
  ◆4.贴Flash代码:
<EMBED align=right src=http://www2.upwebflash.cn/index276-img/clock30.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;>
  ◆5.图片加Flash代码:
<TABLE cellSpacing=1 cellPadding=0 width=500 height=330 bordercolor=#BB5E00 background="图片地址" border=3> <TR> <TD>
<EMBED align=center src="Flash文件地址" width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;> </TD></TR></TABLE>
  ◆5.绝对定位加叠Flash代码:
<EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 100px; HEIGHT: 300px" align=center src=http://www2.upwebflash.cn/index276-img/clock30.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent">

(五)定位标签代码 :


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>

(六)趣味的移动标签代码:


  ◆1,默然从右向左移动代码:
<marquee>移动内容文字或图片</marquee>
  ◆2,从右向左移动代码:
<marquee scrollamount=3 direction=left>移动内容文字或图片</marquee>
  ◆3,从左向右移动的代码:
<MARQUEE scrollAmount=3 direction=right>移动内容文字或图片lt;/marquee>
  ◆4,左右来回走的代码:
<marquee scrollamount=8 behavior=alternate >动内容文字或图片</marquee>
  ◆5.从下向上移动的代码:
<marquee scrollamount=1 direction=up >移动内容文字或图片</marquee>
  ◆6.从下向上从上向下移动的代码:
<marquee scrollamount=1 direction=down>移动内容文字或图片</marquee>

(七)歌曲播放代码:


  ◆1.银色播放器代码:
<EMBED src="音乐文件地址" width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">
  ◆2.图框加入歌词﹑图片和播放器代码:
<table border="1" width="500" background="http://www.luopan.com/uploads/landmark/21241.jpg" height="400" id="table1">
<tr>
<td align=center valign=bottom><br>
<font color="#ffff00" size="6"><b>《歌曲名称》</b></font><br>
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/200861116182112553.jpg" type=image width=300> <br>
<marquee direction=left scrollamount=2 width=400>
<font size="4"color="#00FFFF"><<b>歌词内容。</b></font>
</marquee>
<EMBED src=http://www.joyvv.com/images/3574.mp3 width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">
</td><</tr></table>
  ◆3.播放动漫歌曲代码:
<TABLE cellSpacing=5 cellPadding=1 width=500 align=center bordercolor=#C0C0C0 background=http://sucai.heima.com/sucai/news/bg/06.gif border=30 table> <tr>
<td><br>
<P align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://image2.sina.com.cn/dongman/f/2002-03-18/1_55-4-248_20020318123358.swf width=500 height=350 type=application/x-shockwave-flash quality="high" wmode="transparent"></P>
</td><</tr></table>

(八)绝对定位挂贴实用标签代码:


  ◆1.相对定位代码:
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 200px; ridge:">
</DIV>
  ◆2.绝对定位代码:
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: absolute; TOP: 0px; HEIGHT: 100px" >
</DIV>
  ◆3.绝对定位挂贴图片代码:
<img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg"width=250 style="LEFT: 260px; WIDTH: 250px; POSITION: absolute; TOP: 130px; HEIGHT: 320px">
  ◆4.绝对定位挂贴羽化图片代码:
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" type=image width=400 style="LEFT: 480px; WIDTH: 400px; POSITION: absolute; TOP: 100px; HEIGHT: 320px">
  ◆5.绝对定位挂贴横排文字代码:
<font face=黑体 style=font:30pt color=ffff00 style="LEFT: 600px; WIDTH: 400px; POSITION: absolute; TOP: 100px; HEIGHT: 30px"> 挂贴横排文字</font>
  ◆6.绝对定位挂贴竖排文字代码:
<font face=黑体 style=font:30pt color=ffff00 style="LEFT: 680px; WIDTH: 50px; POSITION: absolute; TOP: 170px; HEIGHT: 320px"> 挂贴竖排文字</font>
  ◆7.绝对定位挂贴Flash代码:
<EMBED style="LEFT:50px; WIDTH: 950px; POSITION: absolute; TOP: -130px; HEIGHT: 400px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=950 height=400 type=application/octet-stream ;; quality="high" wmode="transparent">
  ◆8.绝对定位挂贴从下向上移动代码:
<marquee scrollamount=1 direction=up style="LEFT: 600px; WIDTH: 300px; POSITION: absolute; TOP: 100px; HEIGHT: 130px">移动内容文字或图片</marquee>

(九).超链接标签代码:


  ◆1.超链接代码:
<a HREF="http://bbs.zj60.com/Index.asp"target=_blank><font size=3 color=#0000ff> 常青论坛 </FONT></a>
  ◆2.超链接代码:
<a HREF="http://bbs.zj60.com/Index.asp"target=_blank><img src="http://bbs.gw.com.cn/UploadFile/2008-8/2008841933482109.gif"width=100><br><font size=3 color=#0000ff> 常青论坛.</FONT></a>
  ◆3.直接运行空间贴代码:
<DIV style="LEFT: 50px; WIDTH: 995px; POSITION: relative; TOP: 0px"> <IFRAME marginWidth=0 marginHeight=0 src="http://bbs.zj60.com/Index.asp" frameBorder=0 width=995 scrolling=no height="12500"> </IFRAME></DIV>

(十)其它常用标签代码及语句:


<BR> 过行单标签.  <p></p> 过段双标签. <pre></pre>文字依原始样式显示双标签 
&nbsp; 半个空格 &nbsp;一个空格.  <li></li>文字行首加一个圆点标签.
<CENTER> <HR SIZE=2 color=#ffff00 ALIGN=CENTER WIDTH="500"> </CENTER>横线标签.
◆常用字体代码:
宋体 黑体 幼圆   隶书 新宋体 华文新魏 华文行楷  华文细黑
华文彩云  方正姚体  楷体_GB2312  仿宋_GB2312
◆常用颜色代码:
红色  #FF0000 蓝色 #0000FF 黄色 #FFFF00 青色 #00FFFF 黑色 #000000
红紫色 #FF00FF 茶色 #D2B48C 金色 #FFD700 橄榄色 #808000
本博主的悄悄话:本博是个人的休闲乐园,自娱自乐的消遣空间。本人的玩博宗旨:自行其道、 自创完美、自我欣赏、自得其乐;不求人气、但求开心、知遇随缘、去留随意! 本博的创作作品和收编资料乃为个人需要而作,素材来原于网络,如有朋友需要,那将是本博的荣幸, 网上的资源是共享的,请随意取用。唯一要求是在连带取用本博个性风格时请不要篡改和破坏本博的原个性风貌, 在此谢上了。^_^谢谢您的光临^_^ 祝您年年健康,月月好运,天天快乐,时时开心!…… 在水一方敬上。

 

  评论这张
 
阅读(235)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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