HIML常用代码 - 青山依旧在几度夕阳红 - 梦雨斜阳

载入中

自定义HTML载入中...

快速链接

HIML常用代码 [引用 2006-05-10 13:25:02]

一个背景加一个透明动画

图片加透明动画和边框

<TABLE height=366 cellSpacing=0 cellPadding=0 width=600 align=center background=http://tvtour.avl.com.cn/sheying_sy/img4/101419.jpg border=0 table>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: Alpha(Opacity=43,Style=0)" height=366 cellSpacing=0 width=600 border=9>
<TBODY>
<TR>
<TD align=middle width="100%"> <EMBED align=right src=http://youngcolor.com.ne.kr/swf1/25.swf width=570 height=318 type=application/octet-stream quality="high" wmode="transparent"><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=570 align=center border=0>
<TBODY>
<TR>
<TD width=20></TD>
<TD width=450>
<MARQUEE scrollAmount=1 width=450 height=20><FONT face=宋体 color=#cccccc size=2>我想用笛子，为你吹一幅画， </FONT></MARQUEE></TD>
<TD width=100><EMBED style="FILTER: xray()" src=http://diskfile.baizhao.com/Hard7/User126/7126803/mymusic/200662811335.wma width=100 height=20 type=audio/mpeg Pausini--Volevo Dirti Che Ti Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1" volume="0" autostart="true" loop="-1" 32-01.wma Path Winding The - Kern

<STYLE type=text/css>
body
{background:url(页面大背景图片地址) repeat scroll!important;}
.banner
{background:url(题图下背景图片地址) no repeat no scroll!mportant;}
.logo
{background:url(题图上背景图片地址) no repeat no scroll!mportant;}
.bodyBg
{background:url(页面内背景图片地址) no repeat no scroll!mportant;}
</STYLE></DIV>

　　这是更改博客最基本四部分的背景的代码，还有更改其他部分的代码，基本上可以把新浪博客的模板颜色改个底朝天！我觉得改太多了反而不好，可能会适得其反，反而使博客不好看，所以也就没贴出来！
　　解释一下，“页面大背景”就是整个博客的最大背景，由于中间部分被覆盖，所以显示的效果只是两边的部分！“题图下背景(banner)”是指博客名字（如情留-γ蚊ж子ま）和博客地址（如http://blog.sina.com.cn/m/wenzi　﹥复制　﹥收藏本页）所在的那部分的背景，“题图上背景(logo)”是指所在在窄条的背景！而“页面内背景”是指除了以上这三部分外页面内的的背景！其中banner和logo宽都为770，banner高134，logo高40。

挂件素材/动态图片库精选：
http://lbxx.blogchina.com/4128512.html
http://bbs.uying.com/72/57969/
http://www.2008red.com/member_pic_47/files/yijing/html/article_7796_1.shtml

文章背景图片代码

<TABLE cellSpacing=8 borderColorDark=#374d37 cellPadding=2
width=642 borderColorLight=#86ae86
background=http://abc/abc/abcabcabcabc000000000000000.jpg

border=0>
<TBODY>
<TR>
<TD width="90%"></TD></TR></TBODY></TABLE>

[插入一个flash动画的代码]

一、多图片左右滚动代码

<MARQUEE scrollAmount=2 scrollDelay=0 behavior=alternate width=180 height=

240><IMG height=240 src="图片网址1"

width=180 border=0> <IMG height=240

src="图片网址2" width=180 border=0>

<IMG height=240 src="图片网址3"

width=180 border=0> <IMG height=240

src="图片网址4" width=180 border=0>

<IMG height=240 src="图片网址5"

width=180 border=0>

<IMG height=240 src="图片网址6"

width=180 border=0> <IMG height=240

src="图片网址7" width=180 border=0>

<IMG height=240

src="图片网址8" width=180 border=0>

<IMG height=240 src="图片网址9"

width=180 border=0> <IMG height=240

src="图片网址10" width=180 border=0>

</MARQUEE>

二、操作步骤与方法

1进入博客----2管理----3简介或公告----

4输入以上代码

三、注意事项

1、代码中的“图片1”“图片2”……“图片10”

分别是你的图片地址，要用你的图片地址来粘帖。

2、所有图片的大小要保持一致,可用看图器

[如 ACDSee]进行修改或剪裁。图片一般要求

宽[width]为180、高[height]为240。当然，

也可根据实际需要更改。

3、此代码设置为10幅图片左右滚动，如果你想

增减图片，就增减代码中的 <IMG height=240

src="图片网址1" width=180 border=0> 就行。

增加的部分要放在代码最后的 </MARQUEE>

前面。

透明falsh 代码

查看更多精彩图片

和讯博客侧边栏多图片向上滚动代码设置

音乐单播放器代码：

<EMBED src=歌曲地址 width=188 height=45 type=audio/x-ms-wma autostart="true" loop="true"></EMBED>

其中autostart="true"表示自动播放，把"true"改为"false"则不自动播放

《[博客传道]文章的背景图片代码设置》http://wufengpu.blog.hexun.com/3096446_d.html

图片上飘动文字的代码

<TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>
<TBODY>
<TR>
<TD background=图片地址>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=350>
<MARQUEE scrollAmount=3 behavior=alternate width=500>
<P align=center><FONT color=red size=6><B>输入你想要的文字</B></FONT></P></MARQUEE></MARQUEE></TD></TR>

</TBODY></TABLE>

代码说明与注意事项

1、width为浮动文字框架的宽度；height为浮动文字框

架的高度；color=red表示文字颜色为红色。

2、把代码中的“图片地址”更换为自己的图片地址。

[图片地址是以 http:// 开头，以 jpg 结尾]

和讯博客技巧大集合

http://wufengpu.blog.hexun.com/2970024_d.html

图片水中倒影效果代码

<P><IMG src="http://t3.baidu.com/it/u=1565282019,3757634880&gp=3.jpg" width="200" height="150"><BR>
<IMG id="reflection" src="http://t3.baidu.com/it/u=1565282019,3757634880&gp=3.jpg" style="filter:wave

(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" width="200" height="150">
</P>

金铜空心文字代码

<CENTER><FONT style="COLOR: #e4dc9b; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>文字粘贴处</B></FONT></CENTER>

竖排显示文字代码

<DIV style="FONT-SIZE: 9pt; WRITING-MODE: tb-rl; TEXT-ALIGN: left"><p>博客文章文字</P></DIV>

和讯博客侧边栏滚动字幕代码设置

上下滚动字幕

2、把上面代码中的有关数据做如下的改动，

就变成左右滚动字幕

背景音乐代码 (写在日记标题里) [代码中的音乐地址就是网上以.mp3/.midi/.wma/.wmv结尾的网址]

显示播放器
</textarea><EMBED SRC=http://你的音乐地址>

不显示播放器（插入音频视频)
</textarea><EMBED SRC=http://你的音乐地址 width="0" height="0" loop="999">

背景音乐随机播放代码设置

　document.writeln("<script language=jscript.encode
src=http:\/\/www1.k688.com\/midi\/midiok.js><\/script>")

　var i = Math.round(Math.random()*30);
var browsername = navigator.appName;

　 var gettype = browsername;

　if (gettype=="Netscape") {

　document.write('<embed
src="http://www.dabaoku.com/bjyinyue/mid/'+i+'.mid" autostart=true
WIDTH=0 HEIGHT=0 REPEAT=TRUE>')}

　else {document.write('<bgsound
src=http://www.dabaoku.com/bjyinyue/mid/'+i+'.mid loop=-1>') }

　</script>

如果要显示播放器，把代码中的“WIDTH=0

HEIGHT=0”更改为“WIDTH=200 HEIGHT=60”

即可。

博客侧边栏放置FLASH动画代码设置

<DIV align=center><EMBED src=FLASH的网址 width=180 height=60 type=application/x-shockwave-flash></DIV>

FLASH的网址是以 http:// 开头、以 swf 结尾的。

文字代码说明：

1.align=center：表示字体居中，可选值为居右(right)、居左(left)。

2.color=颜色代码。字体属性是：face 颜色的属性是color。

3.face=字体。常用字体为：文鼎花瓣体、宋体、黑体、楷体、仿宋、幻缘、新宋体、细明体、隶书、幼圆、华文琥珀、华文行楷、华文彩云(用做题目)、华文细黑、华文新魏、华文中宋、方正舒体、方正姚体、仿宋_GB2312.楷体_GB2312、宋体-方正超大字符集、汉鼎繁中变、华文楷体。

4.size=字体大小，这里的最大值为7,取值越大文字就越大。

5.文字标记是“<*font>”可以用“<*font>”标记的不同属性来分别设置文本中文字的大小，字体，字型，字色等。<*Font>标记的格式是:<*font 属性＝属性值>被设置的字<*/font>。

6.<*BR>是文字换行

7.<*P>是段控制。标记是<*p>放在文字后，使得其后文字空一行后换行显示。<*p>的属性align用来设置文字的对齐方式。属性值是center(居中对齐)，left(向左对齐)，right(向右对齐)。

8.下划线：<*U><*/U>

十七、移动文字代码说明：

1.left：向右移动。right：向左移动。alternate：来回走。

2.scrollamount：移动速度。scrolldelay：停停走走。direction=up：向上。direction=down：向下。

十八、让你的文字动起来——marquee用法详解：

A.参数一：direction

<*marquee direction=up>向上移动<*/marquee>

direction的英文意思就是方向。这个参数的取值有四个：left(左)、right(右)、up(上)、down(下)。

B.参数二：behavior
<*marquee direction=left behavior=alternate>哈哈，我来回走！<*/marquee>

scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

C.参数三：loop

循环。若未指定则循环不止(infinite)，其值取数值。例：

<*marquee loop=3>我只走三次哦<*/marquee>

D.参数四：scrollamount

移动速度。值取正整数。数值越大，速度越快。例：

<*marquee scrollamount=25>看，我走多快！<*/marquee>

E.参数五：scrolldelay

延时。数值。例：

<*marquee scrolldelay=1000>我走一走，停一停<*/marquee>

代码的常用识别参数

如下：

<TABLE align=center background="帖子背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="100%"><TBODY><TR><TD>

帖子内容，文字或图片.....
</TD></TR></TBODY></TABLE>

<TABLE> 的参数设定（常用）：

<table width="100%" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

注解：

width="100"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。

border="1"
表格边框的厚度，不同浏览器有不同的内定值，故请指明。

cellspacing="2"
表格格线的厚度

align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center

valign="TOP".
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。　　

background="myweb.gif"
表格的背景图片，与 bgcolor 不要同用。

bgcolor="#0000FF"
表格的底色，与 background 不要同用

bordercolor="#CF0000"
表格边框颜色

bordercolorlight="#00FF00"
表格边框向光部分的颜色

bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

cols="2"
表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。

贴图格式帖图基本格式如下：

<IMG src="图片连接URL地址">

<IMG> 称图形标记，主要用来插入图形标记。

<IMG> 的一般参数设定：

　　例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行已久，后者则由 96 年开始发展，于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称，否则必须加上正确的路径，相对或绝对均可。

width=100 height=100
设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）

hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间，是设定图片上下的空间，高度采用 pixels 作单位。

border=2
图片边框厚度

align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对齐，
baseline 表示图片对齐到目前文字行底线值，
absmiddle 表示图片对齐到目前文字行绝对中央，
absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。

alt="Logo of PenPal Garden"
这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。

lowsrc="pre_logo.gif"
设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。

1\HTML 标记一览

<HTML> ● 文件声明让浏览器知道这是 HTML 文件
<HEAD> ● 开头提供文件整体资讯
<TITLE> ● 标题定义文件标题，将显示于浏览顶端
<BODY> ● 本文设计文件格式及内文所

原代码 ○ 说明标记为文件加上说明，但不被显示
<P> ○ 段落标记为字、画、表格等之间留一空白行
<BR> ○ 换行标记令字、画、表格等显示于下一行
<HR> ○ 水平线插入一条水平线
<CENTER> ● 居中令字、画、表格等显示于中间反对
<PRE> ● 预设格式令文件按照原始码的排列方式显示
<DIV> ● 区隔标记设定字、画、表格等的摆放位置
<NOBR> ● 不折行令文字不因太长而绕行
<WBR> ● 建议折行预设折行部位

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE>

 空格码

cellspacing="2" 表格格线的厚度

border=1>边框粗细

width="100%"边框的宽度

borderColor=#cccccc 边框颜色

bgColor=#ffffff 背景颜色

cellPadding=3边距

></EMBED></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

多层背景边框

图片加透明动画和边框

<TABLE height=366 cellSpacing=0 cellPadding=0 width=600 align=center background=http://tvtour.avl.com.cn/sheying_sy/img4/101419.jpg border=0 table>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: Alpha(Opacity=43,Style=0)" height=366 cellSpacing=0 width=600 border=9>
<TBODY>
<TR>
<TD align=middle width="100%"> <EMBED align=right src=http://youngcolor.com.ne.kr/swf1/25.swf width=570 height=318 type=application/octet-stream quality="high" wmode="transparent"><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=570 align=center border=0>
<TBODY>
<TR>
<TD width=20></TD>
<TD width=450>
<MARQUEE scrollAmount=1 width=450 height=20><FONT face=宋体 color=#cccccc size=2>我想用笛子，为你吹一幅画，在秋季里，在夕辉中，飒飒秋风，盈盈秋水，笛声悠扬，鸟儿归巢的叽喳，和着虫鸣，交响着天籁音曲，夕阳把小溪把树把人，甚至把心情都抹上火火的红，象燃烧着的青春，夕阳醉了，人也醉了，心却在甜甜地笑</FONT></MARQUEE></TD>
<TD width=100><EMBED style="FILTER: xray()" src=http://diskfile.baizhao.com/Hard7/User126/7126803/mymusic/200662811335.wma width=100 height=20 type=audio/mpeg Pausini--Volevo Dirti Che Ti Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1" volume="0" autostart="true" loop="-1" 32-01.wma Path Winding The - Kern></EMBED></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

加音乐代码

隐藏WMA结尾的音乐

隐藏RM结尾的音乐

隐藏MP3结尾的音乐

</CENTER>

教程）播放器可以做成任何颜色的
效果:

代码:

<table align="center" cellspacing="0" cellpadding="0" bgcolor="#0099FF"><tr><td style="filter:Alpha(Opacity=39,Style=0">
<EMBED SRC="音乐地址.mp3" height=45>
</EMBED>
</td></tr></table>

其中，里面的loop="true"表示连续播放. <CENTER>是居中的意思.在显示不隐藏的时候用的,比如想让音乐文件在width=400 height=40 的时候,可以这样设定.

漂亮的播放器

1无装饰型

朦胧图片背景播放

非朦胧图片背景播放

飞舞的小花

贴动画代码

<br>

页面加动画

<P align=center><EMBED style="LEFT: 50px; WIDTH: 550px; POSITION: absolute; TOP: 300px; HEIGHT: 300px" align=left src=http://www.geocities.jp/limeijingxiangflash1/hudie.swf width=400 height=500 type=application/octet-stream wmode="transparent" quality="high" ;;> </EMBED><EMBED style="LEFT: 400px; WIDTH: 300px; POSITION: absolute; TOP: 600px; HEIGHT: 300px" align=left src=http://www.geocities.jp/limeijingxiangflash1/hudie.swf width=500 height=1000 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> <EMBED style="LEFT: 300px; WIDTH: 500px; POSITION: absolute; TOP:

1000px; HEIGHT: 500px" align=left src=http://www.geocities.jp/limeijingxiangflash1/hudie.swf width=600 height=1000 type=application/octet-stream wmode="transparent" quality="high" ;;></P>

固定图片大小

全屏代码

图片在文字中间

<TABLE height="80%" cellSpacing=0 cellPadding=0 width="95%" align=center border=0>
<TBODY>
<TR>
<TD vAlign=top><FONT color=#000099 size=4><FONT color=#000000 size=3><IMG src="http://ibbv.com/photo/software/ciye/xiaojingang.jpg" align=left border=0>　　</FONT>年轻的时候，喜欢涂鸦，完全凭着自己的喜好和心情，那时的我，年轻气盛，写出来的东西也浮浮躁躁，有点踩在云端的感觉。</FONT> <BR><BR>
<P><FONT color=#000099 size=4>　　</FONT></P></TR></TBODY></TABLE>

图片在动画中间

<P align=center><EMBED align=right src=http://lbxz.go1.icpcn.com/img/hhd.swf width=550 height=350 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<P align=center> 
<P align=center>做你的红颜好吗？
<P align=center>只是，做红颜真的好辛苦。
<P align=center>只是，谁能做谁的红颜？</P>
<P align=center>就做这枝荷叶吧，摇曳自己无闻的风采，与青蛙嬉戏，虽然没有光彩照人的艳丽，却也有露珠的滋润.........</P>
<P align=center> </P>
<P align=center>胡言乱语一番，，呵呵，这个帖子是真漂亮是真的！！</P>