发新帖  新投票  回帖 
44383个阅读者,24条回复 | 打印 | 订阅 | 收藏
追梦晨曦

发表时间:2008-4-15 01:39

转贴 【启步学代码教程一-----HTML代码编辑参考资料】[分享]



追梦晨曦 发表在 教程交流 华声论坛 http://bbs.voc.com.cn/forum-163-1.html



















欢迎您!启步学代码。

(追梦晨曦编辑 供初学HTML代码的朋友参考)



HTML代码编辑参考资料




  要学习代码贴图,你参预的论坛必须是允许使用[HTML]代码的。有的论坛虽然不允许使用代码,
但在诸如音画时尚,贴图专栏或新手学堂等栏目开通。有的论坛注明允许使用代码,但必须有条件去
申请才批淮启用。还需注意粘贴代码前应先选择[HTML],同时把旁边的自动修正的钩去掉。现在
已有不少论坛,可以直接发代码贴了。



  为了更好的学习编辑代码,应在自已电脑的硬盘中建一个学代码的文件夹,内放若干记事本,作编辑和
保存代码用。初学者要在键盘上直接输入代码语句有些困难,可以把下面这些常用代码复制在记事本上,
方便需要时取用。

  要看看编好了的代码是否成功,可以在网页制作软件或论坛发贴区预览,也可用本贴下面的浏览器试看。





编辑者:追梦晨曦









常用汉字代码:



宋体 黑体 楷体_GB2312 仿宋_GB2312 新宋体 幼圆 隶书

方正舒体 华文新魏 华文行楷 华文细黑 华文彩云 方正姚体



颜色的代码:



黑色=000000 白色=ffffff 红色=ff0000 绿色=00ff00 

蓝色=0000ff 黄色=fff000 青色=00ffff 紫色=ff00ff



居中代码:


<CENTER> 内容</CENTER>

<P align=LEFT>左对齐</P>

<P align=center>居中</P>

<P align=RIGHT>右对齐</P>



文字设置代码:



<CENTER>
<font style=font:20pt face=隶书 color=fff000>
输入内容</font></CENTER>



贴图代码:


<img src="图片地址">

<P align=center><img src="图片地址"></P>

<P align=center><img src="图片地址"width=宽度 height=高度></P>




编辑者:追梦晨曦









用颜色作背景的空白图框代码:

<CENTER>

<TABLE borderColor=#0000ff cellSpacing=10 cellpadding=20 bgcolor=fff000
width=400 height=300 border=10>

<TBODY>

<TR>

<TD>

<br>

<br>

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






编辑者:追梦晨曦







用图片作背景的空白图框代码:

<CENTER>

<TABLE borderColor=#0000ff cellSpacing=10 cellpadding=20 cellpadding=20 background=图片地址
width=400 height=300 border=10>

<TBODY>

<TR>

<TD>

<br>

<br>

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

 







编辑者:追梦晨曦







立体图框代码:

<CENTER>

<TABLE style="BORDER-LEFT-COLOR: #fbd44c; BORDER-BOTTOM-COLOR: #fbd44c;
BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #fbd44c; BORDER-RIGHT-STYLE:
ridge; BORDER-LEFT-STYLE: ridge; BORDER-RIGHT-COLOR: #fbd44c;
BORDER-BOTTOM-STYLE: ridge" height=380 cellSpacing=5 cellPadding=5 width=470
border=14>

<TBODY>

<TR>

<TD>

<br><br>

</TR></TBODY></TABLE>



 





编辑者:追梦晨曦







图片可调大小的一组代码.


<P align=center><INPUT src="图片地址"type=image width=宽度></P>




编辑者:追梦晨曦









羽化图片代码:



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






贴Flash 图片代码:



<EMBED src=http://yy.2000y.net/swfpath/200462722381564615.swf width=128 height=0 hidden=true type=application/x-shockwave-flash>








编辑者:追梦晨曦







在一张图片上加叠Flash 代码:



<TABLE cellSpacing=3 cellPadding=3 width=460 bordercolor=660000
background=http://img.gw.com.cn/UploadFile/2005/6/7/5141107.jpg border=18>

<TBODY>

<TR>

<TD><EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf
width=460 height=370 type=application/octet-stream wmode="transparent"
quality="high" ;;></TD></TR></TBODY></TABLE>

 






编辑者:追梦晨曦









全屏代码:



<br><br><br><br>

<DIV id=table1 style="LEFT: -220px; WIDTH: 800px; POSITION: relative; TOP:
40px">

贴子

</DIV><br><br><br><br>

 






 
编辑者:追梦晨曦






播放器代码



<CENTER>

<embed src="http://mp3.blog.163.com/mu_l/cgAZNK7TpvB0PUiDX_XDiQ==/58265320179119452.mp3"; type="audio/x-pn-realaudio-plugin"
controls="controlpanel,statusbar" height=50 width=400 autostart="true"
loop="true">

</CENTER>

(高度height=和宽度width=设为0时,隐藏播放器。)






编辑者:追梦晨曦








移动设置代码:




我从右向左走代码:

<br>

<marquee direction=left scrollAmount=3 ><font style=font:25pt face=隶书
color=0000ff>我从右向左走!</marquee>




我从左向右移代码:

<marquee direction=right scrollAmount=3 ><font style=font:25pt face=隶书
color=0000ff>我从左向右移!</marquee>




编辑者:追梦晨曦






我来回走耶代码:

<br>

<marquee behavior=alternate scrollAmount=3 ><font style=font:25pt face=隶书
color=0000ff>我来回走耶!</marquee>




我从下向上滚代码:

<br>

<marquee direction=up scrollAmount=3 ><font style=font:25pt face=隶书
color=0000ff>我从下向上滚!</marquee>




编辑者:追梦晨曦






我从上向下滚代码:

<br>

<marquee direction=down scrollAmount=3 ><font style=font:25pt face=隶书
color=0000ff>我从上向下滚!</marquee>








编辑者:追梦晨曦








  三合一花边图框贴图代码模式:












<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center
background=第一张图框的图片地址>

<TR>

<TD>

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



<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center
background=第二张图框的图片地址 >

<TR>

<TD>

这里是第二张图框的单元格,可以开始插入内容。

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


<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center
background=第三张图框的图片地址>

<TR>

<TD>

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



 【说明】

 ◇黄色字体是第一张图框的代码。

 ◇白色字体是第二张图框的代码,

 ◇绿色字体是第三张图框的代码。






编辑者:追梦晨曦







编辑者:追梦晨曦










相片加相框的“绝对定位加叠法”的代码模式:












<TABLE id=table style=" ridge; LEFT: 0px; WIDTH:
550px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 670px" border=0>

<TR>

<TD>

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

<TR><TD>

<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION:
absolute; TOP: 0px; HEIGHT: 400px">

<CENTER>

<INPUT src="图片地址" type=image width=480></DIV>

<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION:
absolute; TOP: 0px; HEIGHT: 400px">

<INPUT src="图片地" type=image width=550>

</DIV>

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

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




  【说明】


 ◆这个模式有二张表格,二个贴图代码,四个都有位置控制代码。

 ◆第一张表格是控制加叠图片在页面的位置.LEFT: -0px或LEFT: -220px。

 ◆第二张表格是控制二张插入图片的位置,根据图片大小而定。

 ◆插入图片都是用"图片大小可调整"的代码。

 ◆要使相片和相框完美吻合,还可用空格、空行进行调整。

 ◆位置控制句:

  LEFT: 0px; WIDTH 300px 前面的参数是调整水平(左右)的位置,数值小偏左,数值大偏右。后面的参数是位置的宽度。

  TOP: 0px; HEIGHT 400px 前面的参数是调整垂直(上下)的位置,数值小偏顶,数值大偏底,后面的参数是位置的高度。




编辑:追梦晨曦


 









编辑者:追梦晨曦








编辑:追梦晨曦
(待续)




(为了传播 HTML 代码知识,让更多网友学用代码贴图制作网页,本贴欢迎转载,
敬请表明出处! 多谢合作 !)


























[本帖最后由 追梦晨曦 于 2008-4-15 01:51 编辑]




----------------------------------------------
签名违规
 
闺手

回复时间:2008-4-15 13:14
沙发欣赏~




----------------------------------------------
华声论坛 影音帝国 官方QQ群

影视时空|音乐地带 QQ群:140288348 128111319 42933722
音乐快递QQ群:338549863 原声地带QQ群:344590352
高品质单曲QQ群:116060792 心情音乐QQ群:154659931
心情吟诵QQ群:190584521 音乐播放器QQ群:206520165
华声论坛 有你更精彩!!
 
li1039

回复时间:2008-4-15 18:01
color=0000ff>我从左向右移!

[本帖最后由 li1039 于 2008-4-15 18:04 编辑]




----------------------------------------------
卡拉永远OK
 
累石

回复时间:2008-4-16 18:36
朋友辛苦了,好教材~

 
白云岫水

回复时间:2008-4-16 21:25
朋友辛苦了,问好~~~~

 
dllc1234

回复时间:2008-4-18 02:28
谢谢,学习。。。。。。。。。。。。。。

 
宠儿
原创音画组

回复时间:2008-4-18 11:09
楼主是转帖吗?

 
宠儿
原创音画组

回复时间:2008-4-18 11:12
内容是自己重新编辑的还是秋光老师的内容。原帖:http://bbs.voc.com.cn/topic-312870-1-1.html

 
宠儿
原创音画组

回复时间:2008-4-18 11:14
帖子和秋光的帖子一样。

[本帖最后由 宠儿 于 2008-4-18 15:53 编辑]

 
雪影儿

回复时间:2009-1-17 16:13


[本帖最后由 宠儿 于 2009-1-18 15:29 编辑]

 
antusheng001

回复时间:2009-4-14 19:55
好啊!!

 
q641221

回复时间:2009-4-14 22:12
谢谢分享。




----------------------------------------------
上善若水,袖里乾坤
 
红颜泪

回复时间:2009-4-15 00:35
谢谢,学习。。




----------------------------------------------
眼泪,代表执着。爱和重生。
清冷的泪。薄凉的语。容我倾城爱一生。
纠结的痛。寂寞的花。许我落寞隐今生。
尘缘散。万事终。苍白的天地下。
请看我执着如斯。寂寞如斯。静静绽放。
 
梅情竹韵

回复时间:2009-4-15 21:01
学习,谢谢分享!

 
梦梦雪

回复时间:2009-4-17 01:36
background=http://hiphotos.baidu.com/香草项链/pic/item/0837712c1a97fa28359bf72e.jpg border=18>






width=460 height=370 type=application/octet-stream wmode="transparent"
quality="high" ;;>




----------------------------------------------
看庭前花开花落,荣辱不惊,望天上云卷云舒,去留无意。在这个纷扰的世俗世界里,能够学会用一颗平常的心去对待周围的一切,也是一种境界。
 
梦梦雪

回复时间:2009-4-17 01:45


天,总以为自己是无色的,但,她是蓝的。




----------------------------------------------
看庭前花开花落,荣辱不惊,望天上云卷云舒,去留无意。在这个纷扰的世俗世界里,能够学会用一颗平常的心去对待周围的一切,也是一种境界。
 
梦梦雪

回复时间:2009-4-17 01:57


width=800 height=400 border=200>

















----------------------------------------------
看庭前花开花落,荣辱不惊,望天上云卷云舒,去留无意。在这个纷扰的世俗世界里,能够学会用一颗平常的心去对待周围的一切,也是一种境界。
 
梦梦雪

回复时间:2009-4-17 01:58
晕啊,我好笨啊!明天接着学,谢谢楼主!




----------------------------------------------
看庭前花开花落,荣辱不惊,望天上云卷云舒,去留无意。在这个纷扰的世俗世界里,能够学会用一颗平常的心去对待周围的一切,也是一种境界。
 
梦梦雪

回复时间:2009-4-18 18:37




第一层表格 来试试



第二层文字 来试试






----------------------------------------------
看庭前花开花落,荣辱不惊,望天上云卷云舒,去留无意。在这个纷扰的世俗世界里,能够学会用一颗平常的心去对待周围的一切,也是一种境界。
 
梦梦雪

回复时间:2009-4-18 18:39




第一层表格 来试试







----------------------------------------------
看庭前花开花落,荣辱不惊,望天上云卷云舒,去留无意。在这个纷扰的世俗世界里,能够学会用一颗平常的心去对待周围的一切,也是一种境界。
 
发新帖 新投票
 回帖
查看积分策略说明快速回复主题
你的用户名: 密码:   免费注册(只要30秒)


启用 Html 代码
使用个人签名
(请您文明上网理性发言!并遵守相关规定
   



Processed in 0.042661 s, 8 q - 无图精简版,sitemap,