百度空间CSS代码精选

2008年4 月16日 / 网站源码 / 没有评论 / 876次

透明的背景音乐播放器
你是否觉得背景音乐播器太大,不透明,修改方法很简单:

在CSS代码最下面加上:#phx{FILTER: Alpha(Opacity=100, FinishOpacity=25, Style=2, StartX=20,    StartY=100, FinishX=0, FinishY=0); WIDTH: 225px; HEIGHT: 32px}
2:更改你空间的鼠标式样

body{background:url(http://hiphotos.baidu.com/lizhaohuilx/pic/item/a5dc213be61439eb15cecb8f.jpg) ;background-attachment: fixed;CURSOR: url('http://webme.bokee.com/inc/mouse019.ani')}a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse019.ani')}

在CSS编辑情况下,找到我标注的蓝色部分,第一段蓝色部分URL的代码是空间鼠标式样, 第二段蓝色部分则是点击内容时变化的鼠标式样。到下面的地址里找一个自己喜欢的鼠标式样更改即可。

鼠标式样地址:

http://myok.blogchina.com/3429184.html

3:设置透明背景图

1.进入你的空间----|设置|----|模板设置|-----自定义模版CSS可以让您: • 直接编辑CSS文件,实现个性化效果----|编辑|

2.删除开头处的4句语句:

body{background-color:#FFFFFF}
#header{height:89px;background:#CDF991}
#header div.lc{}
#header div.rc{background:url(http://img.baidu.com/hi/temp9/hdr.jpg) no-repeat top right}

3.删除第21行处的这条语句:

.stage{background:#DFFFB2}

4.在开头位置复制并粘贴以下语句:

body {background:url(http://hiphotos.baidu.com/moxinxi/pic/item/66a2ccfc10df9c82b801a029.jpg) repeat fixed!important}

#m_pro{background:transparent}

#m_album{background:transparent}

#m_blog{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

#header{height:89px}

#m_links{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

3:IP地址显示

添加代码到“其它”模块中:
找到 #comm_info div.line段(如果不是特别追求代码完美,可以直接将下面代码加到CSS表末尾即可),改为:
#comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(http://www.ip.cn/s.php) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}

注1:可以调节代码中如下变量的数值定义显示时间的位置(top为距页面顶端的高度,right为到页面右侧的距离):
margin-top:1px;right:-431px;

4:电子时钟显示

代码是添加到“个人档案”模块中
#m_pro div.act{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=A) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}

复制下面的网址替换上面网址可替换其它式样
'http://escati.linkopp.net/cgi-bin/clock.cgi?prgb=00ffff&timezone=GMT+0800' border='0' width='200' height='30'
http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=B
http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=C
http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=D
http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=E
http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500

5:增加天气预报的方法

1:新建自定义模块,记住模板的标号,本站选用的为模块2,点击上面的保存。
2:返回主页进行模块编辑,模块名称取为天气预报,链接名称为:天气预报,链接地址为:http://www.tq121.com.cn/ 操作完成后返回。
3:进入CSS代码编辑,找到刚才自定义模块的代码,如本站为#m_mylink2,将四段以此开头的代码换为以下代码:
#m_mylink2 div.item a{color:#FFFFFF;font-size:15px;text-align:center;font-family:隶书}
#m_mylink2 div.item a:visited{color:#FFFFFF;font-family:隶书}
#m_mylink2 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}

以上操作完成就算基本大功告成了,(注意:要把第四行代码url后面的地址换在你所在地的地址,具体可以到   http://firetear.com/weather/ 网站里去找,你只需把生成代码里面SRC后后面的地址打复制过来替换以上地址就可以)

6:CSS内容及几个主要部分的设置方式

CSS内容及几个主要部分的设置方式

空间背景颜色/鼠标设置区域

如果要设置特殊风格的鼠标,需要在代码文件的第一行加上:
a:hover {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/187.ani')}
body {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/1547.ani')}{background-color:#FFFFFF}

第一行括号内的链接是点到链接时的鼠标状态,第二行括号内的链接是正常的鼠标状态,第二行后边的background-color后边的颜色代码是指整个空间的背景颜色。六位颜色代码可以在这里找到。

如果不需要设置特殊鼠标,那么这一部分只保留“body {background-color:#颜色代码}”就可以了。

空间名称/标题图片设置区域

#header{height:300px;background:url(……)}
这是空间标题栏的主体部分,{}内的文字解释如下:
“height”指标题栏的高度,这个要与你放在标题栏的图片高度相同;后边的括号内是你要做标题的图片的链接,宽度为1024px的图片比较合适,图片高度可以根据自己的喜好决定。

#header div.lc{}
#header div.rc{}
如果想在标题的左右两边放置不同的图片(参见小小的空间),就在第一行的{}内加上左边的图片链接,格式为{background:url(……) no-repeat left}。第二行的{}内加上右边图片的链接,格式为{background:url(……) no-repeat right}。否则{}内留空就可以。

#header div.tit{top:30px;left:20px;line-height:22px;font-size:30px;font-family:隶书}
这里要设置的是空间名称的位置(top后边的数字是文字离空间标题栏上边界的距离,left后边的数字是离左边界的距离);大小(font-size后边的数字);字体(font-family后边的文字)。

#header div.tit a.titlink{color:#......;text-decoration:none}
#header div.tit a.titlink:visited{color:#......;text-decoration:none}
这两行应该是设置空间名称文字的颜色,但是我搞不清楚2行有什么区别,所以索性都设成一样的好了。如果想要把文字设成设成黑体或下划线,就把text-decoration:后边的none相应地改成bold或underline。

#header div.desc{top:60px;left:20px;color:#......;font-size:13px}
这行是设置空间简介(空间名称下边那行小标题)的位置、大小和字体的,设置方法同空间名称的设置。

#tabline{top:415px;background-color:#......}
这个是指TAB菜单栏(主页/博客/相册/好友/设置那一行)下边的分隔线的位置和颜色,top后边的数字是指分割线离空间标题栏上边界的距离,这个数字要根据标题栏的高度和菜单的位置(是与图片重叠或位于图片下方)来决定。

#tab{top:390px}
这个是指TAB菜单栏的位置,top后边的数字是指距空间标题栏上边界的距离。

#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:2px;line-height:20px;background-color:#......;color: #……;font-size:14px;font-weight:bold;}
这一行是指TAB菜单被选中后的状态,文字的位置,文字后边背景的颜色,文字颜色,字号等等。

#tab span{color:#F93A60;font-size:14px}
这个是指TAB菜单中间的分隔符(就是那条竖线)的颜色和大小。

#tab a:link{color:#......;text-decoration:none;font-size:14px}
这一行是指TAB菜单未被选中时的状态,文字颜色,其它定义,字号。

#tab2部分是TAB菜单下方的第二TAB菜单栏(比如“设置”下方的“基本选项”“模板设置”这一栏)的设置,设置方法同上。

.stage{background-color:#......}
这个是空间内容区域(TAB菜单栏以下直到空间底部)的背景颜色/图片设置,不想设置也可以把{ }留空。

博客文章标题/文字设置区域

#m_blog div.tit{font-size:14px;font-weight:bold;line-height:50px;text-indent:60px}
博客文章标题栏的设置,line-height后边的数字是用来定义标题栏高度的,text-indent后边的数字是指标题文字向右缩进的距离,如不需 要缩进可设为0。如果想在每篇文章的标题前加上图片,可以在{}内的结尾处加上“background:url(图片链接) no-repeat”,然后按照加入的图片尺寸相应调整标题栏高度和文字缩进处的数值。QQ里的那些可爱的动画表情图标都可以拿来用,另存后上传到百度空 间的相册就可以啦。

#m_blog div.tit a{color:#......;font-size:14px;font-weight:bold}
博客文章标题链接的状态设置。

#m_blog div.tit a:visited{color:#047304}
博客文章标题被选中后的状态设置。

#m_blog div.date{margin:5px 0 8px 0;color:#666666;text-align:right}
博客文章日期的设置,margin指距标题栏的距离,text-align指日期的位置(居左居右或居中)。

#m_blog div.cnt{color:#666666;line-height:20px;font-size:14px}
博客文章内容设置:文字颜色,行距,字号。

#m_blog div.more a{color:#047304;font-size:14px}
“阅读全文”链接状态设置。

#m_blog div.more a:visited{color:#047304}
博客文章标题链接被选中后的的状态设置。

#m_blog div.opt{color:#047304;font-size:12px}
文章操作区(如编辑、评论等)的设置。

#m_blog div.opt a{color:#047304;font-size:12px}
文章操作区链接状态设置。

#m_blog div.opt a:visited{color:#047304}
文章操作区链接被选中后的状态。

#m_blog div.line{margin-top:10px;line-height:60px;background:url(图片链接) no-repeat center}
文章和文章之间的分隔线设置,margin-top指分隔线与上一篇文章之间的距离,line-height指分隔线区域的高度,结尾处可定义分隔线的位置(no-repeat center指不重复,居中,repeat-x指横向重复)。

音乐播放器的设置

如果觉得空间默认的音乐播放器不好看,可以在空间最后加上这段代码来改变播放器的大小和颜色:

#phx{FILTER:Alpha(Opacity=60,FinishOpacity=36,Style=0,StartX=20,StartY =40,FinishX=0,FinishY=0)gray;WIDTH:500px;HEIGHT:45px}(这个是我的播放器代码)

这段代码有点复杂,捡能看懂的部分介绍一下吧,其他的还没摸索出来呢:

Opacity=透明度,可以用0-100之间的数值,数值越低透明度越高;FinishOpacity=过度透明度,即边缘的透明度(这个我还没 搞懂怎么玩);gray=颜色/风格,可以设为默认、gray、xray、invert等,可以自己尝试;WIDTH后边的数字表示播放器的宽度, HEIGHT后边的数字表示播放条的高度。

7:百度空间文字发光的方法

在你想要设置发光文字的模块插入
;filter:glow (color=#xxxxxx,strength=3)
color为发光的颜色,strength为发光强度,值为1到255

8:播放器大小调整

播放器代码
#phx{FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=10, StartY=10, FinishX=0,FinishY=0); WIDTH: 470px; HEIGHT: 400px}
470和400分别是播放器的宽和高!根据MV视频大小自己改哦

9:评论下增加背景图

#spBlogCmtText {border: 8px solid #1AE61A ;
background:url(图片地址) no-repeat top center;
background-attachment: fixed;
图片地址换成自己的图片,最佳尺寸是503*153,这样会图片完全显示,8px表示评论边框的宽度,#1AE61A 表示评论边框的颜色

10:制作透明的模块

把filter:alpha(opacity=80)写入你想要透明的模块中,opacity为0是完全透明,100是不透明。

11:友情连接的应用

连接邮箱;
在链接地址中输入mailto:自己的邮箱地址就可以了
链接QQ;
在连接地址中输入http://wpa.qq.com/msgrd?V=1&Uin=自己的QQ号即可链接了
添加“发送消息”的链接:
在连接地址中输入http://msg.baidu.com/ms?ct=21&cm=1&tn=bmSendMessage&un=你的百度用户名
添加“加为好友”的链接:
在连接地址中输入http://tiebacommit.baidu.com/f?ct=369098752&tn=bdPPFriSmt&cm=223&word=你的百度用户名&bu=你的空间地址

12:如何在文章标题前加图片

找到#m_blog div.tit,Blog文章标题的代码
添加代码如下:
#m_blog div.tit{font-size:14px;font-weight:bold;
line-height:90px;
text-indent:120px;
background:url(图片地址) no-repeat;}
解释
line-height:多少px;设置标题的高度,其实这里的设置为图片的高度就可以了
text-indent:多少px;设置标题的文本前面空多少宽度,这里可以填图片的宽度,为了美观起见,可以再多+5、6px
background:url(图片地址) no-repeat;设置添加的图片地址,no-repeat就是不重复,一定要设置,不然图片就覆盖满整个标题栏了
其他模块代码设置方法跟这个也是一样的

13:给超链接添加按钮效果

鼠标移动到超链接上,它会自动往右下角下陷的是代码:
a:hover {position:relative; left:1px; top:1px; clip:rect()}
添加body{}的下面就可以了,这样整个页面的超链接都会有这个效果了
下面是我对代码的解释:
position:relative定位,就是设置当前对象所在的位置固定,以作后面参数的参考位置,relative是设置对象不可层叠
left:1px距离左边间隔1px,这里的作用是相对于定位的位置右移1px
top:1px距离顶上间隔1px,这里的作用是相对于定位的位置下移1px
clip:rect()依据上-右-下-左的顺序提供自定位对象左上角为(0,0)坐标计算的四个偏移数值,这里的( )中留空,就是全部为0值,这里的作用就是指定left和top作用的坐标位置

14:隐藏你不想显示的模块

隐藏的代码
display:none
加入到你想隐藏的模块中

/*屏蔽Rss链接,baidu图片*/
#comm_info a {color:#3399CC;display:none}

15:解决回车换两行的问题

Shift+回车

16:鼠标设置

在body{} 中添加
;CURSOR: url('http://webme.bokee.com/inc/mouse028.cur')}
a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse031.ani')
第一行是鼠标指针初始形态,第二行是鼠标指针碰到链接的形态
CSS鼠标样式大全http://myok.bokee.com/3429184.html

17:改变你的按钮和输入栏的颜色及字体

input,select,textarea{color:green;font-size:14px;font-family:Tahoma,黑体;border:1px solid green;background-color:black}
textarea{overflow:hidden}
参数
color:green         表示字体颜色。
font-size:14px           表示字体大小。
font-family:Georgia,黑体       表示英文字体和中文字体
border:1px             表示边框的粗细。
solid green             表示边框的颜色。
background-color:black       表示背景色

18:文章虚线边框

#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凸边

19:文章在新窗口中打开

a:active { text: (target="_blank");}

20:空间透明

.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

21:右下角弹出窗口

#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("2007年2月10日<br>你好,亲爱得朋友。<br>你要说的话。<br>你要说的话~");
')
}

22:"发表评论"区域

#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 表示评论边框的颜色。

23:教你如何制作个性化的标题栏

编辑CSS自定义模板,

找到#m_blog div.tit 行,你会看到有三个#m_blog div.tit 行,

把前两个分别替换为

#m_blog div.tit{color:#8A3506;font-size:14px;font-weight:bold;background:url(图片地址) no-repeat top left;text-indent: 22px;height:70px;line-height:75px}

#m_blog div.tit a{color:#8A3506;font-size:14px;font-weight:bold;background:url(图片地址) no-repeat top left;text-indent: 22px;height:70px;line-height:75px}

text-indent: 22px是标题左边缩进值
height:70px 是背景所占用的高度,根据你的背景图片的高度设置
line-height:75px是上面空的高度

24:在百度空间文章中设置滚动字

<table style='TABLE-LAYOUT: fixed'><tr><td><div class='cnt'><marquee style='WIDTH: 400px; HEIGHT: 100px; ' scrollamount='2' direction='up'>你好,欢迎光临</marquee></div></td></tr></table>

制作过程:

1:打开记事本--把上面的红色代码复制到记事本--另存为12.html(文件类型:所有文件)--保存确定

2:用网页浏览器打开我保存的12.html网页,

3:在打开12.html网页内,右击鼠标“全选”--“复制”

4:在我的博客里新写文章,把复制好的粘贴到我的新文章里就可以了

5:它的字体和颜色,此时用百度“编辑文章”中的工具修改就可以

代码说明:

'WIDTH: 400px表示滚动字活动的宽度,你可以修改其中的数字
HEIGHT: 100px表示滚动字活动的高度,你可以修改其中的数字


提交评论