百度空间 | 百度首页 
 
查看文章
  
css教程--百度空间css个性代码
2006年11月12日 星期日 11:50

—————————CSS系列—————————————

/*如何设定+固定百度空间的背景*/
在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)}  
注释：
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 设置或检索滚动条基准颜色

/*去掉横向滚动条*/
在body{}里加上overflow-x:hidden

禁止选择/*鼠标触碰 按钮下陷*/
a:hover{}中加入position:relative; left:2px; top:1px; clip:rect( )

/*屏蔽Rss链接，baidu图片*/
#comm_info a {display:none}

/*标题背景*/
#header div.lc{}              -左
#header div.rc{}              -右
插入 background:url(http://***)

/*文章日期旁加小图案*/
#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}

/*其他模块已有XXXX人次访问本空间数字字体设置 */
#pvshow{font-family:Georgia;font-size:20pt;font-color:6A4A01}
20pt即字体设置

/*个人档案添加图片*/
#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()repeat-x;font-size:0px;width:100%;margin-left:-18px;padding-top:3pxhttp://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_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=你的百度用户名
这样点击该链接就可以给你发送消息，而这个链接另一个功能就是可以给自己发送消息。

/*添加“加为好友”的链接*/
javascript:document.addfriend.submit()

/*隐藏“我的提问”“我的回答”“加入的圈子”*/
#warpper a.nlk{display:none}


/*改变你的按钮和输入栏的颜色及字体*/
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

/*百度空间显示排名*/  
加入：#comm_info div.line{background:url(http://hi.51try.net/code.asp?url=你空间连接) no-repeat top;padding-bottom:50px}                                                                    回首页
                                                                                             


类别：baidu空间 | 添加到搜藏 | 浏览() | 评论 (316)
 
最近读者：
 
网友评论：
1
2006年12月09日 星期六 23:25 | 回复
好贴 我转了便于学习 谢谢
 
2
2006年12月25日 星期一 11:51 | 回复
士大夫
 
3
2006年12月27日 星期三 16:45 | 回复
你好,请问评论框里的字体怎么改颜色 啊?
 
4
2006年12月29日 星期五 09:23 | 回复
好厉害哦！！想拜师？？？
 
5
2006年12月30日 星期六 06:29 | 回复
谢了！学到了很多东东哦。
 
6
2007年01月02日 星期二 02:45 | 回复
你教我好不好 .我好想在空间做个广告.可是我不会搞.空间又不可以搞图片.怎么办嘛
 
7
2007年01月03日 星期三 21:45 | 回复
谢谢这些代码~~非常实用！！
 
8
2007年01月05日 星期五 10:07 | 回复
谢谢，这些很详细，很实用啊!
 
9
2007年01月05日 星期五 10:47 | 回复
fdf
 
10
2007年01月05日 星期五 22:28 | 回复
good.
 
11
2007年01月06日 星期六 13:19 | 回复
我是只菜鸟,不懂什么CSS代码,可是我很想学,但有看不懂,郁闷哦,你可以教教我吗?我拜你为师,如果你看到我的评论就到我空间留个言哈,XX了!1
 
12
2007年01月07日 星期日 10:01 | 回复
好喜欢啊 啊 啊啊
 
13
2007年01月08日 星期一 00:58 | 回复
没看懂! 到底是什么意思 ? 小弟新手,非常想了解.加我QQ细谈可以吗 ?197328334
 
14
2007年01月10日 星期三 14:58 | 回复
喜欢，呵呵
 
15
2007年01月10日 星期三 20:43 | 回复
hao a 高手 ！！！！！
 
16
2007年01月11日 星期四 11:09 | 回复
谢谢！ 我相信有了他一定有个不错的空间啊！``````
 
17
2007年01月12日 星期五 07:01 | 回复
一个字 强 想学 可不会 呵呵
 
18
2007年01月12日 星期五 21:52 | 回复
只能说是顶了
 
19
2007年01月14日 星期日 19:10 | 回复
你的空间很漂亮
 
20
2007年01月14日 星期日 22:33 | 回复
好东西,方便学习,转载了 谢谢
 
21
2007年01月15日 星期一 13:48 | 回复
好东西啊...呵呵..我转鸟...不介意撒...
 
22
2007年01月15日 星期一 14:11 | 回复
谢谢你的回答,
 
23
2007年01月17日 星期三 13:29 | 回复
谢了```
 
24
2007年01月20日 星期六 17:21 | 回复
一直要自己做个模板 你这个好有用 谢谢你 我引用了 不会在来向你请教啊
 
25
2007年01月23日 星期二 19:42 | 回复
aaaaaa
 
26
2007年01月25日 星期四 13:11 | 回复
谢谢解疑，但请附上示例好么？毕竟这样的代码像我们这些菜鸟是看不懂的，如果附上示例图片效果会更好！！！
 
27
2007年01月27日 星期六 13:55 | 回复
非常感谢。我转了。 向博学的人致敬！
 
28
2007年01月28日 星期日 12:06 | 回复
十分感谢!
 
29
2007年02月03日 星期六 22:53 | 回复
菜鸟,看不懂,但绝对认学拜托给点示例
 
30
2007年02月06日 星期二 22:13 | 回复
有关于自定义模块的吗？
 
31
2007年02月07日 星期三 20:15 | 回复
太好了，为方便学习，转载了
 
32
2007年02月07日 星期三 20:36 | 回复
除了谢谢 也不知该讲什么了
 
33
2007年02月08日 星期四 00:10 | 回复
非常谢谢~~~
 
34
2007年02月08日 星期四 02:39 | 回复
谢谢~我也转了~但是如果音乐播放器连续放N首歌的代码有吗??
 
35
2007年02月10日 星期六 13:27 | 回复
请问有书籍可参考吗？在书店能否买到相关书籍呢？
 
36
2007年02月10日 星期六 18:28 | 回复
我看不懂啊??
 
37
2007年02月10日 星期六 22:34 | 回复
真的不错 我转载了
 
38
2007年02月11日 星期日 13:19 | 回复
我在空间保存了你这篇教程 以便于模板修改时做参照 感谢编写此文
 
39
2007年02月16日 星期五 11:10 | 回复
踩过
 
40
2007年02月17日 星期六 11:52 | 回复
HA ~转的是这个 谢谢 楼主大人
 
41
2007年02月17日 星期六 15:47 | 回复
大人,太感谢了!!
 
42
2007年02月18日 星期日 00:35 | 回复
请问将背静图象拉伸的代码是什么啊？
 
43
2007年02月18日 星期日 02:08 | 回复
bu hui 2
 
44
2007年02月19日 星期一 14:30 | 回复
526663303 想学
 
45
2007年02月22日 星期四 00:45 | 回复
请教 *弹出窗口百度空间 进入后弹出对话框 这两个为什么游览时弹出。但是进空间的时候不出来？
 
46
2007年02月26日 星期一 13:24 | 回复
高手啊!我加你了!
 
47
2007年02月26日 星期一 17:18 | 回复
哈哈!!谢谢你哦,我正在发愁怎么收拾我的网页呢,不过我要好好试试,有问题还要请教你哦
 
48
2007年02月27日 星期二 19:07 | 回复
方法方法
 
49
2007年03月01日 星期四 00:03 | 回复
好像很难```
 
50
2007年03月02日 星期五 20:01 | 回复
好麻烦啊
 
[首页] 1 [2] [3] [4] [5] [6] [7] [下一页] 
发表评论：
姓　名：
网址或邮箱： (选填)
内　容：
验证码： 请点击后输入四位验证码，字母不区分大小写
      

     

©2009 Baidu