喵喵立體捲軸系列分享-(2)

 

喵喵立體捲軸系列分享-(2)   一般捲軸預覽     <div style="SCROLLBAR-ARROW-COLOR: #697840; SCROLLBAR-FACE-COLOR: #adb092; WIDTH: 250px; SCROLLBAR-DARKSHADOW-COLOR: #697840; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #697840; SCROLLBAR-SHADOW-COLOR: #697840; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #adb092; SCROLLBAR-3DLIGHT-COLOR: #697840">     是不是顯得比較死板呀?!   立體捲軸變化以及運用，參考範例如下~~   <div style="SCROLLBAR-ARROW-COLOR: #CCCCCC; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #666666; HEIGHT: 100px; SCROLLBAR-HIGHLIGHT-COLOR: #CCCCCC; SCROLLBAR-SHADOW-COLOR: #CCCCCC; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #666666">   應用技巧 : 以色碼按照順序分為7個色碼；如下範例~~  1為三角箭頭；  2、6為軸面跟軸軌；  3、7為左右外側邊線； 4、5為左右內側邊線；   <div style="SCROLLBAR-ARROW-COLOR: #1; SCROLLBAR-FACE-COLOR: #2; SCROLLBAR-DARKSHADOW-COLOR: #3; HEIGHT: 100px; SCROLLBAR-HIGHLIGHT-COLOR: #4; SCROLLBAR-SHADOW-COLOR: #5; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #6; SCROLLBAR-3DLIGHT-COLOR: #7"> 【立體感捲軸的變化技巧以及演練】 更改2、6(軸軌)底色為圖檔相融和顏色； 3、7(外側邊線)採較深色(或較淺)的顏色； 1(三角箭頭)、4、5(內側邊線) 採較淡(或較深-相容外側邊線)的顏色，效果極佳。 【貼語法步驟：】 在編輯文章時 在要放置捲軸的地方 輸入隨意數字記號(如 3333333333 ) 以作為尋找標記 然後點　觀看ＨＴＭＬ原始碼 在裡面找到　數字記號 3333333333 反白那一小段語法 貼上語法即可。 ＊注意貼上語法下面不要有空格喲＊ ＊捲軸還是要搭配框架底色跟邊線 互相融合輝映才完整、才好看。   喵喵立體捲軸系列分享-(2) 複製框內語法，更改捲軸高度（HEIGHT: 180px; ）即可。   預覽捲軸+捲軸語法-1   <div style="SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-FACE-COLOR: #454545; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #636363; SCROLLBAR-SHADOW-COLOR: #636363; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #454545; SCROLLBAR-3DLIGHT-COLOR: #000000"></div>     預覽捲軸+捲軸語法-2   <div style="SCROLLBAR-ARROW-COLOR: #b18cde; SCROLLBAR-FACE-COLOR: #3f0561; SCROLLBAR-DARKSHADOW-COLOR: #5f00d4; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #b18cde; SCROLLBAR-SHADOW-COLOR: #b18cde; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #3f0561; SCROLLBAR-3DLIGHT-COLOR: #5f00d4">     預覽捲軸+捲軸語法-3   <div style="SCROLLBAR-ARROW-COLOR: #9e826c; SCROLLBAR-FACE-COLOR: #4d2000; SCROLLBAR-DARKSHADOW-COLOR: #5c4433; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #9e826c; SCROLLBAR-SHADOW-COLOR: #9e826c; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #4d2000; SCROLLBAR-3DLIGHT-COLOR: #5c4433">     預覽捲軸+捲軸語法-4   <div style="SCROLLBAR-ARROW-COLOR: #368f4b; SCROLLBAR-FACE-COLOR: #0b3b1f; SCROLLBAR-DARKSHADOW-COLOR: #00210e; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #368f4b; SCROLLBAR-SHADOW-COLOR: #368f4b; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #0b3b1f; SCROLLBAR-3DLIGHT-COLOR: #00210e">     預覽捲軸+捲軸語法-5   <div style="SCROLLBAR-ARROW-COLOR: #b09879; SCROLLBAR-FACE-COLOR: #826c4f; SCROLLBAR-DARKSHADOW-COLOR: #634f34; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #b09879; SCROLLBAR-SHADOW-COLOR: #b09879; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #826c4f; SCROLLBAR-3DLIGHT-COLOR: #634f34">     預覽捲軸+捲軸語法-6   <div style="SCROLLBAR-ARROW-COLOR: #874c5b; SCROLLBAR-FACE-COLOR: #451824; SCROLLBAR-DARKSHADOW-COLOR: #29000b; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #874c5b; SCROLLBAR-SHADOW-COLOR: #874c5b; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #451824; SCROLLBAR-3DLIGHT-COLOR: #29000b">     預覽捲軸+捲軸語法-7   <div style="SCROLLBAR-ARROW-COLOR: #ffc2c2; SCROLLBAR-FACE-COLOR: #ffe0e0; SCROLLBAR-DARKSHADOW-COLOR: #ffc2c2; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #fff5f5; SCROLLBAR-SHADOW-COLOR: #fff5f5; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #ffe0e0; SCROLLBAR-3DLIGHT-COLOR: #ffc2c2">     **預覽捲軸+捲軸語法-8**   <div style="SCROLLBAR-ARROW-COLOR: #bccdd1; SCROLLBAR-FACE-COLOR: #e8eced; SCROLLBAR-DARKSHADOW-COLOR: #bccdd1; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #ccdee3; SCROLLBAR-SHADOW-COLOR: #ccdee3; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #dae1e3; SCROLLBAR-3DLIGHT-COLOR: #bccdd1">     預覽捲軸+捲軸語法-9   <div style="SCROLLBAR-ARROW-COLOR: #c98bc3; SCROLLBAR-FACE-COLOR: #edd3e8; SCROLLBAR-DARKSHADOW-COLOR: #c98bc3; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #f7edf6; SCROLLBAR-SHADOW-COLOR: #f7edf6; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #edd3e8; SCROLLBAR-3DLIGHT-COLOR: #c98bc3">     預覽捲軸+捲軸語法-10   <div style="SCROLLBAR-ARROW-COLOR: #806e78; SCROLLBAR-FACE-COLOR: #bda8ac; SCROLLBAR-DARKSHADOW-COLOR: #806e78; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #A8A0A7; SCROLLBAR-SHADOW-COLOR: #A8A0A7; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #b39fa3; SCROLLBAR-3DLIGHT-COLOR: #806e78">     預覽捲軸+捲軸語法-11   <div style="SCROLLBAR-ARROW-COLOR: #8b9943; SCROLLBAR-FACE-COLOR: #dadec5; SCROLLBAR-DARKSHADOW-COLOR: #8b9943; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #fbffe3; SCROLLBAR-SHADOW-COLOR: #fbffe3; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #dadec5; SCROLLBAR-3DLIGHT-COLOR: #8b9943">     預覽捲軸+捲軸語法-12   <div style="SCROLLBAR-ARROW-COLOR: #6f7049; SCROLLBAR-FACE-COLOR: #c9cca9; SCROLLBAR-DARKSHADOW-COLOR: #6f7049; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #b0ad8b; SCROLLBAR-SHADOW-COLOR: #b0ad8b; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #b0ad8b; SCROLLBAR-3DLIGHT-COLOR: #6f7049">     預覽捲軸+捲軸語法-13   <div style="SCROLLBAR-ARROW-COLOR: #b0ad8b; SCROLLBAR-FACE-COLOR: #e0dcd7; SCROLLBAR-DARKSHADOW-COLOR: #b0ad8b; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #d9d0c5; SCROLLBAR-SHADOW-COLOR: #d9d0c5; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #d9d0c5; SCROLLBAR-3DLIGHT-COLOR: #b0ad8b">     預覽捲軸+捲軸語法-14   <div style="SCROLLBAR-ARROW-COLOR: #91accf; SCROLLBAR-FACE-COLOR: #2c558a; SCROLLBAR-DARKSHADOW-COLOR: #6882a3; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #91accf; SCROLLBAR-SHADOW-COLOR: #91accf; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #2c558a; SCROLLBAR-3DLIGHT-COLOR: #6882a3">     預覽捲軸+捲軸語法-15   <div style="SCROLLBAR-ARROW-COLOR: #8edbed; SCROLLBAR-FACE-COLOR: #0d99bd; SCROLLBAR-DARKSHADOW-COLOR: #037694; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #8edbed; SCROLLBAR-SHADOW-COLOR: #8edbed; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #0d99bd; SCROLLBAR-3DLIGHT-COLOR: #037694">       以上捲軸不過是範例分享 喵喵還是希望大家自己製作 精緻又搭配圖文的捲軸 那將更相得益彰 圖文並茂喲