美化部落格：琳達教學捲軸CSS
常有很多人問琳達，該如何美化自己所想要的版型
對於語法是什麼??CSS又是什麼??
之前琳達較不著重語法上的教學，反倒是製圖教得還蠻多的
現在開始，對於想學習版型自訂樣式的好友們
一天學一點，慢慢的修正，你也可以自製美美的版型喔~
若在引用時出現888，別緊張....按照步驟來
請先複製文章
按引用在文章內容先打上123打上文章標題及文章分類在下方選擇隠藏文章按立即發表
之後在該篇文章按編輯將剛才複製的文章內容貼上選擇公開文章按立即發表就可以囉~
★═╮請您以【引用】的方式帶走它╭═★★琳達教你如何引用BLOG文章★
★═╮請全文轉載；帶走琳達的LOGO╭═★
★═╮若自行更改文章內容或移除LOGO一律列黑╭═★
★想看更多，請至★琳達教學★ 喲~
★本站文章巳申請註作權，請尊重他人正確引用
首先先瞭解如何修改自訂樣式的路徑
登入帳號→按管理部落格→面板設定→自訂樣式
在每一次的修正CSS時，琳達建議先複製原本的語法，貼在記事本儲存，再從記事本裡做修正，進而複製到自訂樣式→按清除→再貼上你所修正的CSS
這樣有個好處，因為對於新手來說，往往一個不對，將會造成版型位置不對，或是語法有重覆，造成語法失效....
在整個版型面來說，奇摩所提供的樣板裡是不包括捲軸的
若你想增加捲軸的話，只要複製捲軸語法，貼在自訂樣式的最下方就可以嚕!!
捲軸語法如下
| 捲軸樣式 |
奇摩部落格捲軸語法 |
|
|
/*Reel色碼設定*/
html{SCROLLBAR-ARROW-COLOR: #fc00d8;
SCROLLBAR-FACE-COLOR: #fcb4d8;
SCROLLBAR-DARKSHADOW-COLOR: #fcd8d8;
SCROLLBAR-HIGHLIGHT-COLOR: #fcfcfc;
SCROLLBAR-SHADOW-COLOR: #fcfcfc;
SCROLLBAR-TRACK-COLOR: #fcb4d8;
SCROLLBAR-3DLIGHT-COLOR: #fc6cd8;} |
說明：在每次使用捲軸語法時，祗要更改色碼就可以了 例如： #fc00d8這個就是色碼囉~ TRACK 軸軌顏色 FACE 軸面顏色 HIGHLIGHT 軸面左角邊顏色(內框) SHADOW 軸面右角邊顏色(內框) 3DLIGHT 左立體邊顏色(外框) DARKSHADOW 右立體邊顏色(外框) ARROW 箭頭顏色 琳達在此也分享一些捲軸產生器的網站，提供給您做參考 ۞捲軸顏色生成器۞۞摩尼CSS捲軸產生器۞۞新一代捲軸產生器۞۞捲軸變色產生器۞۞日本「Blog Parts」۞
另外；琳達也順便分享無名網誌的捲軸語法 若有剛好喜歡的捲軸顏色，就直接複製語法
| 捲軸樣式 |
無名網誌捲軸語法 |
|
|
BODY
{
SCROLLBAR-ARROW-COLOR: #0048fc;
SCROLLBAR-FACE-COLOR: #0090fc;
SCROLLBAR-DARKSHADOW-COLOR: #006cfc;
SCROLLBAR-BASE-COLOR: #00d8fc;
SCROLLBAR-HIGHLIGHT-COLOR: #24fcfc;
SCROLLBAR-SHADOW-COLOR: #24fcfc;
SCROLLBAR-TRACK-COLOR: #00b4fc;
SCROLLBAR-3DLIGHT-COLOR: #006cfc
} |
|
|
BODY
{
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #333333;
SCROLLBAR-BASE-COLOR: #666666;
SCROLLBAR-HIGHLIGHT-COLOR: #999999;
SCROLLBAR-SHADOW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #333333
} |
|
|
BODY
{
SCROLLBAR-ARROW-COLOR: #fc00b4;
SCROLLBAR-FACE-COLOR: #fc48b4;
SCROLLBAR-DARKSHADOW-COLOR: #fc00b4;
SCROLLBAR-BASE-COLOR: #fcb4b4;
SCROLLBAR-HIGHLIGHT-COLOR: #fcfcfc;
SCROLLBAR-SHADOW-COLOR: #fcfcfc;
SCROLLBAR-TRACK-COLOR: #fcfcfc;
SCROLLBAR-3DLIGHT-COLOR: #fc00b4
} |
|
|
BODY
{
SCROLLBAR-ARROW-COLOR: #fcfc24;
SCROLLBAR-FACE-COLOR: #90d824;
SCROLLBAR-DARKSHADOW-COLOR: #90fc00;
SCROLLBAR-HIGHLIGHT-COLOR: #fcfc00;
SCROLLBAR-SHADOW-COLOR: #489000;
SCROLLBAR-TRACK-COLOR: #d8fcd8;
SCROLLBAR-3DLIGHT-COLOR: #fcfc00
} |
左右兩側欄位捲軸語法，貼於自訂樣式CSS最下方
/*二度空間提供語法文章分類--最新回應--最新文章--捲軸內容高度--內容超出區塊自動由瀏覽器決定-相對定位*/
#ymodfolder .mbd, #ymodnewcomt .mbd, #ymodnewart .mbd {HEIGHT:250px;OVERFLOW:auto;position:relative;} |
說明：感謝二度空間的分享，讓很多人受用
HEIGHT：是指欄位捲軸的高度
250px：是指高度的尺寸，數字愈小，欄位高度就愈小
內文章框內，捲軸語法；文章框架加捲軸(粉紅)
說明：此語法是在發表文章時，先貼上文章框，打開口觀看HTML原始碼，將此捲軸貼至在〝文字貼於此〞的字樣；再取消觀看HTML原始碼，將你所要發表的文章內容貼在〝文章寫入位置〞即可按確定。
以上所有捲軸的教學部份就介紹到此，若還有疑問，請至文章下方回應給我喲!
大方的分享給你；也請你別偷走了我的辛勞
善加利用〝引用〞按鈕，以表對琳達的鼓勵喔~
此篇文章由http://tw.myblog.yahoo.com/linda590902/整理教學
|
|
|
|
留言列表
健康 (3)
