百度空间的模板

发布网友发布时间：2022-04-21 04:56

共1个回答

热心网友时间：2023-11-05 16:48

很难的问题
我把有用的都给你好了

原创哦~

百度空间秘籍由虫虫小林收集整理空间http://hi.baidu.com/ccxiaolin
——————————————————————————ID——————————————————————————
#header 标题栏的ID，就是挂着空间名字的那个栏目
#tab 导航兰的ID，就是写着主页 | 博客 | 相册....的那个栏目
#comm_info 其他模版的ID，就是有访问量显示和RSS的那个栏目
#m_blog 文章列表模版的ID
#m_pro 个人档案模版的ID
#m_album 照片自动播放模块的ID，一般这个不需要设置，因为设置了背景也看不到，前面有照片显示的
#m_links 友情链接模版的ID
#m_artclg 文章分类模版的ID
#m_comment 最新评论模版的ID

——————————————————————————定式性的代码——————————————————————————
整体向右
#header div.tit{}中加入left:450px
#header div.desc{}中加入left:450px
#tab{}中加入 left:450px
.stage{}中加入margin-left:450px;width:500px

display:none 全能隐藏代码
background:transparent透明（模块的）
text-align:center 居中

背景{}中添加background: url(图片地址)repeat
注：
repeat 背景图像在纵向和横向上平铺
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺

background-color:#颜色代码

超链接自定义设置超链接的属性就是在相关栏目名称后面+上a{}的属性

color:#颜色代码或颜色英文名称定义超链接字体的颜色
font-family:字体名称定义超链接字体
font-size:大小px 定义超链接字体大小
text-decoration : 参数定义超链接的文本装饰，参数：none || underline || blink || overline || line-through
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线

其实超链接属性设置
a:hover{} 当鼠标移动到超链接上时显示的属性
a:link{} 超链接未被访问前显示的属性
a:visited{} 已经被访问过的超链接的属性
a:active{} 超链接被点击的时候显示的属性（在鼠标点击与释放之间发生的事件）
比如
text-decoration:underline;就表示一条实下划线；
另外，border-bottom也可以来实现它
border-bottom: 1px dotted;就表示一条1px的虚下划线；
border-bottom: #000000 1px solid;就表示一条黑色1px的实下划线。

例：让文章中的超链接没有下划线，并且平时是红色，鼠标上去以后是蓝色，并有虚下划线，下划线为绿色
代码如下：
#m_blog div.cnt a:link,
#m_blog div.cnt a:visited{
color: #ff0000; text-decoration: none;
}
#m_blog div.cnt a:hover{
color: #0000ff; border-bottom: #00ff00 1px dotted
}

a:link和a:visited属性一样，中间放个逗号把它们合在一起写。
如要修改文章下面的“阅读全文”的超链接，只需要将上面的#m_blog div.cnt更换成#m_blog div.more就行了。
编辑，评论等的超链接id是#m_blog div.opt，更换掉就可以。
如果你要换其它地方，只要把id更换一下就可以。

例：本blog导航条效果的超链接
代码如下：
#tab a,#tab a:link,#tab a:visited{
color: #000000;
background-color: #404040;
text-decoration: none; }
/*没选中的栏目,鼠标不在上面时的样子，黑色的字，#404040的背景色，没下划线*/
#tab a:hover{
background-color: #bfbfbf;
border-top: #cccccc 1px solid;
border-bottom: 0px}
/*没选中的栏目,鼠标在上面时的样子，#bfbfbf的背景色，上面一条1px的#cccccc实线*/
#tab a.on,#tab a.on:link,#tab a.on:visited,#tab a.on:hover{
background-color: #ffffff;
border-top: 0px;
border-bottom: 1px;
padding-bottom: 1px;
padding-top: 0px; }
/*选中的栏目的样子*/
超链接修改心得，一个blog里1到2种超链接样式就可以了。所以我把原始的css超链接全删了，
定义了div a:link,div a:visited,div a:hover，这是全局的。
然后再把个别的超链接重新定义一下，如blog标题，导航条的链接。

模块
.modbl{}
.modbc{}
.modbr{}
这三个就是分别设置模版左下角，底边*，右下角的代码：
.modbl{}中的border-left:是设置左下角左边框的属性的，border-bottom是设置左下角底边的边框属性的
.modbc{}中的border-bottom:是设置边框当中一段底边属性的
.modbr{}中的border-right:是设置右下角右边框的属性的，border-bottom是设置右下角底边的边框属性的

解决回车换两行的问题
Shift+回车

个性标题
#header div.tit{top:5px;left:20px;line-height:60px;font-size:60px;font-family:隶书}
#header div.tit a.titlink{color:#813533;text-decoration:none}
#header div.tit a.titlink:visited{color:#813533;text-decoration:none}
#header div.tit a.titlink:hover{color:#FFFFFF;text-decoration:none}
#header div.desc{top:27px;left:320px;color:#813533;font-size:16px}
说明：
#header div.tit{} 这是标题的设置
#header div.tit a.titlink{} 这是标题超链接的设置
#header div.tit a.titlink:visited{} 这是标题超链接已经被访问过的设置
#header div.tit a.titlink:hover{} 这是当鼠标移动到标题超链接上时显示的属性
#header div.desc{} 这是空间标题后面的简介的内容设置
属性和详细参数
top:5px 距离模版顶部的间隔距离为5px
left:20px 距离模版左边的间隔距离为20px
line-height:60px 设置总高度为60px
font-size:60px 设置字体大小为60px，这个不能设置的比的line-height大，不然标题字体的一部分会被遮掉的
font-family:隶书设置字体的型号
color:#813533 设置字体的颜色代码为#813533，这里也可以写颜色的英文名，比如black，white，red，green等
text-decoration:none 字体的划线修饰属性，none为无下划线，关于text-decoration的具体参数可以查看我前面写的关于定义超链接的文章

更多文章放到右面
#m_blog div.more{margin:14px 0 16px 0;text-align:right}

1.在友情链接添加“发送消息”的链接：
在友情链接里的链接地址内填上：https://gsp0.baidu.com/8_UFsjip0QIZ8tyhnq/ms?ct=21&cm=1&tn=bmSendMessage&un=你的百度用户名
例如我的发送消息链接就是：https://gsp0.baidu.com/8_UFsjip0QIZ8tyhnq/ms?ct=21&cm=1&tn=bmSendMessage&un=欣水寓言
这样人家一点该链接就可以马上给你发送消息了，而这个链接另一个功能就是可以给自己发送消息，嘿嘿，由于自己浏览自己空间的时候，是没有发送消息的链接的，所以应该没有多少人试过给自己发送消息吧？但是我用这个链接来试过。。。而且收到了，很有意思。。。
2.在友情链接添加“加为好友”的链接：javascript:document.addfriend.submit()
——————————————————————————CSS系列——————————————————————————
/*发表评论中的背景*/
#spBlogCmtor{background:url(图片地址)} /* 这是姓名中的*/
#spBlogCmtURL{background:url(图片地址) /* 这是网址或邮箱中的*/
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
}
#spBlogCmtText{background:url(图片地址) /* 这是内容中的*/
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
}

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

/*最顶部加字方法!*/
#tabline{margin-top:-490px;right:0px;line-height:8px; background:url(图片地址) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}
图片上面打上你要的字~

/*文章虚线边框*/
#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凸边

/*分割线*/
简易分割线修改方法

将css中带有line的代码拿出来看，基本上如下所示
.line{ margin-top: 2px; line-height: 4px; border-top: 1px dotted #404040; }
定义的是一条1px，灰色，虚线，就是本blog的分割线
代码说明：
margin-top 距上一部分的距离。
lin-height 说白了就是占用的宽度
border-top 线的样子宽度1px，dotted表示虚线，改成solid，就成实线。
改改颜色，线大小，实线虚线也就差不多了。

有图形的分割线
#m_blog div.line{margin-top:17px;line-height:17px;background:url(图片地址) repeat-x}

/*留言板图片*/
#spBlogCmtText {border: 1px solid #A6B5C4;background:url(http://***.jpg) no-repeat top center;background-attachment: fixed;}

/*播放器*/
#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}

/*滚动条*/
{overflow-y:auto;height:200px}

{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);}

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 设置或检索滚动条基准颜色

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

/*透明flash*/
#header{}
#header div.lc{}
#header div.rc{}
#header div.tit{}
#header div.tit{}
没有办法就随便找一个没有背景的{} 然后添加
background:url()
background-image:url()
代码：
background:url("javascript:document.body.onload = function(){if(document.getElementById("header") ){var aminganjie=document.getElementById("header");aminganjie.innerHTML="<div><embed src=\'http://imgfree.21cn.com/free/flash/38.swf\' wmode=transparent style=\'position:absolute\' width=976 height=732></div>"+aminganjie.innerHTML;}}");

/*古老的时钟*/
background:url("javascript:document.body.onload = function(){if(document.getElementById("header") ){var aminganjie=document.getElementById("header");aminganjie.innerHTML="<div><embed src=\'http://www.9941.cn/moban/zhong/43.swf\' wmode=transparent style=\'position:absolute\' width=1000 height=300></div>"+aminganjie.innerHTML;}}");}
说实话不太好用~

/*CSS教程之— 禁止选择鼠标右键特效*/
#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;");禁止选择

/*探出窗口*/
#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(你要说的内容))

/*鼠标样式*/
平常状态 body{}中加入CURSOR: url('http://***.ani');
链接状态 a:hover{}中加入CURSOR: url('http://***.ani');

/*文章在新窗口中打开*/
a:active { text: (target="_blank");}

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

/*大背景*/
body{}中加入background:url(http://***.gif) repeat-x #FFFFFF

/*标题背景*/
#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("你要说的话");')}

/*文章日期旁加小图案*/
#m_blog div.date
{text-indent:1.5cm;background:url(这里要填上你自己选的小图片的连接地址) 30% 0% no-repeat; /*背景图片*/margin:5px 0 8px 0;color:#999999;
line-height:50px; /*调整行高*/}

/*常用插入日期图片位置的代码*/
图片显示位置——个人档案照片下面：
#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; }

图片显示位置——文章列表标题栏：
#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; }

最上面的~

#tabline{margin-top:-131px;right:300px;line-height:8px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?prgb=FFC061&timezone=GMT+0800) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}/*上方的日期*/

图片地址：
http://www.myelogo.com/elogo_user/2.jpg kitty猫
http://www.csufresno.e/cgi-bin/Count.cgi?display=date&dd=A 绿电子表
http://www.csufresno.e/cgi-bin/Count.cgi?display=date&dd=B 翻牌
http://www.csufresno.e/cgi-bin/Count.cgi?display=date&dd=C 手写字
http://www.csufresno.e/cgi-bin/Count.cgi?display=date&dd=D 小
http://www.csufresno.e/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 我用的

时间~
#m_pro div.act{margin-top:5px; background:url(http://danjo.ca/cgi-sys/Count.cgi?display=clock&tformat=24&ft=0&dd=E&timezone=GMT+0700) no-repeat 95% 60%}

#m_pro div.act{margin-top:5px;background:url(http://escati.linkopp.net/cgi-bin/clock.cgi?prgb=4BD6F9&timezone=GMT+0800) no-repeat bottom;padding-bottom:22px;margin-bottom:6px;}
/*个人介绍中的时间*/

/*分割线*/
{margin-top:17px;line-height:12px;background:url(http://***.gif) repeat-x}

/*为首页添加首页翻*/

/*<其它>模块中只显示访问人数*/
#comm_info a {display:none}

/*发光效果*/
{}中加入filter:glow (color= #299BE8,strength=2);

/*阴影效果字体阴影*/
{}中加入filter:DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true);
参数的作用：
Color=这里是阴影的颜色代码，我这里用的是黑色
OffX=这里设置阴影与对象（文字或图片）的横向距离偏移
OffY=这里设置阴影与对象的竖向距离偏移
Positive=这里是设置建立阴影的对象，true就是为非透明像素建立阴影，false就是为透明的像素建立阴影，一般不建议使用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://***.gif) 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%}

设置了一个透明度为70%的背景图
.stage{background: url("图片地址") repeat; filter:alpha(opacity=70)}

让标题栏背景色变透明，但标题不要透明
.modtl,.modtc,.modtr{filter:chroma(color:你的标题栏背景色)}

/*添加自己的LOGO图片*/
#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}

/*添加LOGO*/
#m_pro div.image{}加入background:url(http://***.jpg) no-repeat bottom;padding-bottom:100px
bottom让图片沉底
padding-bottom 增加头像模块底下的宽度，这样，我们的LOGO就可以再往下移了，直到不被我们的头像挡住就可以了，
关键就是 padding-bottom 后面的数值大小了，一般设置为LOGO的高度值正好，LOGO的上边正好贴紧了头像的下边，如果觉得贴紧了不好看，
就稍微再加大一点
padding-bottom的值，留点缝缝

/*给评论框加背景图片*/
#spBlogCmtText {border: 8px solid #1AE61A ;
background:url(图片地址) no-repeat top center;
background-attachment: fixed;}

☆☆/*如何设定+固定百度空间的背景*/
在body{}中加入
background-image:url(图片地址) ; 定义背景图片
background-repeat: no-repeat; 定义背景图片不重复
background-position: center; 定义背景居中
background-attachment: fixed; 定义背景固定，不滚动，这个就是关键参数fixed

好啦，背景定义好了，预览看一下，却发现基本看不到背景，为什么？因为百度空间的样式中还有别的背景，比如标题栏上的背景图片等

所以我们要把标题栏他们的背景给去掉
在header{}中加入
background:transparent 这个参数的作用是使完全背景透明（关于半透明的设置请看后面的教程）
并把其中原来的属性background:url(……)的设置删除掉

接着到#header div.rc{}以及.stage{}中做与header{}同样的设置，即可达到效果了，再看看，是不是能够看到设定的背景了

嘿嘿~~

如果觉得其他模块的背景也很碍眼的话，只要照着上面的方法设置了即可了，不过有的是设置背景色的，那么只要把background-color:……;删掉然后再+上background:transparent就可以了

这里加一句，有很多朋友的菜单栏是带背景色的，也就是主页|博客|相册这一栏有背景色，有的人想变透明不知道在哪里，我这里提示一下，就是#tab{}中，只要把里面的background-color的相关属性删除掉就可以了

/*右下角弹出窗口*/
#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\" cel