石头制贴讲座之三（边框底图和滚动图片/字幕）

石头制贴讲座之三（边框底图和滚动图片/字幕） 2009-06-21 00:37:58

[ 打印 ]

[ 加入书签 ]

阅读 () ┆ 评论 (0)

评论

目前还没有任何评论

登录后才可评论.

不想让你哭 总想对你有些话要说 可不知道该说些什么 总想给你带来些欢乐 可不知道你喜欢什么 过了一夜又多了一天 时间让人变得好心烦 不知何时又才能见面 难道就这样天各一边 我不想让你哭 我也不想认输 只想用我的爱 再次把你留住 谁的眼泪随风飘向了远处 那也是我在为你祝福 我不想让你哭 我也不想认输 只想用我的爱 再次把你留住 如果爱情就是 我这场的赌注 输了你也就等于 输了全部 下载链接 叮呤呤，上课了。看看这个豪华贴子，貌似很复杂，其实很简单。我没有使用一个flash, 但是很有动感，所有的东西都在动，今天要给同学们介绍一个很重要的html语句：Marquee还是一句一句的讲，讲到哪里就说那里吧。 第一句：定义边框和底图 这句话定义了边框和底图。可以看到这个边框是两道浅蓝色的框框加了一条闪闪星星的带子。这不是从谁家抄袭来的，是俺的原创，大家可以发挥改成不同的颜色不同的图。两个浅蓝色边框是两个嵌套的table, 所以这句话里重复出现了两次table,tbody, tr和td。但是注意要把内补丁设置成为8不能是0，这样才能显示出来星星闪的夹层，也就是cellpadding=8星星闪是怎么出来的呢，实际上就是一个小gif图片： 图片地址是：http://i42.tinypic.com/6tedmw.gif 我只要在第一个table里面把这个图片设置成底图就行了。 background=http://i42.tinypic.com/6tedmw.gif 第二个table的底图是另外一个小图片： 图片地址是：http://www.sucai123.com/sucai/img4/639/b057.gif 第二个table覆盖了第一个table的大部分，只露一个8像素的边边，所以就能看到星星闪闪的一条带子了。 另外注意这两个table, 我定义的宽度是100%， 不是实际的多少pixel, 而是一个百分数，意思就是你给我多大的宽度我就占多大的宽度好了，所以发贴时候会看着宽一些，再博客里看会窄一些，取决于网页给了贴子多大的宽度了。 这个边框大家可以任意发挥，你可以用不同颜色，两个框框分别是用不同颜色也好看，可以用三个边框，四个边框，可以调节宽度，让它窄一点也行，底图可以换成不同的图片。 图片可以在网上找，搜索一下网页素材，就一大堆一大堆的图。 第二句：歌曲标题来回动 现在就要介绍这个Marquee, 基本语法就是marquee你想要动的东西/marquee marquee有很多参数可以设定，就定了你要动的东西怎么动，往哪个方向动，来回循环还是就一次，运动的速度等等。 这里我想让这个“不想让你哭”动起来，来回动，那我就设置marquee的behavior是alternate就好了。另外还有scroll, slide两种属性，scroll, 就是一圈一圈的走，slide就是像幻灯片一样走一次就完了，你可以自己尝试一下看看效果。 在这句里面我还定义了字体的显示，font这个句法是来定义字体的，在它的style定义句中，我把自号定为40号，另外我加上了影子，影子的效果是灰色的, shadow(color=gray)，要注意用firefox是看不出来这个阴影效果的。宽度是50%显示，这样子就在table内部中央50%的宽度内来回走了，字体本身的颜色是和边框相同的颜色，你也可以用其它颜色。lineheight就是行间句，150%就是空行1.5，但因为“不想让你哭“就一行，所以没用。字体我定义的是华文彩云，但是如果你的电脑是英文系统有没有安装中文字体，你是看不出来空心的华文彩云字体的。 第三句：图片slide show 还是这个marquee, 让这些图片动起来形成slideshow效果，注意高度要定义成图片高度，宽度是80%,也就是要显示在表格中央80%的宽度区域内。方向是向左，loop是控制它无限次的运转，scrollamount控制速度，数字越小越动的慢，可以自己调试，我这里用的是3。注意图片是提前找好的，并且改成了统一大小并上传的。图片的显示用img src就行了。 第四句： 滚动歌词 接下来是滚动歌词了，还是依旧使用marquee来使文字运动起来，只不过是向上滚动显示，速度是1。行间距是两倍，对字体的定义和歌名的定义有几处不同，字号要小，阴影效果变成了闪光效果，还是灰色，但是是在字的周围包了一层灰色，firefox还是看不到的。字体定义成为华文行楷。自体本身的颜色我设成了红色：crimson 我这里有一个英文颜色名称对照表，你可以参考： http://school.21tx.com/2005/08/15/12819.html 第五句：播放器 哈哈，偷懒啦，到文学城发新贴的地方去搞个自动生成的code就行了。 链接：http://web.wenxuecity.com/BBSAdd.php?SubID=ktv 第六句：下载链接和结束 提供一个歌曲文件超级链接，以供听不到音乐的人下载收听。结束句就是结束第一句里面的两个table，现在table里面东西就都写完了。 整个贴字没有使用一个flash, 没有使用一个div模块，纯靠html语言来搞效果，也不错。 <TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"><TBODY><TR><TD><TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background=http://www.sucai123.com/sucai/img4/639/b057.gif><TBODY><TR><TD><center><FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B><marquee behavior=alternate>不想让你哭</marquee></B></FONT><br><br><marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"> <img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"><img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/5e6bf6f7948db403730eec2d.jpg"><img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/756ab04a21796a0208f7ef23.jpg"><img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/764ee295e2a62e297af4802c.jpg"><img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/896b68dd929e81155882dd20.jpg"><img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/9a4aa5af1cd967dafaed5024.jpg"><img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"></marquee><br><br><marquee direction=up scrollamount=1><center><FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:华文行楷">总想对你有些话要说<br>可不知道该说些什么<br>总想给你带来些欢乐<br>可不知道你喜欢什么<br>过了一夜又多了一天<br>时间让人变得好心烦<br>不知何时又才能见面<br>难道就这样天各一边<br>我不想让你哭 我也不想认输<br>只想用我的爱 再次把你留住<br>谁的眼泪随风飘向了远处<br>那也是我在为你祝福<br>我不想让你哭 我也不想认输<br>只想用我的爱 再次把你留住<br>如果爱情就是 我这场的赌注<br>输了你也就等于 输了全部 <br></font></center></marquee><center><br><br><embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types ><br><a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank">下载链接</a><center></TD></TR></TBODY></TABLE></TD></TR></TBODY></table></body></html></body></html>

[打印]