注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

WWW.LOGO880.CN

WWW.LOGO880.CN 作品会说话 创意来呐喊

 
 
 

日志

 
 

css教程--百度空间css个性代码  

2008-12-29 05:42:04|  分类: 终身|学院 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

css教程--百度空间css个性代码

2008年12月13日 星期六 11:55 P.M.

/*如何设定+固定百度空间的背景*/

在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}

  评论这张
 
阅读(22)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017