【改編】各模塊添加滾動條實例 + 參數詳解
作者:眾網友+王士偉
出處:緣定滄桑居
在“友情鏈接”處添加滾動條只需下面一條代碼即可:
#m_links{overflow-y:auto;height:250px}
不過,加一些參數可以讓滾動條更有個性,和頁面搭配得更完美。下面就是我的頁面各種滾動條的詳細代碼,大家可以參照著修改:
文章列表的滾動條:
#m_blog{scrollbar-face-color: #E100E1;
scrollbar-shadow-color: maroon;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: #E100E1;
scrollbar-darkshadow-color:#E100E1;
scrollbar-arrow-color:#E100E1;
scrollbar-base-color: #E100E1;
scrollbar-track-color: #E100E1;
overflow-y:auto;height:1194px;
filter: chroma(color=#E100E1);} /*文章列表的滾動條*/
友情鏈接的滾動條:
#m_links{scrollbar-face-color: #E100E1;
scrollbar-shadow-color: maroon;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: #E100E1;
scrollbar-darkshadow-color:#E100E1;
scrollbar-arrow-color:#E100E1;
scrollbar-base-color: #E100E1;
scrollbar-track-color: #E100E1;
overflow-y:auto;height:823px;
filter: chroma(color=#E100E1);} /*友情鏈接的滾動條*/
文章分類的滾動條:
#m_artclg{scrollbar-face-color: #E100E1;
scrollbar-shadow-color: maroon;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: #E100E1;
scrollbar-darkshadow-color:#E100E1;
scrollbar-arrow-color:#E100E1;
scrollbar-base-color: #E100E1;
scrollbar-track-color: #E100E1;
overflow-y:auto;height:250px;
filter: chroma(color=#E100E1);} /*文章分類的滾動條*/
最新評論的滾動條:
#m_comment{scrollbar-face-color: #E100E1;
scrollbar-shadow-color: maroon;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: #E100E1;
scrollbar-darkshadow-color:#E100E1;
scrollbar-arrow-color:#E100E1;
scrollbar-base-color: #E100E1;
scrollbar-track-color: #E100E1;
overflow-y:auto;height:458px;
filter: chroma(color=#E100E1);} /*最新評論的滾動條*/
參數說明:
1、overflow-y : 設置當對象的內容超過其指定高度時如何管理內容;overflow-x : 設置當對象的內容超過其指定寬度時如何管理內容。
參數:
visible:擴大面積以顯示所有內容
auto:僅當內容超出限定值時添加滾動條
hidden:總是隱藏滾動條
scroll:總是顯示滾動條
2、height : 設置滾動條的高度(修改其后數值即可)。
3、滾動條顏色參數設置:
scrollbar-3d-light-color 設置或檢索滾動條亮邊框顏色
scrollbar-highlight-color 設置或檢索滾動條3D界面的亮邊(ThreedHighlight)顏色
scrollbar-face-color 設置或檢索滾動條3D表面(ThreedFace)的顏色
scrollbar-arrow-color 設置或檢索滾動條方向箭頭的顏色
scrollbar-shadow-color 設置或檢索滾動條3D界面的暗邊(ThreedShadow)顏色
scrollbar-dark-shadow-color 設置或檢索滾動條暗邊框(ThreedDarkShadow)顏色
scrollbar-base-color 設置或檢索滾動條基準顏色
空間模塊巧移動 + 文字快速插鏈接
一、首先說說空間模塊巧移動:
改變空間主頁各模塊的排布位置可以在空間中依次點擊:設置-高級設置-自定義模板-開始自定義
然后鼠標拖動各個欄目的標題處,移動到你想要的位置,松手即可。
但是如果你曾經把一個模塊拖動到“文章列表”下面,而后來發表了許多文章,想把下面的那個模塊拖回來是就會發現,無法移動到上面。
其實有個簡單的方法:
先到下面鼠標左鍵按住想要拖動的模塊的標題欄,接著按鍵盤上的“Pg Up”(上頁)鍵,就會發現頁面向上翻了,而模塊還在鼠標指針上。
按幾次達到想要的位置后,松開鼠標左鍵,該模塊就會移到你想要的地方去了^_^
二、然后我們說說文章快速插鏈接:
我們在文章中經常會遇到插入超鏈接的情況,直接貼網址雖然也可以自動轉換為超鏈接,但是我覺得就影響了文章的美觀。
所以我比較喜歡用文字鏈接,但是每次都用鼠標點上面的設置鏈接按鈕也未免太慢了……
用過微軟FRONT PAGE的朋友應該知道,該軟件插入超鏈接是有快捷鍵的,我在空間里測試里一下,的確可以用!
所以寫日志時想給文字加超鏈接,先將鏈接指向的網址復制一下,然后選中想要加的文字,最后按快捷鍵“CTRL+K”——在彈出的提示框中粘貼剛復制的地址,確定即可。
|
|
|
|
|
|
|
|
2 |
|
|
其實模塊拖動還有個更好的技巧:
1, 依次點擊空間的:設置-高級設置-自定義模板-開始自定義—內容模塊
2, 把所有的模塊都取消,確定
3, 再把你要的模塊都添加回來,確定
4, 現在所有的模塊里都是空的(只是顯示為空,你的文章等其實都在),要拖動很方便的。 |
|
|
|
|
|
|
|
|
|
|
對于CTRL+K插入超鏈接的方式,只有在IE瀏覽器下支持,其它瀏覽器(例如:firefox、maxthon)不支持。 |
|
2 |
常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
 |
|
|
|
|
3 |
回復:【原創】常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
 |
|
|
|
|
4 |
回復:【原創】常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
 |
|
|
|
|
5 |
回復:【原創】常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
|
|
|
|
|
6 |
回復:【原創】常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
 |
|
|
|
|
7 |
回復:【原創】常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
 |
|
|
|
|
8 |
回復:【原創】常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
 |
|
|
|
|
9 |
回復:【原創】常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
 |
|
|
|
|
10 |
回復:【原創】常用插入圖片位置的代碼及效果圖 |
|
|
|
貼子相關圖片:
 |
|