/*直式字文章--語法註解*/
<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
希望大家都有美美的捲軸喲！
**多謝 壬子吟 跟 寒峰 兩位達人大愛的分享**
喵喵整理分享-多謝阿不葵葵跟葉子資訊分享
留言列表
留言列表
本站地圖導覽 (1)