下面的一些代碼由於被轉載的次數太多了,無法找到原作者,在此謹表示感謝!
導航:
一、讓你的空間所有的鏈結在滑鼠移上去時都有按下效果
二、調節背景色的透明度
三、背景懸停代碼
四、顯示系統時間效果
五、在博客文章標題等處添加圖片
一、讓你的空間所有的鏈結在滑鼠移上去時都有按下效果
轉載自:flash特效網
在CSS表的空白處加入如下代碼:
a:hover {text-decoration:underline; position:relative; left:1px; top:1px; clip:rect( );} /*鏈結按鈕式下陷*/
二、調節背景色的透明度
在CSS表中找到
.modbr{background-color:#FFFFFF;line-height:1px}
換行後加入如下代碼 (透明度80%):
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
注:
代碼應用的式CSS中的Alpha濾鏡,這個濾鏡可以設置目標元素的透明度。還可以通過指定座標,從而實現各種不同範圍的透明度。具體語法如下:
{filter:alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}
具體參數含義如下:
“opacity”表示透明度調節,範圍在0-100,0表示完全透明,100表示完全不透明。
“finishopacity” 是一個可選參數,如果想要設置漸變的透明效果,就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
“style” 指定透明區域的形狀特徵:0 代表統一形狀,1 代表線形,2 代表放射狀,3 代表矩形
“startx” 漸變透明效果開始處的 X座標。
“starty” 漸變透明效果開始處的 Y座標。
“finishx” 漸變透明效果結束處的 X座標。
“finishy” 漸變透明效果結束處的 Y座標。
以上的參數可以選用,可以只設置一個opacity
如果設置成下面代碼,就表示背景式半透明的:
{filter:alpha(opacity=50)
另外這個參數目前只能用於背景色的設置,背景圖片無法設置爲半透明
三、背景懸停代碼
在CSS表的空白處加入如下代碼:
body {background-color: #ffffff;background-image: url(http://clubfile.chinaren.com/uploadfile/200603/214/FdBbX.jpg);background-position: top left;background-repeat: no-repeat;background-attachment: fixed;}
四、顯示系統時間效果
在CSS表的空白處加入如下代碼:
#tabline{margin-top:22px;right:-431px;line-height:8px; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=12&timezone=GMT+0800&ft=3&tr=y&negate=y) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}
注:可以調節代碼中如下變數的數值定義顯示時間的位置(top爲距頁面頂端的高度,right爲到頁面右側的距離):
margin-top:22px;right:-431px;
五、在博客文章標題等處添加圖片
在之前貼出的CSS說明中已經說明了#m_blog div.tit是Blog文章標題的代碼
所以我們只要把添加圖片的代碼添加在後面的{}中即可
添加代碼如下:
line-height:#數值px;——設置標題的高度,這裏即爲圖片的高度;
text-indent:#數值px;——設置標題的文本前面的空餘寬度,這裏即填圖片的寬度,爲了美觀起見,可以再多數值上可以多5、6px,因爲圖片和標題緊貼著可能不好看。當然這個主要還是看個人喜好了;
background:url(#圖片位址) no-repeat;——設置添加的圖片位址,“no-repeat”就是不重復,一定要有,不然圖片就會蓋滿整個標題欄了!
同理,其他模組也可以添加圖片,其代碼設置方法跟這個也是一樣的,如想加在留言處即在#m_comment div.item{}下設置上面參數即可。
到這裏查看一些基本的模組名
下面是一個文章標題添加圖片的實例,大家可以參照著自己設置:
#m_blog div.tit{font-size:14px;font-weight:bold;
line-height:90px;
text-indent:120px;
background:url(http://hiphotos.baidu.com/fableking/abpic/item/459fd6ca87470c46f21fe79d.jpg) no-repeat;}
大家只要把url後面()中的位址換成自己要換的圖片位址,然後把line-height和text-indent後面的數值換成該圖片的高和寬就可以了。
請先 登入 以發表留言。