喵喵透明捲軸研習紀錄+文字加底圖+水漾圖分享(重編)

2010032314:09

 

 

1111111111數字記號(喵板型語法範例)111111111111
 
快點兩下
反白頭至尾的文字
 
 
 
 
 
貼上新編內容
 
 
111111111111數字記號1111111111111
 

/*喵板型語法範例-捲軸語法*/
<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #f5f5f5; SCROLLBAR-FACE-COLOR: #f5f5f5; MARGIN-TOP: 0px; WIDTH: 288px; SCROLLBAR-DARKSHADOW-COLOR: #f5f5f5; HEIGHT: 270px; SCROLLBAR-HIGHLIGHT-COLOR: #f5f5f5; MARGIN-LEFT: 240px; SCROLLBAR-SHADOW-COLOR: #f5f5f5; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #f5f5f5; SCROLLBAR-3DLIGHT-COLOR: #f5f5f5">


/*註解*/
<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #上下三角箭頭; SCROLLBAR-FACE-COLOR: #上下拉動軸面; MARGIN-TOP: 0px; WIDTH: 288px; SCROLLBAR-DARKSHADOW-COLOR: #右方立體邊; HEIGHT: 270px; SCROLLBAR-HIGHLIGHT-COLOR: #軸面左內邊; MARGIN-LEFT: 240px; SCROLLBAR-SHADOW-COLOR: #軸面右內邊; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #軸軌顏色; SCROLLBAR-3DLIGHT-COLOR: #左方立體邊">

 
 
 
22222222數字記號(如果您的版型或文章底色是白色底)222222222222
 
快點兩下
反白頭至尾的文字
 
 
 
 
 
 
貼上新編內容
 
 
2222222222數字記號22222222222
 

/*白底捲軸範例語法-因為我的底圖不是白底，所以會呈現不一樣的顏色效果*/
<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #ffffff; MARGIN-TOP: 0px; WIDTH: 288px; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 270px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; MARGIN-LEFT: 240px; SCROLLBAR-SHADOW-COLOR: #ffffff; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff">


/*註解*/
<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #上下三角箭頭; SCROLLBAR-FACE-COLOR: #上下拉動軸面; MARGIN-TOP: 0px; WIDTH: 288px; SCROLLBAR-DARKSHADOW-COLOR: #右方立體邊; HEIGHT: 270px; SCROLLBAR-HIGHLIGHT-COLOR: #軸面左內邊; MARGIN-LEFT: 240px; SCROLLBAR-SHADOW-COLOR: #軸面右內邊; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #軸軌顏色; SCROLLBAR-3DLIGHT-COLOR: #左方立體邊">

 
**只要搭配跟自己版型或文章底圖相容的顏色色碼，
讓捲軸顏色不會因為顏色的不同而禿出或呈現出來，
所以觀看起來就會像是透明的囉。
 
 
 
每一個不同顏色的版型所呈現出來的捲軸透明度都不一樣，因為雅虎已經不支援部分透明捲軸語法(FILTER: Chroma( Color = #軸面色彩); )，所以我們必須要靠自己版型的底圖顏色來掩蓋不搭調的捲軸顏色，so~各位引用回去或是要使用這一篇編輯框架的朋友們就必須要自己先更改自己捲軸的顏色囉。不改也沒有關係啦，只是旁邊捲軸的顏色可能就是不搭調的顏色囉!
 
要更改的方法其實很簡單，只要把捲軸的色碼更改為自己版型底圖的色碼即可。(另版型有外加底圖者，就只有請自行在色碼表裡搭配找出相容的底色囉，喵仔無法全部顧慮周全滴，拍謝啦!)
 
如果您的版型底圖或文章底圖為#000000(黑色)，您只要把捲軸裡面的色碼全部改為 #000000 就OK啦。
 
記得先點入 觀看HTML原始碼 在裡面更改捲軸的色碼喲。
 
~下面是詳細的說明 希望大家都可以輕易上手喲。~
 
 
/*喵板型語法範例-捲軸語法*/
<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #f5f5f5; SCROLLBAR-FACE-COLOR: #f5f5f5; MARGIN-TOP: 0px; WIDTH: 288px; SCROLLBAR-DARKSHADOW-COLOR: #f5f5f5; HEIGHT: 270px; SCROLLBAR-HIGHLIGHT-COLOR: #f5f5f5; MARGIN-LEFT: 240px; SCROLLBAR-SHADOW-COLOR: #f5f5f5; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #f5f5f5; SCROLLBAR-3DLIGHT-COLOR: #f5f5f5">
 
 
/*註解*/
<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #上下三角箭頭; SCROLLBAR-FACE-COLOR: #軸軌顏色; MARGIN-TOP: 調整文字內容靠上端的位置px; WIDTH: 整文字內容的顯示寬度px; SCROLLBAR-DARKSHADOW-COLOR: #右方立體邊; HEIGHT: 整文字內容的顯示高度px; SCROLLBAR-HIGHLIGHT-COLOR: #軸面左內邊; MARGIN-LEFT: 調整文字內容靠左側的位置px; SCROLLBAR-SHADOW-COLOR: #軸面右內邊; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #軸軌顏色; SCROLLBAR-3DLIGHT-COLOR: #左方立體邊">
 
 
/*秘訣*/
除了 SCROLLBAR-ARROW-COLOR: #上下三角箭頭; 的顏色可以另配色之外，其它顏色均使用自己版型底色的顏色即可將捲軸看起來透明化了。（當然如不想顯示三角箭頭的話，裡面捲軸色碼均可全部使用自己線上版型的底色即可，讓捲軸變成同樣顏色，觀看起來就像透明的捲軸囉）如喵仔的CSS自訂樣式裡的版型底圖範例為~
 
/*大標題圖背景重覆底背景設定(文章底色或背景不同者要自己另外搭配相容的捲軸顏色喲)*/
body {background:url(http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book238/12684642262.gif ) center top transparent no-repeat;}
html {background:url(http:// ) center top #BA243A:repeat;background-color:#FCB6C1}
 
底色即為FCB6C1，將捲軸其它顏色均設為版型底圖的顏色 FCB6C1  即可變透明囉。
 
 
 
333333數字記號33333333
 
快點兩下
反白頭至尾的文字
 
 
 
 
 
貼上新編的內容
 
33333數字記號333333
 

/*第三款捲軸範例語法*/
<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #7D7978; SCROLLBAR-FACE-COLOR: #45606e; MARGIN-TOP: 0px; WIDTH: 420px; SCROLLBAR-DARKSHADOW-COLOR: #4D4947; HEIGHT: 260px; SCROLLBAR-HIGHLIGHT-COLOR: #465d69; MARGIN-LEFT: 110px; SCROLLBAR-SHADOW-COLOR: #4D4947; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #465d69; SCROLLBAR-3DLIGHT-COLOR: #4D4947">

 
**圖片上下的數字記號 (1111111   22222...)是方便自己辨識，
自己要發表文章時 切記要反白上下的數字記號，
然後按 Delete 作刪除的動作喲。
 

 感謝 雲濤夢筆 美圖素材分享

 

   標題文字+底圖 


/*語法如下*/
<p align=center><font style="BACKGROUND: url(http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book313/12687981955m.gif)" size=5><font color=#c00000>標題文字</font></font></p>


/*註解*/
<p align=置中><font style="BACKGROUND: url(底圖網址)" size=文字大小><font color=#文字色碼>標題文字</font></font></p>

 

   前段文字連結名稱後段文字

/*語法如下*/
<p align=center><font style="BACKGROUND: url(http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book45/12386746145m.gif)" size=4><font color=#ff80bf>前段文字</font><a href="http://tw.myblog.yahoo.com/jw!fj.yHqqFERsqfZvZYR1VvKP8fQuz/article?mid=18842"><font color=#c00000>連結名稱</font></a><font color=#ff80bf>後段文字</font></font></p>


/*註解*/
<p align=置中><font style="BACKGROUND: url(底圖網址)" size=文字大小><font color=#前段文字色碼>前段文字</font><a href="連結網址"><font color=#連結名稱文字色碼>連結名稱</font></a><font color=#後段文字色碼>後段文字</font></font></p>

 
 

    *分享9個水漾圖*   

Make your own watery image at http://www.flash-gear.com/water/
 
上面是製作水漾圖的網址 自己點進去玩喲
 

因為雅虎不支援，所以只有自己點網址觀賞囉!

1.  http://five.flash-gear.com/water/wat.php?c=f&o=1&id=500604&k=30627388&s=30&w=524&h=447

2.  http://four.flash-gear.com/water/wat.php?c=f&o=1&id=460376&k=24830028&s=30&w=524&h=447

3.  http://two.flash-gear.com/water/wat.php?c=f&o=1&id=332073&k=71747196&s=30&w=524&h=447

4.  http://five.flash-gear.com/water/wat.php?c=f&o=1&id=500605&k=86266340&s=30&w=524&h=447

5.  http://five.flash-gear.com/water/wat.php?c=f&o=1&id=500606&k=22051030&s=30&w=524&h=447

6.  http://five.flash-gear.com/water/wat.php?c=f&o=1&id=500607&k=4267209&s=30&w=524&h=447

7.  http://three.flash-gear.com/water/wat.php?c=f&o=1&id=452533&k=40770596&s=30&w=524&h=447

8.  http://five.flash-gear.com/water/wat.php?c=f&o=1&id=500608&k=89417998&s=30&w=524&h=447

9.  http://two.flash-gear.com/water/wat.php?c=f&o=1&id=332074&k=48672886&s=30&w=524&h=447

 
 
 
上一篇

手繪美女圖框(67)

下一篇

零時主題曲-精靈創作詩

相關文章

我要留言