热点推荐:ASP.Net | ADO.Net | VB.Net | Web服务器 | Access | MSSQL | MySQL | Oracle | .Net控件 | Win 9x | Win 2000 | Win 2003 | DOS | Unix | 注册表 | 应用其它 | 安装调试 | 基本操作 | 使用技巧 | 系统优化 |故障处理 | 个性风格 | 病毒安全 | 专杀工具
您现在的位置: 中华IT技术网 >> 开发语言 >> CSS >> 正文
全文
百度空间CSS代码精选
作者:YuDi    文章来源:Internet    点击数:    更新时间:2007-6-11

#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

#m_filed             文章存档的ID   


———————————定式性的代码————————————


display:none 全能隐藏代码

背景{}中添加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{}     超链接被点击的时候显示的属性(在鼠标点击与释放之间发生的事件)

.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.在友情链接添加“发送消息”的链接:
在友情链接里的链接地址内填上:http://msg.baidu.com/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凸边

/*留言板图片*/
#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( );

/*禁止选择 鼠标右键特效*/
#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链接,baidu图片*/
#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; ba

[1] [2] [3] 下一页

  • 上一篇文章:
  • 下一篇文章:
  • 相关文章
    最新更新
    编辑推荐
    热门图片
    频道大全
    文章阅读排行
    周排行
    月排行