百度空间CSS表较详细注释.doc

《百度空间CSS表较详细注释.doc》由会员分享，可在线阅读，更多相关《百度空间CSS表较详细注释.doc（11页珍藏版）》请在三一办公上搜索。

1、打开CSS表：在空间页面上依次点击：设置高级设置自定义css代码解释：1、关于文字或背景的颜色的16进制代码形式如：#530C0E可以到下面日志直观查看颜色代码：各种颜色十六进制代码表【其一】各种颜色十六进制代码表【其一】也可以用颜色的相应英文单词替换，如：Black Fuchsia Gray Gree Lime Maroon Navy Olive Purple Red Silver Teal White Yellow Blue Aqua2、相关元素“位置”为“center,left,right”，可直接相互替换；3、文字等元素的大小格式为“13px”数字越大字号或元素就越大，反之则越小；4、

2、图片地址可直接用可以引用的地址替换，建议将图片传到空间相册后再引用。5、代码详细注释：bodybackground-color:#530C0E背景颜色#headerheight:89px;background:url( repeat-x #FFDA41主页左上角背景图片#header div.lcbackground:url( no-repeat#header div.rcbackground:url( no-repeat top right主页右上角背景图片#header div.tittop:8px;left:20px;line-height:22px;font-size:20px;fon

3、t-family:黑体空间名字大小颜色#header div.tit a.titlinkcolor:#FFC45E;text-decoration:none空间名字链接颜色，未被点击#header div.tit a.titlink:visitedcolor:#FFC45E;text-decoration:none空间名字链接颜色，已被点击#header div.desctop:33px;left:20px;color:#FFC45E;font-size:13px空间介绍位置大小颜色#tablinetop:89px#tabtop:67px;background:url( repeat-x页面上

4、方“主页博客|相册”栏背景图片#tab a.on,#tab a.on:link,#tab a.on:visitedmargin-top:3px;line-height:19px;background-color:#BC0304;color:#FFFFFF;font-size:14px页面上方“主页”栏大小颜色背景#tab spancolor:#FFFFFF;font-size:14px#tab a:linkcolor:#FFFFFF;text-decoration:none;font-size:14px页面上方“博客|相册”栏链接颜色，未被点击#tab a:visitedcolor:#FFFF

5、FF;text-decoration:none;font-size:14px页面上方“博客|相册”栏链接颜色，已被点击#tab2background:#DAE9F5#tab2 spancolor:#000000;font-size:12px;font-weight:bold#tab2 afont-size:12px#tab2 a:linkcolor:#0000CC#tab2 a:visitedcolor:#0000CC.stagebackground:url( repeat-x #9B1316#comm_infocolor:#000000;font-family:Arial;text-alig

6、n:left其他中“已有 人次访问本空间”颜色位置#comm_info div.linemargin-top:5px;line-height:8px;border-top:1px solid #F4C1B5“已有 人次访问本空间”下面粉红色分割线相关设置#comm_info acolor:#D77B18其它中“什么是RSS？”颜色#pageheight:30px;font-size:14px;font-family:Arial;text-align:center#page spanpadding:3px;color:#000000;font-size:14px;font-weight:bold

7、#page a.pccolor:#D77B18;font-size:14px;font-weight:bold#page a.pc:visitedcolor:#D77B18#page a.pipadding:3px;color:#D77B18;font-size:14px#page a.pi:visitedcolor:#D77B18.modmargin-bottom:10px各栏目间的上下间距.modhandlecursor:move.modthheight:24px各栏目标题和正文之间的间距.modheadpadding:4px 4px 0 4px各栏目标题的位置.modoptpadding

8、:4px 4px 0 0各栏目间的上下间距.modtitcolor:#FFFFFF;font-size:12px;font-weight:bolda.modtitcolor:#FFFFFFa.modtit:visitedcolor:#FFFFFF各栏目标题大小颜色.modtitlinkcolor:#FFFFFF;font-size:12px;font-weight:bolda.modtitlinkcolor:#FFFFFF;text-decoration:nonea.modtitlink:visitedcolor:#FFFFFF;text-decoration:nonea.modtitlink

9、:hovercolor:#FFFFFF;text-decoration:underline.modactcolor:#FFFFFF;font-size:12pxa.modact:linkcolor:#FFFFFFa.modact:visitedcolor:#FFFFFF每个栏目右上角“编辑”等链接的相关大小颜色设置.modboxpadding:10px 10px 0 10px;background-color:#FFF6E7;border-left:1px solid #FFF6E7;border-right:1px solid #FFF6E7每个栏目的主背景颜色等.modtlbackgrou

10、nd:url( no-repeat top left;line-height:1px每个栏目左上角远郊边沿图片.modtcbackground:url( repeat-x每个栏目标题中间的背景图片.modtrbackground:url( no-repeat top right;line-height:1px每个栏目右上角远郊边沿图片.modblbackground-color:#FFF6E7;border-left:1px solid #FFF6E7;border-bottom:1px solid #FFF6E7;line-height:1px每个栏目左下角点的设置.modbcbackgro

11、und-color:#FFF6E7;border-bottom:1px solid #FFF6E7;line-height:1px每个栏目最下端一条的设置.modbrbackground-color:#FFF6E7;border-right:1px solid #FFF6E7;border-bottom:1px solid #FFF6E7;line-height:1px每个栏目右下角点的设置#m_blog div.titfont-size:14px;font-weight:bold#m_blog div.tit acolor:#000000;font-size:14px;font-weight

12、:bold日志标题大小颜色，未被点击#m_blog div.tit a:visitedcolor:#000000日志标题大小颜色，已被点击#m_blog div.datemargin:5px 0 8px 0;color:#666666日志日期文字大小颜色#m_blog tcolor:#000000;line-height:20px;font-size:14px日志内容大小颜色#m_blog div.moremargin:14px 0 16px 0#m_blog div.more acolor:#D77B18;font-size:14px日志“阅读全文”的大小颜色，未被点击#m_blog div

13、.more a:visitedcolor:#D77B18日志“阅读全文”的大小颜色，已被点击#m_blog div.optcolor:#666666;font-size:12px“类别：技术专区 | 编辑”中的“|”的颜色大小#m_blog div.opt acolor:#D77B18;font-size:12px“类别：技术专区”的大小颜色#m_blog div.opt a:visitedcolor:#D77B18“编辑 删除 评论(4) 浏览(21)”的大小颜色#m_blog div.linemargin-top:17px;line-height:17px;border-top:1px s

14、olid #F4C1B5日之间的分割线的相关设置#m_blog div.nonepadding:100px 0 100px 0;color:#000000;font-size:14px隐形设置，不需要改变#m_pro acolor:#D77B18个人档案中“查看详细信息”的颜色，未被点击#m_pro a:visitedcolor:#D77B18个人档案中“查看详细信息”的颜色，已被点击#m_pro div.imagetext-align:center个人档案中照片的显示位置，分为“中，左，右center,left,right”#m_pro div.actmargin-top:10px个人介绍和

15、照片的间距#m_pro div.usermargin-top:10px;color:#000000;font-size:12px;font-weight:bold个人用户名的大小颜色#m_pro div.desccolor:#000000;font-size:12px个人介绍的大小颜色#m_pro div.linemargin-top:17px;line-height:17px;border-top:1px solid #F4C1B5#m_pro tdcolor:#000000;line-height:24px;font-size:14px#m_album div.imagetext-alig

16、n:center相册中照片的显示位置，分为“中，左，右center,left,right”#m_album div.pagecolor:#666666;font-size:12px;text-align:center#m_album div.page acolor:#0000CC;font-size:12px#m_album div.page a:visitedcolor:#0000CC#m_links div.itemcolor:#000000;font-size:12px友情链接的连接描述的大小颜色#m_links div.item acolor:#D77B18;font-size:12p

17、x;text-decoration:none友情链接名的大小颜色，未被点击#m_links div.item a:visitedcolor:#D77B18友情链接名的大小颜色，已被点击#m_links div.linemargin-top:5px;line-height:8px;border-top:1px solid #F4C1B5友情链接见的分隔符的相关设置#m_artclg div.itemcolor:#666666;font-size:12px文章分类中各分类后面主题数及括号的大小颜色#m_artclg div.item acolor:#D77B18;font-size:12px文章分

18、类中各分类的大小颜色，未被点击#m_artclg div.item a:visitedcolor:#D77B18文章分类中各分类的大小颜色，已被点击#m_artclg div.linemargin-top:5px;line-height:8px;border-top:1px solid #F4C1B5文章分类中各分类之间的分割线的相关设置#m_comment div.itemcolor:#000000;font-size:12px#m_comment div.item acolor:#D77B18;font-size:12px最新评论中用户名的大小颜色，未被点击#m_comment div.i

19、tem a:visitedcolor:#D77B18最新评论中用户名的大小颜色，已被点击#m_comment div.item tcolor:#000000;font-size:12px;text-decoration:none最新评论中评论文字的大小颜色，未被点击#m_comment div.item t:visitedcolor:#000000;text-decoration:none最新评论中评论文字的大小颜色，已被点击#m_comment div.item t:hovercolor:#000000;text-decoration:underline最新评论中评论文字当鼠标移上去时的颜色

20、#m_comment div.linemargin-top:5px;line-heigpx;8px;border-top:1px solid #F4C1B5最新评论中各评论之间的分割线的相关设置下面的设置基本与主页关系不大，就没有测试。有兴趣的朋友可以自己试一下。#m_albumlist div.notecolor:#000000;font-size:14px#m_albumlist div.descmargin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:1

21、4px#m_albumlist div.nonepadding:100px 0 100px 0;color:#000000;font-size:14px#m_albumlist div.linemargin-top:10px;line-height:16px;border-top:1px solid #F4C1B5#m_albumlist div.titmargin:6px 0 7px 0;color:#000000;font-size:14px#m_albumlist div.tit acolor:#D77B18;font-size:14px#m_albumlist div.tit a:vi

22、sitedcolor:#D77B18#m_albumlist span.countcolor:#666666;font-size:12px;font-weight:bold#m_albumlist span.sizecolor:#999999;font-size:12px;font-family:Arial#m_albumlist a.actcolor:#D77B18;font-size:12px#m_albumlist a.act:visitedcolor:#D77B18#m_albumlist a.pagecolor:#0000CC;font-size:14px#m_albumlist a

23、.page:visitedcolor:#0000CC#m_albumlist td.imagepadding:5px;border:1px solid #999999;background:#FFFFFF#m_friend div.filtermargin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px#m_friend div.catalogmargin-bottom:10px;padding-left:10px;height:27px;line-height:27px;backgroun

24、d-color:#F2F2F2;font-size:14px#m_friend div.usermargin-top:4px;color:#000000;font-size:12px#m_friend div.user acolor:#D77B18;font-size:12px#m_friend div.user a:visitedcolor:#D77B18#m_friend div.linemargin-top:10px;line-height:16px;border-top:1px solid #F4C1B5#m_setting acolor:#D77B18#m_setting a:vis

25、itedcolor:#D77B18#m_settingline-height:22px;color:#000000;font-size:14px#m_setting img.selborder:4px solid #FFDB7B#m_setting img.unselborder:1px solid #D2D2D2#m_setting span.titfont-size:14px#m_setting span.usrcolor:#666666#m_setting div.selpadding-top:6px;font-size:14px;font-weight:bold#m_setting d

26、iv.linemargin-top:20px;line-height:16px;border-top:1px solid #F4C1B5#m_sysinfo acolor:#D77B18#m_sysinfo a:visitedcolor:#D77B18#m_sysinfoline-height:22px;color:#000000;font-size:14px#m_sysinfo span.newcolor:#FF0000;font-size:10px;font-family:Arial#m_sysinfo span.datecolor:#666666;font-size:14px#m_set

27、basecolor:#000000;font-size:14px#m_setbase tdcolor:#000000;font-size:14px#m_setbase div.linemargin-top:5px;line-height:8px;border-top:1px solid #F4C1B5#in_commentwidth:710px#in_comment div.titmargin-bottom:12px;color:#000000;font-size:14px;font-weight:bold#in_comment div.usermargin-bottom:6px;color:

28、#000000;font-size:12px#in_comment div.user acolor:#D77B18;font-size:12px#in_comment div.user a:visitedcolor:#D77B18#in_comment div.user span.datecolor:#666666;font-size:12px#in_comment div.desccolor:#000000;font-size:12px#in_comment div.linemargin-top:17px;line-height:17px;border-top:1px solid #F4C1

29、B5#in_send div.titmargin:10px 0 10px 0;color:#000000;font-size:14px;font-weight:bold代码段结束。百度空间提供的自定义css中代码并不是完整的.例如众所周知的背景音乐代码(#phx)自定义中就没有提供.类似的还有很多.为了使空间的形式更加多元化,个性化.我今天就将这些没有的提供的代码收集整理了一下,方便大家使用.使大家能够布局出更加完美的空间.下面就言归正传吧!#main(整个空间的区域)#layout类似与.stage(TAB菜单与版权信息之间的区域)#mod_bloglist(文章列表区域)#mod_prof

30、ile(个人档案区域)#mod_album(相册区域).这个区域表面上看上去和#m_album区域一样.其实细心的朋友就会发现#mod_album包括的是整个的相册区域,已经延伸到了模块的背景区域.还有就是在#m_album添加了背景图片以后还可以在#mod_album中再次加入背景图片.实现复杂的重叠效果.不知道我这样说大家明白了没有.其他的模块也是一样.#imgArea(照片区域)#mod_links(友情连接区域)#mod_comment(最新评论区域)#mod_artclg(文章分类区域)11#mod_bgmusic(背景音乐区域)在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元

31、素的透明度。还可以通过指定坐标，从而实现各种不同范围的透明度。具体语法如下： filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy) 具体参数含义如下： opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时

32、的透明度。范围也是0 到 100。 style 指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形 startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。 finishx 渐变透明效果结束处的 X坐标。 finishy 渐变透明效果结束处的 Y坐标。 以上的参数可以选用，可以只设置一个opacity 例如： filter:alpha(opacity=50) 这个就是半透明的设置，只要把中的代码加入到需要设置的模版中的的即可，记得与前面的代码之间要用;间隔，不然设置是无效的 例如： 我要设置模版区域背景的颜色（白色）+半透明就

33、是我现在blog的效果 只要在 .modbox .modbl .modbc .modbr 中都设置background-color:white 这些就是模版背景设置的ID 然后再在.modbox,.modbl,.modbc,.modbr如果没有这个的话可以自己加一个 中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了 如果希望像我这样只显示blog的背景，别的都全透明的话，那么就在别的模版中加入背景全透明的代码即可 background:transparent 这就是背景全透明的代码 各模版ID请参照链接：百度空间CSS说明 不过这样的话，相关

34、模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在 .modbl .modbc .modbr 中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样 另外这个参数目前只能用于背景色的设置，背景图片无法设置为半透明 这是别人的半透明背景设置 可供参考 .modboxpadding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533 .modblbackground:transparent;border-le

35、ft:1px solid #813533;border-bottom:1px solid #813533;line-height:1px .modbcbackground:transparent;border-bottom:1px solid #813533;line-height:1px .modbrbackground:transparent;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px .modbox,.modbl,.modbc,.modbrfilter:alpha(opaci

36、ty=80);-moz-opacity:0.8;width:auto !important;width:100% 红色字是关键设置，如果不想设置全透明的话，可以把.modbl.modbc.modbr三个中的background:transparent改成.modbox中的background-color:#FFFFFF，当然这里的#FFFFFF你可以换成自己喜欢的颜色，不过为了美观统一，建议这4个的颜色代码最好设置为一样的 附：#FFFFFF就是white，白色；#000000就是black，黑色 分析下内容 个人档案#m_blog 空间标题栏#m_header 菜单栏是#tab 文章区域#m_blog 相册区#m_album 友情链接#m_links 文章分类#m_artclg 最新评论#m_comment 访问量区域#comm_info 以上所有模块除空间标题和菜单外背后的大模块.stage 这就是几个大模块的ID，大家只要把全透明代码添加到其中想要设置全透明的ID内就可以了，如果没有你要设置的模块ID，就自己添加上去，添加在空白处就可以了