石頭製貼講座之三（邊框底圖和滾動圖片/字幕）

石頭製貼講座之三（邊框底圖和滾動圖片/字幕） 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>

[打印]