/*如何設定+固定百度空間的背景*/
在body{}中加入
background-image:url(圖片地址) ; 定義背景圖片
background-repeat: no-repeat; 定義背景圖片不重復
background-position: center; 定義背景居中
background-attachment: fixed; 定義背景固定,不滾動參數fixed
/*背景設置*/
body{}中加入background:url(http://hi.baidu.com/0454ldk) repeat-x #FFFFFF
注:
repeat 背景圖像在縱向和橫向上平鋪
no-repeat 背景圖像不平鋪
repeat-x 背景圖像在橫向上平鋪
repeat-y 背景圖像在縱向平鋪
/*鼠標樣式設置*/
在body{} 中添加;CURSOR: url('http://webme.bokee.com/inc/mouse028.cur')}
a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse031.ani')
第一行是鼠標指針初始形態,第二行是鼠標指針碰到鏈接的形態
CSS鼠標樣式大全
/*半透明設置*/
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
/*解決回車換兩行的問題*/
Shift+回車
/*全能隱藏代碼*/
display:none
/*不停變換空間背景圖片*/
http://magic.qtutu.com/
參數
color:green 表示字體顏色。
font-size:14px 表示字體大小。
font-family:Georgia,黑體 表示英文字體和中文字體
border:1px 表示邊框的粗細。
solid green 表示邊框的顏色。
background-color:black 表示背景色。
/*最頂部加字方法!*/
#tabline{margin-top:-490px;right:0px;line-height:8px; background:url(圖片地址) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}
圖片上面打上你要的字~歡迎光臨http://hi.baidu.com/0454ldk
/*添加LOGO*/
#main {background:url(頂部LOGO) no-repeat 10px 0px;} /*10px 0px;距左 距頂部*/
#layout {width:980px;margin-left:0px;background:url(底部LOGO) no-repeat bottom 0px;padding-bottom:80px} /*margin-left:0px底部圖片距離最左邊長度;bottom 0px邊框大小;padding-bottom:80px主體模塊最下端距離底部圖片最頂端距離*/
/*添加小背景圖片*/
.stage{background:url(小背景圖片http://hi.baidu.com/0454ldk) repeat-y 0px 0px} /*0px 0px距左 距頂(建議為0)*/
/*空間整體寬度*/
#main{width:740px!important;text-align:center}或#main{width:80%!important}
/*版塊長度及間距*/
#layout td.c2t1{padding-left:55px;width:570px} /*最左版塊*/
#layout td.c2t2{width:60px} /*左右兩版塊間距*/
#layout td.c2t3{width:260px;padding-right:30px} /*第2豎列版塊信息*/
/*定義閱讀文章時 文章塊寬度 距左長度*/
.stagepad {width:570px;margin-left:44px;}
.stagepad a:link{text-decoration:none;font-weight:bold}
.stagepad a:visited{text-decoration:none;font-weight:bold}
/*文章虛線邊框*/
#m_blog div.cnt{color:#333333;line-height:20px;font-size:14px;border:1px dashed #090688;background:#Ffffff;PADDING: 10px;}
/
#m_blog div.cnt{color:#808080;line-height:20px;font-size:16px;border-top:2px dashed #1DC01D;border-bottom:2px dashed #1DC01D;border-left:2px dashed #1DC01D;border-right:2px dashed #1DC01D;PADDING-RIGHT: 10px; PADDING-LEFT: 10px;PADDING-TOP: 10px;PADDING-bottom: 10px;}
dotted: 點線
dashed : 虛線
double : 雙線邊框
groove : 3D凹槽
ridge : 菱形邊框
inset : 3D凹邊
outset : 3D凸邊
/*前景圖片透明設置*/
filter:alpha(opacity=90,finishopacity=100,style=0,)
/*播放器*/
#phx{FILTER: Alpha(Opacity=100, FinishOpacity=60, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)Invert(); WIDTH: 224px;HEIGHT:200px}
Invert(); 濾鏡效果 可以更換
/*不顯示播放器,不影響音樂的播放*/
添加#mod_bgmusic{display:none}
/*日志背景*/
#m_blog.modbox{background:url(圖片)}
或#m_blog div.cnt{background:url(圖片) repeat; /*圖片*/color:#666666;line-height:20px;font-size:14px}
/*滾動條*/
#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:1000px;
filter: chroma(color=#E100E1)}
/*去掉橫向滾動條*/
在body{}里加上overflow-x:hidden
/*禁止選擇 鼠標右鍵特效*/
#main{
background:url('javascript:
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
')}
document.oncontextmenu=new Function("event.returnValue=false;");禁止鼠標右鍵
document.onselectstart=new Function("event.returnValue=false;")
禁止選擇/*鼠標觸碰 按鈕下陷*/
a:hover{}中加入position:relative; left:2px; top:1px; clip:rect( )
/*彈出窗口*/
#comm_info 和#comm_info a 替換#comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("你要說的話");')}
#comm_info{}或#m_links div.item{}
添加
background:url(javascript:alert())歡迎光臨零點壹貮http://hi.baidu.com/0454ldk
/*文章在新窗口中打開*/
a:active { text: (target="_blank")}
/*屏蔽Rss鏈接,baidu圖片*/
#comm_info a {display:none}
/*標題背景*/
#header div.lc{} -左
#header div.rc{} -右
插入 background:url(http://***)
/*百度空間 進入后彈出對話框*/
去掉#comm_info div.line 把#comm_info a換成
#comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("歡迎光臨http://hi.baidu.com/0454ldk");')}
/*文章日期旁加小圖案*/
#m_blog div.date
{text-indent:1.5cm;background:url(這里要填上你自己選的小圖片的連接地址) 30% 0% no-repeat; /*背景圖片*/margin:5px 0 8px 0;color:#999999;
line-height:50px; /*調整行高*/}
/*標題欄主體加小圖案*/
模塊ID span.modtit{background:url(http://hi.baidu.com/0454ldk) no-repeat top left;font-size:0px;width:100%;margin-left:-18px;padding-top:3px}
/*常用插入時間圖片位置的代碼*/
圖片顯示位置——個人檔案照片下面:
#m_pro div.act{margin-top:5px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}
圖片顯示位置——文章列表 標題下面:
#m_blog div.tit{font-size:14px;font-weight:bold; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}
圖片顯示位置——文章列表 標題左面:
#m_blog div.tit{font-size:14px;font-weight:bold; line-height:24px; text-indent:120px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat}
圖片顯示位置——TAB導航欄:
#tabline{top:89px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 32px; margin-bottom: 6px}
圖片顯示位置——相冊下面:
#m_album div.image{text-align:center; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 45px; margin-bottom: 1px}
圖片顯示位置——每個友情鏈接下面:
#m_links div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px}
圖片顯示位置——每個最新評論下面:
#m_comment div.item{color:#000000;font-size:12px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}
圖片顯示位置——每個文章分類下面:
#m_artclg div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px}
圖片顯示位置——其他區域:
#comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}
其他樣式顯示http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=A
/*調整圖片位置*/
padding-bottom: 20px; margin-bottom: 5px; padding-bottom為距上高度,margin-bottom為距下高度。
/*調整TAB距離*/
在TAB{}內加入text-indent:30px
/*分割線*/
模塊ID div.line{margin-top:17px;line-height:17px;background:url(http://hi.baidu.com/0454ldk) repeat-x}
/*發光效果*/
{}中加入filter:glow (color= #299BE8,strength=2)
/*陰影效果字體陰影*/
{}中加入filter:DropShadow(Color=#000000:,OffX=2, OffY=3,Positive=1);或filter:shadow(Color=#000000:,OffX=2, OffY=3,Positive=1)
參數作用:
Color=陰影的顏色代碼
OffX=設置陰影與對象(文字或圖片)的橫向距離偏移
OffY=設置陰影與對象的豎向距離偏移
Positive=設置建立陰影的對象,true是為非透明像素建立陰影,false是為透明的像素建立陰影,一般不建議使用false
另外,如果添加陰影的地方已經有了filter的參數,例如設置透明度的filter:alpha(),只需把DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true)添加到alpha()的后面即可,這里不需要間隔,當中留空格可以,間隔將無效
例如在原來的filter:alpha(opacity=50);后面加上陰影效果代碼:
filter:alpha(opacity=50)DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true);
/*投影的代碼*/
filter:Shadow(Color=gray/*顏色*/,Direction=135/*方向*/)
/*文章標題背景*/
#m_blog div.tit{text-indent:1.5cm/*縮近*/;line-height:75px;/*增大行高,使背景圖片完全顯示*/font-size:16px;font-weight:bold;background:url(http://hi.baidu.com/0454ldk) no-repeat;/*標題背景圖片,不重復*/}
line-height:多少px; 設置標題的高度,其實這里的設置為圖片的高度就可以了
text-indent:多少px; 設置標題的文本前面空多少寬度,這里可以填圖片的寬度,為了美觀起見,可以再多+5、6px,因為圖片和標題貼著不好看,這個主要還是看個人感覺和喜好設置了
/*空間透明*/
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
/*其他模塊添加圖片*/
#comm_info div.line{margin-top:4px;line-height:8px;border-top:2px solid #ff3333; background:url(http://***.gif) no-repeat bottom; padding-bottom: 32px; margin-bottom: 32px}
/*隱藏其他模塊標題*/
#comm_info .modhead span{display:none}
/*個人檔案添加圖片*/
#m_pro div.image{}加入background:url(http://hi.baidu.com/0454ldk) no-repeat bottom;padding-bottom:100px
bottom讓圖片沉底
padding-bottom增加頭像模塊底下的寬度
padding-bottom數值一般設置為LOGO的高度值,LOGO的上邊與頭像的下邊距離0,加大padding-bottom的數值,LOGO的上邊與頭像的下邊距離亦加大
/*去除模塊背景即完全背景透明*/
刪除模塊background-color:……的屬性;加background:transparent即可
在header{}中加入
background:transparent 這個參數的作用是使完全背景透明,并刪除原來的屬性background:url(http://hi.baidu.com/0454ldk)
#header div.rc{}以及.stage{}與header{}同樣設置
/*其他模塊標題添加圖片*/
#comm_info span.modtit{color:#737373;text-indent:16px;background:url(http://hi.baidu.com/0454ldk)repeat-x;font-size:0px;width:100%;margin-left:-18px;padding-top:3px}
/*右下角彈出窗口*/
#main{
background:url('javascript:
var sunPop = window.createPopup();
var popTop=50;
function popmsg(msgstr){
var winstr="<table style=\"border:solid #A96D13 1px\" width=\"200\" height=\"150\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#88CFFF\" >";
winstr+="<tr><td height=\"30\"> </td></tr><tr><td align=\"center\"><table width=\"90%\" height=\"110\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
winstr+="<tr><td valign=\"top\" style=\"font-size:12px; color:#209C20; face:黑體\">"+msgstr+"</td></tr></table></td></tr></table>";
sunPop.document.body.innerHTML=winstr;
popshow();
}
function popshow(){
window.status=popTop;
if(popTop>1720){
clearTimeout(mytime);
sunPop.hide();
return;
}else if(popTop>1520&&popTop<1720){
sunPop.show(screen.width-250,screen.height,200,1720-popTop);
}else if(popTop>1500&&popTop<1520){
sunPop.show(screen.width-250,screen.height+(popTop-1720),200,150);
}else if(popTop<180){
sunPop.show(screen.width-250,screen.height,200,popTop);
}else if(popTop<220){
sunPop.show(screen.width-250,screen.height-popTop,200,150);
}
popTop+=10;
var mytime=setTimeout("popshow();",50);
}
popmsg("2006年12月1日<br>歡迎光臨零點壹貮http://hi.baidu.com/0454ldk。<br>你要說的話http://hi.baidu.com/0454ldk。<br>你要說的話http://hi.baidu.com/0454ldk~");
')
}
/*“發表評論”區域*/
#spBlogCmtor{background:url(圖片地址)} /* 姓名*/
#spBlogCmtURL{background:url(圖片地址) }/* 網址或郵箱*/
#spBlogCmtText{background:url(圖片地址) } /* 評論內容*/
#in_send div.tit{margin:10px 0 10px 0;color:#FFFFFF;font-size:14px;font-weight:bold}
設置“發表評論”區域上方的“發表評論”四個大字,其中color:#FFFFFF設置字的顏色,font-size設置字的大小,font-weight:hold設置讓這字體加粗,不加粗刪掉。
#in_send td{color:#FFFFFF}
設置“姓名”、“網址或郵箱”和“內容”字的顏色。
#spBlogCmtText {border: 1px solid #FFCCFF;background:#FFFFFF no-repeat top center; background-attachment: fixed}
設置評論框底色。background:#FFFFFF設置顏色,添加圖片則改為background:url(圖片),
圖片最佳尺寸是503*153,1px 表示評論邊框的寬度,#FFCCFF 表示評論邊框的顏色。
/*隱藏“查看該用戶在百度的”分類*/
加入#m_pro .basic a.nlk{display:none}代碼即可
/*隱藏“百度空間測試版”圖片*/
#m_comm_info img{display:none}
/*添加天氣預報*/
#m_mylink1 div.line{background:url(http://firetear.com/weather/weather.aspx?city=%u5BBF%u8FC1&style=1) no-repeat bottom;line-height:40px;margin-bottom: 10px;margin-top:5px;padding-bottom: 138px}
先編輯自定義模塊,鏈接地址為http://www.tq121.com.cn,然后更換為以上代碼,(注意:要把地址換在你所在地的地址,可以到 http://firetear.com/weather 網站里去找,只需把生成代碼里面SRC后面的地址替換以上地址即可)
/*更多文章居右*/
#m_blog div.more{margin:14px 0 16px 0;text-align:right}
/*在友情鏈接添加“發送消息”的鏈接*/
在友情鏈接里的鏈接地址內填上:http://msg.baidu.com/ms?ct=21&cm=1&tn=bmSendMessage&un=你的百度用戶名
這樣點擊該鏈接就可以給你發送消息,而這個鏈接另一個功能就是可以給自己發送消息。
/*改變你的按鈕和輸入欄的顏色及字體*/
input,select,textarea{color:green;font-size:14px;font-family:Tahoma,黑體;border:1px solid green;background-color:black}
textarea{overflow:hidden}
/*留言板添加圖片*/
#spBCmtText{border: 6px solid #000000 ;color:#ffffff;background:url(http://hi.baidu.com/0454ldk) no-repeat;overflow-y :scroll;height:150px}
圖片最佳尺寸是503*153,6px表示評論邊框的寬度,#000000 表示評論邊框的顏色。
/*百度空間添加QQ在線*/
鏈接地址http://wpa.qq.com/msgrd?V=1&Uin=號碼 QQ