做音乐帖简明教程（为思雨1234制作高手莫入）(页 2) - 音乐天地 - 音画专区 - IT家园 IT998.com,流浪者家园,电脑技术论坛

wzyh 发表于 2007-12-20 20:55

如何突破7号字的大小 我们需要以嵌套方式调用CSS样式来定义字体，这种方法可以让我们最大限度地设置字号大小，实现方法也很简单，只需在[size=+0]标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果： 流浪者家园
流浪者家园

[[i] 本帖最后由 wzyh 于 2007-12-20 21:00 编辑 [/i]]

wzyh 发表于 2007-12-20 21:04

<DIV style="FONT-SIZE: 12px">
以上是部分最常用的代码,HTML代码还有很多,全都列举出来会让初学者头皮发麻的,因此不想一下子全部列举.我想在实际的运用中结合实例再详细讲解,大家的印象会更深,也更容易理解.
以前面的文字移动标记<MARQUEE>..........</MARQUEE>为例,我们用实际来讲解
   在论坛默认的编辑状态下，我们可以通过UBB语法的move和fly语句让对象动起来，但功能很简单，只是平行地移动。而我们使用HTML的Marquee语句则可以产生更多的移动效果：向左、向右、向上、向下。再嵌套使用marquee语句，效果就更加丰富了。
    marquee的基本语法：<marquee> ... </marquee> 说明：与大多数HTML语法元素一样，它也是成双出现的，被修饰对象就放在起始符和终止符之间。请看如下例子：
<marquee> 流浪者家园</marquee>

<MARQUEE>流浪者家园</MARQUEE>
 瞧，简单吧？不过，以上例子只是使用了marquee的默认用法。我们加入相应的参数，它的移动方法就有所不同了。
参数一：behavior。移动方式。值：scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。
例：<marquee direction=left behavior=alternate>哈哈，我来回走！</marquee>

<MARQUEE behavior=alternate>哈哈，我来回走！</MARQUEE>
参数二：scrollamount。移动速度。值取正整数。数值越大，速度越快。例：
<marquee scrollamount=25>看，我走多快！</marquee>

<MARQUEE scrollAmount=25>看，我走多快！ </MARQUEE>
参数三：scrolldelay 延时。数值。例：
<marquee scrolldelay=1000>我走一走，停一停</marquee>

<MARQUEE scrollDelay=1000>我走一走，停一停</MARQUEE>
参数四：bgcolor 底色。例：
<marquee bgcolor=pink>看到了吧？我有底色！</marquee>

<MARQUEE bgColor=pink>看到了吧？我有底色</MARQUEE>
#=rrggbb 16 进制数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
参数五范围：width和height。就是移动的宽度与高度了。例：
<marquee width=200 height=200 bgcolor=pink direction=down>在我的地盘里移动！</marquee>

<MARQUEE direction=down width=200 bgColor=pink height=200>在我的地盘里移动！ </MARQUEE>
<H5>参数6:外观(Layout)设置</H5>
1.对齐方式(Align) <align=#> #=top, middle, bottom
<DL>
<DD><TT><marquee align=top width=400>我在上面移动</marquee></TT></DD>
<DD><TT><marquee align=middle width=400>我在中间移动</marquee></TT></DD>
<DD><TT><marquee align=bottom width=400>我在下面移动</marquee></TT></DD>
<DD><TT> 对齐上沿、中间、下沿。</TT></DD></DL><TT>

<MARQUEE width=400 align="top">我在上面移动</MARQUEE>对齐上沿

<MARQUEE width=400 align="middle">我在中间移动</MARQUEE>对齐中间

<MARQUEE width=400 align="bottom">我在下面移动</MARQUEE>对齐下沿
 
参数7:空白<Margins><hspace=# vspace=#>
******************************************** 你好 <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>版主来了</marquee> 大家好！ ********************************************
******************************************** 你好
<MARQUEE hspace=20 vspace=20 width=150 bgColor=#ffaaaa align="middle">版主来了</MARQUEE>大家好！ ********************************************
</TT> </DIV></TD></TR>

wzyh 发表于 2007-12-20 21:08

<DIV align=center>
<DIV style="FILTER: shadow(color=#c299ff, strength=60); WIDTH: 480px">欢迎光临流浪者家园 </DIV></DIV>
<DIV align=center> </DIV>
<DIV align=left>代码：</DIV>
<DIV align=left><DIV align=center> <DIV style="FILTER: shadow(color=#c299ff, strength=60); WIDTH: 480px">欢迎光临流浪者家园 </DIV></DIV>  </DIV>

wzyh 发表于 2007-12-20 21:13

欢迎光临流浪者家园
代码：
欢迎光临流浪者家园

wzyh 发表于 2007-12-20 21:15

流浪者家园 原来这么简单 我只要会套用
代码
流浪者家园
代码
原来这么简单
 代码
我只要会套用

wzyh 发表于 2007-12-20 21:18

BBS.liulanghome.com
BBS.liulanghome.com
 
你会套用吗？
 
你会套用吗？

wzyh 发表于 2007-12-20 21:19

不懂代码也能玩特效 
不懂代码也能玩特效 
<DIV style="FONT-SIZE: 50pt; FILTER: dropshadow(color=000000, offx=10, offy=10, positive=10); WIDTH:500px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative">不懂代码我不怕
 
<DIV style="FONT-SIZE: 50pt; FILTER: dropshadow(color=000000, offx=10, offy=10, positive=10); WIDTH: 500px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative" twffan="done">不懂代码我不怕</DIV>

wzyh 发表于 2007-12-20 21:20

想歪就歪 
想歪就歪
 
<DIV style="FILTER: shadow(color=#AF0530, strength=60); WIDTH: 480px">变化万千</DIV> 
<DIV style="FILTER: shadow(color=#AF0530, strength=60); WIDTH: 480px" twffan="done">变化万千</DIV>

wzyh 发表于 2007-12-20 21:23

<DIV style="FONT-SIZE: 52pt; FILTER: dropshadow(color=000000, offx=3, offy=3, positive=1); WIDTH: 350px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative">大家改变颜色和数字试试</DIV>
<DIV style="FONT-SIZE: 52pt; FILTER: dropshadow(color=000000, offx=3, offy=3, positive=1); WIDTH: 350px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative" twffan="done">大家改变颜色和数字试试</DIV>
 
wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷">在来个滤镜效果的 注：wave此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；freq属性：决定显示的频率，即应出现多少个波形；phrase属性：决定波形的形状，值取0至360之间； strength属性：决定波形的振幅。
再来个滤镜效果的

wzyh 发表于 2007-12-20 21:24

代码：
<CENTER> <MARQUEE scrollAmount=2 direction=down height=60> <CENTER>朋友，欢迎您的到来~~~~</CENTER></MARQUEE></CENTER> <CENTER> <MARQUEE scrollAmount=2 direction=up height=60> <CENTER>朋友，欢迎您的到来~~~~</CENTER></MARQUEE></CENTER>
<CENTER>
<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER>朋友，欢迎您的到来~~~~</CENTER></MARQUEE></CENTER>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER>朋友，欢迎您的到来~~~~</CENTER></MARQUEE></CENTER>

wzyh 发表于 2007-12-20 21:25

代码：
<MARQUEE width=250 height=50>欢迎大家光临</MARQUEE> <MARQUEE direction=right width=250 height=50>欢迎大家光临</MARQUEE>

<MARQUEE width=250 height=50>欢迎大家光临</MARQUEE>
<MARQUEE direction=right width=250 height=50>欢迎大家光临</MARQUEE>

wzyh 发表于 2007-12-20 21:26

代码：
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://bbs.680.cn/UploadFile/2005-7/200579103213764.gif> <TBODY> <TR> <TD style="FILTER: chroma(color=#336699)"> <TABLE align=center bgColor=red> <TBODY> <TR> <TD align=middle>回复是一种美德!</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

<MARQUEE direction=up>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://bbs.680.cn/UploadFile/2005-7/200579103213764.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center bgColor=red>
<TBODY>
<TR>
<TD align=middle>回复是一种美德!</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></MARQUEE>

wzyh 发表于 2007-12-20 21:29

代码:
<TABLE borderColor=#cd5c5c height=100 width=400 align=center border=3> <TBODY> <TR> <TD background=http://www.jiahuism.com/bbs/UploadFile/2004-9/200496102712413.gif> <MARQUEE scrollAmount=3 behavior=alternate width=500><IMG alt="" src="图片地址"<A href="http://><font/" target=_blank>><FONT</A> color=#ff0000 size=6>流浪者家园<IMG alt=""src="图片地址<A href='http://"）</MARQUEE></TD></TR></TBODY></TABLE>' target=_blank>"></MARQUEE></TD></TR></TBODY></TABLE></A>
看了这个实例大家是否意识到了什么??呵呵,原来图片和文字一样,在代码<MARQUEE中的变化是完全一样的包括属性,所不同的是文字由...控制,而图片则由<img>....</img>控制。本例中蓝色部分是边框的背景图，绿色部分是定义文字，而玫瑰色当然就是移动的图片了。
这些代码都可以通过改变字体,图片地址,等等,来为己所用.当我们随后学了表格的相关内容后,大家就会对这些代码一目了然,慢慢来!!!

<TABLE borderColor=#cd5c5c height=100 width=400 align=center border=3>
<TBODY>
<TR>
<TD background=http://www.jiahuism.com/bbs/UploadFile/2004-9/200496102712413.gif>

<MARQUEE scrollAmount=3 behavior=alternate width=500><IMG alt="" src="http://www.jiahuism.com/bbs/UploadFile/2004-9/200491417812874.gif" twffan="done">流浪者家园<IMG alt="" src="http://www.jiahuism.com/bbs/UploadFile/2004-9/200491417812874.gif" twffan="done"></MARQUEE></TD></TR></TBODY></TABLE>

[[i] 本帖最后由 wzyh 于 2007-12-20 21:31 编辑 [/i]]

wzyh 发表于 2007-12-20 21:32

代码：
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1> <TBODY> <TR> <TD> <TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0> <TBODY> <TR> <TD> <MARQUEE scrollAmount=8 direction=right behavior=alternate> <MARQUEE direction=up behavior=alternate width=40 height=200 align="middle">哎呀呀</MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=150>乐乐 乐</MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=200>要 快乐</MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=150>要 开心</MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=200>不高兴</MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=150>我好烦</MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=200>我好闷</MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=150>我好笨</MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
 
 
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=8 direction=right behavior=alternate>
<MARQUEE direction=up behavior=alternate width=40 height=200 align="middle">哎呀呀</MARQUEE>
<MARQUEE direction=up behavior=alternate width=40 height=150>乐乐 乐</MARQUEE>
<MARQUEE direction=up behavior=alternate width=40 height=200>要 快乐</MARQUEE>
<MARQUEE direction=up behavior=alternate width=40 height=150>要 开心</MARQUEE>
<MARQUEE direction=up behavior=alternate width=40 height=200>不高兴</MARQUEE>
<MARQUEE direction=up behavior=alternate width=40 height=150>我好烦</MARQUEE>
<MARQUEE direction=up behavior=alternate width=40 height=200>我好闷</MARQUEE>
<MARQUEE direction=up behavior=alternate width=40 height=150>我好笨</MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

wzyh 发表于 2007-12-20 21:34

<TABLE borderColor=#000000 cellSpacing=0 cellPadding=5 bgColor=#6699ff border=1> <TBODY> <TR> <TD> <MARQUEE scrollAmount=1 scrollDelay=30 direction=up width=200 height=150> <H2 align=center>偶然</H2> 我是天空里的一片云， 偶尔投影在你的波心—— 你不必讶异, 更无须欢喜—— 在转瞬间消灭了踪影。 你我相逢在黑暗的海上， 你有你的，我有我的，方向； 你记得也好， 最好你忘掉， 在这交会时互放的光亮！ </MARQUEE></TD></TR></TBODY></TABLE>

<TABLE borderColor=#000000 cellSpacing=0 cellPadding=5 bgColor=#6699ff border=1>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=1 scrollDelay=30 direction=up width=200 height=150>
<H2 align=center>偶然</H2>

 我是天空里的一片云， 偶尔投影在你的波心—— 你不必讶异, 更无须欢喜—— 在转瞬间消灭了踪影。 你我相逢在黑暗的海上， 你有你的，我有我的，方向； 你记得也好， 最好你忘掉， 在这交会时互放的光亮！ </MARQUEE></TD></TR></TBODY></TABLE>

wzyh 发表于 2007-12-20 21:36

<TABLE bgColor=yellow> <TBODY> <TR> <TD vAlign=top width=1> <MARQUEE scrollAmount=1 direction=down behavior=alternate height=60> <MARQUEE scrollAmount=4 direction=right behavior=alternate width=468>流浪者家园</MARQUEE></MARQUEE></TD> <TD width=468> <MARQUEE scrollAmount=1 direction=up behavior=alternate height=60> <MARQUEE scrollAmount=4 behavior=alternate width=468>欢迎大家</MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>
  
<DIV style="FONT-SIZE: 12px" twffan="done">
<TABLE bgColor=yellow>
<TBODY>
<TR>
<TD vAlign=top width=1>
<MARQUEE scrollAmount=1 direction=down behavior=alternate height=60>
<MARQUEE scrollAmount=4 direction=right behavior=alternate width=468>流浪者家园</MARQUEE></MARQUEE></TD>
<TD width=468>
<MARQUEE scrollAmount=1 direction=up behavior=alternate height=60>
<MARQUEE scrollAmount=4 behavior=alternate width=468>欢迎大家</MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></DIV>

[[i] 本帖最后由 wzyh 于 2007-12-20 21:37 编辑 [/i]]

wzyh 发表于 2007-12-20 21:38

<MARQUEE direction=up width=400 bgColor=#ffffff height=300> <MARQUEE width="100%" height=35>让大家都会用代码</MARQUEE></MARQUEE>
 

<MARQUEE direction=up width=400 bgColor=#ffffff height=300>
<MARQUEE width="100%" height=35>让大家都会用代码</MARQUEE></MARQUEE>

wzyh 发表于 2007-12-20 21:43

图片的基本格式
1、 HTML的一般图片格式(不改变大小）
 代码：<IMG SRC=图片网址>
举例：代码： <IMG SRC=图片地址>
显示效果(保持原图一样）： 
 
<IMG src="http://www.e077.com/customavatars/518.jpg" twffan="done">
 
补充术语解释： 代码： 图片网址：表示图片居中。 
2、有缩小和放大功能的图片格式
 代码： <IMG height=高度 src=图片网址 width=宽度 ;>
1）缩小图片 
代码： <IMG height=100 src=图片地址 ;>    
显示效果：
 
<IMG height=100 src="http://www.e077.com/customavatars/518.jpg" twffan="done" ;> 
 
2）放大图片 
代码： <IMG height=250 src=图片地址 ;>
显示效果： 
 
<IMG height=250 src="http://www.e077.com/customavatars/518.jpg" twffan="done" ;>
<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 格式，
width=100 height=100 设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。） hspace=5 vspace=5 设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间，vspace 是设定图片上下的空间，高度采用 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" 设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。
　例如 
<IMG height=150 alt="Logo of PenPals Garden" hspace=5 src=图片地址 width=150 align=top lowsrc=pre_logo.gif vspace=5 border=8>
<IMG height=150 alt="Logo of PenPals Garden" hspace=5 src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=150 align=top lowsrc=pre_logo.gif vspace=5 border=8 twffan="done">
 

[[i] 本帖最后由 wzyh 于 2007-12-20 21:44 编辑 [/i]]

wzyh 发表于 2007-12-20 21:46

代码：
<DIV style="LEFT: 80px; OVERFLOW: hidden; WIDTH: 350px; POSITION: relative; TOP: 0px; HEIGHT: 270px"> <DIV style="LEFT: -50px; POSITION: absolute; TOP: -130px"> <MARQUEE scrollAmount=1 direction=down behavior=alternate height=499> <MARQUEE scrollAmount=1 behavior=alternate width="100%"><IMG src=http://bbs.muwen.com/fileuploaddir/4B398344013.jpg></MARQUEE></MARQUEE></DIV></DIV></DIV>
 
<DIV style="LEFT: 80px; OVERFLOW: hidden; WIDTH: 350px; POSITION: relative; TOP: 0px; HEIGHT: 270px" twffan="done">
<DIV style="LEFT: -50px; POSITION: absolute; TOP: -130px" twffan="done">
<MARQUEE scrollAmount=1 direction=down behavior=alternate height=499>
<MARQUEE scrollAmount=1 behavior=alternate width="100%"><IMG src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" twffan="done"></MARQUEE></MARQUEE></DIV></DIV>

wzyh 发表于 2007-12-20 21:47

代码
<MARQUEE scrollAmount=3 direction=right width=400 height=234> <MARQUEE scrollAmount=3 width=280 height=234> <DIV align=center><IMG src="<A href='http://bbs.muwen.com/fileuploaddir/4B398344013.jpg">' target=_blank>http://bbs.muwen.com/fileuploaddir/4B398344013.jpg"></A> </DIV></MARQUEE></MARQUEE>
 

<MARQUEE scrollAmount=3 direction=right width=480 height=234>
<MARQUEE scrollAmount=3 width=280 height=234>
<DIV align=center twffan="done"><IMG src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" twffan="done"> </DIV></MARQUEE></MARQUEE>

页: 1 [2] 3 4 5

IT家园's Archiver