喵喵透析捲軸語法研習紀錄分享~~

2010061703:54

 

 
 
/*橫式字+捲軸隱藏語法--範例*/ 
 




這是 城邦 語法前輩 寒峰 隱藏捲軸語法 :
 
 
<div style="OVERFLOW-Y: auto; SCROLLBAR-FACE-COLOR: #cccbd9; FILTER: chroma(color=#cccbd9); OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #cccbd9; SCROLLBAR-SHADOW-COLOR: #cccbd9; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: purple; SCROLLBAR-TRACK-COLOR: #cccbd9; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 400px"><pre><p style="MARGIN-LEFT: 30px"><font style="LINE-HEIGHT: 25px" face="新明細體" color="#008000" size="3">


 
文章


這是橫式字+X軸隱藏語法的語法


三角型顏色改色碼purple地方即可


自行打上色碼或英文字皆可


</font></p></pre></div>
 

 /*橫式字+捲軸隱藏語法--語法註解*/

<div
style="OVERFLOW-Y: auto; /*瀏覽器判斷區塊是否超過設定的寬高，而出現捲軸*/
SCROLLBAR-FACE-COLOR: #cccbd9; /*軸面*/
FILTER: chroma(color=#cccbd9); /*透明-過濾色度*/
OVERFLOW-X: hidden; /*定義X 水平捲軸隱藏不出現*/
SCROLLBAR-HIGHLIGHT-COLOR: #cccbd9; /*軸面左內邊*/
SCROLLBAR-SHADOW-COLOR: #cccbd9; /*軸面右內邊*/
SCROLLBAR-3DLIGHT-COLOR: #000000; /*左方立體邊*/
SCROLLBAR-ARROW-COLOR: purple;  /*上下三角箭頭*/
SCROLLBAR-TRACK-COLOR: #cccbd9; /*軸軌顏色*/
SCROLLBAR-DARKSHADOW-COLOR: #000000; /*右方立體邊*/
HEIGHT: 400px"><pre> /*總高度*/
<p style="MARGIN-LEFT: 30px"> /*調整文字內容靠左側的位置*/
<font style="LINE-HEIGHT: 25px" /*行高*/
face="新明細體" color="#008000" size="3"> /*字型 文字顏色*/

 

 /*直式字文章--範例*/ 

 
 


直式字文章


這是直式字+y軸隱藏語法的語法


三角型變色改purple的地方..


自行打上色碼或英文字皆可


</font></pre></div>

 
 
 
<div style="OVERFLOW-Y: hidden; SCROLLBAR-FACE-COLOR: #cccbd9; FILTER: chroma(color=#cccbd9); OVERFLOW-X: auto; SCROLLBAR-HIGHLIGHT-COLOR: #cccbd9; WIDTH: 550px; SCROLLBAR-SHADOW-COLOR: #cccbd9; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: purple; SCROLLBAR-TRACK-COLOR: #cccbd9; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 400px"><pre> <font style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px; WIDTH: 500px; WRITING-MODE: tb-rl; HEIGHT: 450px" COLOR=PINK SIZE=3>








 


直式字文章


這是直式字+y軸隱藏語法的語法


三角型變色改purple的地方..


自行打上色碼或英文字皆可


</font></pre></div>


你成功就打上前輩 "寒峰隱藏語法"就行了


 







 
<div style="OVERFLOW-Y: hidden; SCROLLBAR-FACE-COLOR: #cccbd9; FILTER: chroma(color=#cccbd9); OVERFLOW-X: auto; SCROLLBAR-HIGHLIGHT-COLOR: #cccbd9; WIDTH: 550px; SCROLLBAR-SHADOW-COLOR: #cccbd9; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: purple; SCROLLBAR-TRACK-COLOR: #cccbd9; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 400px"><pre> <font style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px; WIDTH: 500px; WRITING-MODE: tb-rl; HEIGHT: 450px" COLOR=PINK SIZE=3>
 
 

 /*直式字文章--語法註解*/


<div style="OVERFLOW-Y: hidden;  /*定義Y 垂直捲軸隱藏不出現*/
SCROLLBAR-FACE-COLOR: #cccbd9;  /*軸面*/
FILTER: chroma(color=#cccbd9);  /*透明-過濾色度*/
OVERFLOW-X: auto;  /*定義X 水平捲軸自動*/
SCROLLBAR-HIGHLIGHT-COLOR: #cccbd9;  /*軸面左內邊*/
WIDTH: 550px;  /*寬度*/
SCROLLBAR-SHADOW-COLOR: #cccbd9;  /*軸面右內邊*/
SCROLLBAR-3DLIGHT-COLOR: #000000;  /*左方立體邊*/
SCROLLBAR-ARROW-COLOR: purple;  /*上下三角箭頭*/
SCROLLBAR-TRACK-COLOR: #cccbd9;  /*軸軌顏色*/
SCROLLBAR-DARKSHADOW-COLOR: #000000;  /*右方立體邊*/
HEIGHT: 400px"><pre> /*高度*/
<font style="MARGIN-TOP: 0px;   /*調整起始文字內容高度的距離*/
MARGIN-LEFT: 0px;   /*調整文字內容靠左側的位置*/
WIDTH: 500px;  /*寬度*/
WRITING-MODE: tb-rl; /*練習模式*/
HEIGHT: 450px"  /*高度*/
COLOR=PINK  /*顏色=粉紅色*/
SIZE=3> /*文字大小*/

~~喵喵使用範例捲軸語法(有加上底圖)~~





輸入文字
 

~~喵喵範例捲軸語法(有加上底圖)~~

<div align=center></div>
<div align=center>
<table style="FILTER: Alpha(opacity=90); WIDTH: 450px; HEIGHT: 300px" cellSpacing=0 cellPadding=0 background=http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book9/12618065649216t.gif>
<tbody>
<tr>
<td width="100%">
<div style="SCROLLBAR-ARROW-COLOR: #000000; FILTER: chroma(color=#ffffff); SCROLLBAR-FACE-COLOR: #ffffff; OVERFLOW-X: hidden; OVERFLOW-Y: auto; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff"><pre><p style="MARGIN-LEFT: 3px"><font style="LINE-HEIGHT: 3px" color=#008000 face=新明細體>
<div align=center><font face=標楷體></font><font color=#ffffff></font></div></font>
<div align=center><div class=msgcontent align=center><div class=msgcontent align=center><font size=4><strong><div align=center><strong><font size=4><font color=#ffffbf><span style="FONT-FAMILY: 新細明體; COLOR: purple">輸入文字</span></font></font></strong></div></strong></font></div></div></div></pre></div>
<div></div></td></tr></tbody></table></div>
<div></div>

 

*附註*(直式字文章-直式游標)

*(長長的語法必須另外包框 否則無法完全顯示)

~包框參考工具如下~

開啟  可視化編輯器   按下面的 HTML  貼上下面的表格語法~

<div style="border: 3px solid #000000; padding: 5px; overflow: auto;
width: 300px; height: 90px; ">

再按下面的 Design

/*淺談捲軸*/

資料來源 : 壬子吟-淺談捲軸CSS
http://tw.myblog.yahoo.com/jw!i7UbbeqBFRuOXvfWphrfL0NQ/article?mid=4738


捲軸的各項CSS參數:

SCROLLBAR-FACE-COLOR:#000; /*上下捲動之軸面*/
 SCROLLBAR-TRACK-COLOR:#000; /*軸軌顏色*/
 SCROLLBAR-ARROW-COLOR:#FFF; /*上下三角箭頭*/
 SCROLLBAR-HIGHLIGHT-COLOR:#000; /*軸面左內邊*/
 SCROLLBAR-3DLIGHT-COLOR:#000; /*左方立體邊*/
 SCROLLBAR-SHADOW-COLOR:#000; /*軸面右內邊*/
 SCROLLBAR-DARKSHADOW-COLOR:#000; /*右方立體邊*/


還有一個比較少被用到:
SCROLLBAR-BASE-COLOR(整體色彩)


/*透明捲軸-只適用於IE瀏覽器*/
FILTER: Chroma( Color = #透明色碼);

透明捲軸語法適用於背景非單色時，例如你的背景是一張圖片，那麼加上透明化的參數，就會更美觀，而透明的顏色只要設為白色(#FFFFFF)即可，但若你的版面中在同一個區塊有一些已設為白色的文字或背景，那麼在加上捲軸透明色時，也會把一些設為白色的文字設定或底色去除!


捲軸的ＣＳＳ語法要貼在哪裡？

輸入文字的表單或基本的HTML{ }、BODY{ }都可以貼上捲軸的語法，
另外若使用在部落格或網誌，
可以依網誌所設定的標簽自定捲軸，
例如在無名網誌中的連結列#links{ }及文章區塊#content{ }，
可以將捲軸的CSS語法貼在這二個標簽之中，就可以顯示效果了。


另外再補充捲軸的其他語法，可以與上述的ＣＳＳ並用:
OVERFLOW 設定捲軸出現的設定值，以下列出較常用的語法:


OVERFLOW : Hidden; 　   不出現捲軸

OVERFLOW : Auto; 　     瀏覽器判斷區塊是否超過設定的寬高，而出現捲軸

OVERFLOW : Scroll; 　   強迫出現捲軸，無論是否超過預設的寬高

Hidden及Scroll 　       也可以各別設定 直捲軸Y 或 橫捲軸X

OVERFLOW-x : Hidden; 　 定義X 水平捲軸隱藏不出現

OVERFLOW-y : Hidden; 　 定義Y 垂直捲軸隱藏不出現

OVERFLOW-x : Scroll; 　 強迫X 水平捲軸出現

OVERFLOW-y : Scroll; 　 強迫Y 垂直捲軸出現


提供大家二個捲軸製造機，可以不用費心的自訂色碼囉！

捲軸製造機１http://yagin92.googlepages.com/15.htm

捲軸製造機２http://cdh.idv.tw/cdh/no04.htm

希望大家都有美美的捲軸喲！

 

**多謝 壬子吟 跟 寒峰 兩位達人大愛的分享**

喵喵整理分享-多謝阿不葵葵跟葉子資訊分享

 
 
 

ღ引用請整篇引用ღ
ღ也請帶走LOGOღ
ღ喵喵感謝您ღ

 
 
 
上一篇

天使的翅膀+精靈小詩

下一篇

＊＊＊ 雨天除臭小撇步　家中遠離惡臭 ＊＊＊

相關文章

我要留言