百度空间 | 百度首页 
               
 
查看文章
 
转载:百度空间CSS教程
2006-12-06 13:03
 首先声明本人不是CSS高手,所以有些错误是难免的,本攻略以本人现在使用的CSS代码讲解,全方面的涉及到背景图片,播放器,模块透明,设定页面宽度等问题.大家需要明白的,要装扮好自己的空间除了需要熟知百度空间的CSS外,还要有一定的美工基础,毕竟图片是漂亮的关键.还有,对于新手来讲,最好先看一下百度官方的CSS帮助,不知道地址的请点此进入,这样可以让你了解CSS代码所对应的模块.我对自己的代码作了详细注释,很多下问题可以在我的注释里找到,如不懂的请留言给我.
  
  一:背景图片

  一般人设计空间一般是把百度空间分成上下两部分,上指的是空间名称,空间简介那部分,下指的是导航栏以下部分,就是文章内容以及其他小模块.对于新手来讲,这是最好的拆分方法.空间名称这一部分一般是装扮空间的前提,如果有精美的图片,只要改下这里的背景就可以让空间焕然一新.修改这里的背景很简单,打开CSS编辑页面,找到#header,在后面插入BACKGROUND: url(图片地址) no-repeat 0px 0px 在这里讲解下背景图片的几个属性:repeat是指定图片是否平铺和以何种方式平铺.有四个属性:
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺


  后面的两个PX是指定图片左边距和上边距,这是比较重要的,可以调整图片到你喜欢的位置.这里注意下,在空间名称这部分添加背景图片的时候请同时调整这里的高度和TAB里的距顶部距离.高度代码:height,把高度调整为你图片的高度.
  示例:现在我要在空间名称部分放一张高度为160的图片,我们就需要修改两个地方:
  1:#header{ HEIGHT: 160px BACKGROUND: url(图片地址) no-repeat 8px 0px;}
  2:#tab{top:160px;left:0px;}
   对于上部分的背景图片就讲到这里.下部分和上部分的方法一样,不过插入代码的地方是.stage
  找代码可以按CTRL+F搜索.
  我们还可以设定下总体背景,把背景图片代码插在BODY里就可以了.还有很重要的一点,百度的模块都是有背景色的,这样的话,我们就算放入背景图片,基本上也被遮住了,这就需要用到背景透明代码:background:transparent;在你想设置透明的模块里放入此代码就可以了.
  具体代码对应模块请参考百度官方CSS帮助,上面已经有连接了.
  
  二:播放器设置
  不多说废话,提供代码一个:
  #phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray();WIDTH: 209px;HEIGHT:45px;margin-top:12px}
  这个代码可以任意插在CSS任何位置,只要知道width和height是分别改变播放器宽度和高度的就可以任意改变播放器大小了.

  三:指定页面宽度

  有些人觉得百度空间的页面看起来太宽,想设计的小一点,这其实不难.甚至简单的只需要知道一个宽度代码:width 
当然,为了更方便的设置,我们最好再加入一些自己的代码.
 #layout td.c2t3{padding-right:0px;padding-top:0px;width:250}
 #layout td.c2t1{padding-left:170px;padding-  top:0px;width:600px;border-right:#930000 0px solid;}
 #layout td.c2t2{width:60px}
 可以把这段代码放在.stage后面C2T3是指定页面右边属性,c2t1指定左边属性,c2t2是左和右的间距.(注意:此代码只针对把空间分成两列的)
  padding:检索或设置对象四边的内补丁,有上下左右
  padding-right:在这里不讲专业术语了,为了大家便于了解,可以当作是指定对象距离右边的位置
  padding-top:(同上,指定顶部)
  padding-left:(同上,指定左边)
  PADDING-BOTTOM:(同上,指底部)
  如果你有很好的美工基础,也可以在这里插入相应的背景图片美化空间.

  下面我以我的CSS代码作注释.如要使用,请去掉注释内容.
  注意:不小心有些文字搞成黑色了,居然修改不回来,如果看不清楚,请用鼠标选取后再看

/* 浪儿制作  http://hi.baidu.com/jsqk/ ◎浪儿出手,必是精品◎  All Rights reserved. css by jsqk. */

/* green style VER 3.1  */

#phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray();WIDTH: 209px;HEIGHT:45px;margin-top:12px} (播放器代码)

.f14 {color:#668214}

BODY {
 
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;color:#668214;background:url(http://hiphotos.baidu.com/jsqk/pic/item/5384d11b11e595d5ad6e75cf.jpg)
(指定页面总体属性,注意,在这里可以添加鼠标效果.最简单的鼠标效果代码:CURSOR: url('http://xiaobing8155.googlepages.com/Plusnaarrow.cur');
overflow-y:auto;
overflow-x:hidden;
margin:0;
padding:0;}  (这四个代码对于要移动空间导航栏的一定要记得使用,如要把导航栏移动到中间,不使用此代码将使页面变宽,出现横向拉条,影响美观.简单的说下overflow:

overflow : visible | auto | hidden | scroll
取值:

visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window frame 的尺寸裁切。并且 clip 属性设置将失效
auto : 在必需时对象内容才会被裁切或显示滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
 )

#main {BACKGROUND: url(http://hiphotos.baidu.com/jsqk/pic/item/98675166f1369c24ab184cde.jpg) no-repeat 8px 0px;

} (这个是指定空间名称那部分属性的,如添加背景图片之类的.百度默认CSS里没有这个代码,可以自己加入,方便设计空间)

#header{ HEIGHT: 380px;margin-left:10px
} (这个是很重要的,如果用#main加空间名称那里的背景图片,千万记得这里的高度要和背景图片的高度一样.margin-left检索或设置对象左边的外补丁.)

#header div.tit a.titlink{font-size:0px;color:#ffffff;text-decoration:none}
#header div.tit a.titlink:visited{font-size:0px;color:#ffffff;text-decoration:none}
#header div.desc{top:217px;left:300px;color:#ffffff;font-size:12px}
#header div.tit{top:197px;left:300px}

#tab{top:14px;left:-35px;background:transparent;} (这个代码是空间导航栏位置的,你可以修改TOP和left来移动导航拦位置.)
#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:3px;line-height:19px;background-color:transparent;color:#ffffff;font-size:14px} (导航栏文字的背景)
#tab span{color:#ffffff;font-size:14px} (导航栏字体颜色和大小)
#tab a:link{color:#ffffff;text-decoration:none;font-size:14px} (导航栏被点击后的属性)
#tab a:visited{color:#ffffff;text-decoration:none;font-size:14px}
#tab2{background:transparent;}
#tab2 span{color:#000000;font-size:12px;font-weight:bold}
#tab2 a{font-size:12px}
#tab2 a:link{color:#0000CC}
#tab2 a:visited{color:#0000CC} 对于这段代码本人没有研究

.stagepad {width:600px;margin-left:55px;
 
}

.stagepad a:link{text-decoration:none;font-weight:bold}
.stagepad a:visited{text-decoration:none;font-weight:bold}

#layout {width:974px;margin-left:0px;background:url(http://hiphotos.baidu.com/jsqk/pic/item/566af436ededf6310a55a9ad.jpg) no-repeat bottom -18px;padding-bottom:50px}
(这个是页面下方的背景图片,大家可以看我的空间下方有个页面制作:午夜浪儿的字样,靠的就是这个代码.)

.stage {background:url(http://hiphotos.baidu.com/jsqk/pic/item/146939874190ba2ac75cc33f.jpg) no-repeat 0px 10px
}
(这个代码上面已经有讲解,就是设置导航栏下部分的背景图片的)

#layout td.c2t3{padding-right:0px;padding-top:0px;width:250}
#layout td.c2t1{padding-left:170px;padding-top:0px;width:600px;border-right:#930000 0px solid;}
#layout td.c2t2{width:60px}

(此段代码上面已经有详细讲解)

#comm_info{color:#ffffff;font-family:Arial;text-align:center;padding-top:19px;TEXT-INDENT:px;}
#comm_info div.line{margin-top:0px;border-top:0px solid #5C85BB;}
#comm_info a{color:#ffffff;text-decoration:none;}
#comm_info a:visited{color:#ffffff;text-decoration:none}

#page{height:30px;font-size:12px;font-family:Arial;text-align:center}
#page span{padding:3px;color:#1a4a8a;font-size:14px;font-weight:bold}
#page a.pc{color:#ffffff;font-size:14px;font-weight:bold}
#page a.pc:visited{color:#ffffff}
#page a.pi{padding:3px;color:#ffffff;font-size:14px}
#page a.pi:visited{color:#ffffff}

.mod{margin-bottom:20px}
.modhandle{cursor:move}
.modth{height:0px}
.modhead{padding:0px 4px 0 4px;padding-top:px;padding-bottom:3px; LINE-HEIGHT:17px;border-bottom:#ffffff1px solid;text-align:center}
.modopt{padding:4px 4px 0 0}
.modtit{color:#ffffff;font-size:14px;font-weight:bold}a.modtit{color:#ffffff}a.modtit:visited{color:#ffffff}
.modtitlink{color:#ffffff;font-size:12px;font-weight:bold}a.modtitlink{color:#ffffff;text-decoration:none}a.modtitlink:visited{color:#ffffff;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:none}
.modact{color:#ffffff;font-size:12px;text-align:center}a.modact:link{color:#ffffff}a.modact:visited{color:#ffffff}
.modbox{padding:0px 0px 0 0px}
.modtl{background:url(http://hiphotos.baidu.com/jsqk/pic/item/c8577889b18180b30e24440e.jpg) 0px -1px}
.modtc{background:url(http://hiphotos.baidu.com/jsqk/pic/item/b0cb0cb33ef4cda7d8335a0e.jpg)}
.modtr{background:url(http://hiphotos.baidu.com/jsqk/pic/item/55139d513f63802443a75b0e.jpg) -2px -1px}
.modbl{line-height:1px}
.modbc{line-height:1px}
.modbr{line-height:1px}
(本段代码请参考百度空间官方CSS帮助)

#mod_bloglist{padding-top:0px}
#m_blog {padding-top:0px}
(指定文章内容距离#header部分的距离.)
(下面的代码请大家参考百度官方CSS帮助)

#m_blog div.cnt a {text-decoration:none;color:#344500}
#m_blog div.cnt a:visited {text-decoration:none;color:#344500}
#m_blog div.cnt a:hover {border-bottom:1px #344500 dashed;color:#344500}
#m_blog {padding-left:15px;padding-right:15px;margin-top:20px}
#m_blog div.tit{padding-top:0px;padding-bottom:0px;color:#4E7304;font-size:13px;font-weight:bold;text-decoration:none;border-bottom:1px solid #4E7304;border-top:0px solid #ffffff;TEXT-INDENT: 119px;line-height:17px}
#m_blog div.tit a{color:#4E7304;font-size:13px;font-weight:bold;text-decoration:none}
#m_blog div.tit a:visited{color:#4E7304;text-decoration:none}

#m_blog div.date{font-size:13px;margin:-20px 0 8px 0;color:#4E7304;TEXT-INDENT: 7px;font-weight:bold}
#m_blog div.cnt{color:##005533;line-height:20px;font-size:15px;font-weight:700;PADDING-RIGHT: 10px; PADDING-LEFT: 10px;PADDING-TOP: 10px;PADDING-bottom: 10px;}

#m_blog div.more{margin:14px 0 16px 0;text-decoration:none;font-weight:bold}
#m_blog div.more a{color:#ffffff;font-size:14px;text-decoration:none;font-weight:bold}
#m_blog div.more a:visited{color:#ffffff;text-decoration:none;font-weight:bold}

#m_blog div.opt{color:#689411;font-size:12px}
#m_blog div.opt a{color:#689411;font-size:12px;text-decoration:none}
#m_blog div.opt a:visited{color:#689411;text-decoration:none}
#m_blog div.line{margin-top:17px;line-height:17px}
#m_blog div.none{padding:100px 0 100px 0;color:#1a4a8a;font-size:14px}

#m_pro {text-align:left;padding-left:18px;padding-right:10px;}
#m_pro a{color:#995C00;font-weight:bold;text-decoration:none;text-align:center}
#m_pro a:visited{color:#995C00;font-weight:bold;text-decoration:none}
#m_pro div.image{text-align:center;;border-bottom:#ffffff 1px solid;padding-top:5px;padding-bottom:5px}
#m_pro div.act{margin-top:10px}
#m_pro div.user{color:#995C00;font-size:12px;font-weight:bold}
#m_pro div.desc{color:#995C00;font-size:12px}
#m_pro div.line{margin-top:17px;line-height:17px;border-top:1px solid #1A4A8A}
#m_pro td{color:#995C00;line-height:24px;font-size:14px}

#m_album div.image{text-align:center;padding-top:30px}
#m_album div.page{color:#995C00;font-size:12px;text-align:center}
#m_album div.page a{color:#995C00;font-size:12px}
#m_album div.page a:visited{color:#330000}

#m_links {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift}
#m_links div.item{color:# 6E981A;font-size:12px; LINE-HEIGHT: 21px}
#m_links div.item a{color:#995C00;font-size:12px;text-decoration:none}
#m_links div.item a:visited{color:#995C00}

#m_links div.linediv.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#m_artclg {border-top:0px solid #5C85BB;padding-top:5px}
#m_artclg {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift}
#m_artclg div.item{color:#995C00;font-size:12px;text-align:left;padding-left:0px}
#m_artclg div.item a{color:#995C00;font-size:12px;text-decoration:none}
#m_artclg div.item a:visited{color:#995C00;text-decoration:none}
#m_artclg div.linediv.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#m_comment {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift}
#m_comment div.item{color:#D2E9F4;font-size:12px;}
#m_comment div.item a{color:#995C00;font-size:12px;}
#m_comment div.item a:visited{color:#995c00;text-decoration:none;}
#m_comment div.item a.cnt{color:#995C00;font-size:12px;}
#m_comment div.item a.cnt:visited{color:#995c00;text-decoration:none;font-weight:normal;text-align:center}
#m_comment div.item a.cnt:hover{color:#D2E9F4;text-decoration:underline;text-align:left}
#m_comment div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#m_albumlist div.note{color:#995C00;font-size:14px}
#m_albumlist div.desc{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px}
#m_albumlist div.none{padding:100px 0 100px 0;color:#995C00;font-size:14px}
#m_albumlist div.line{margin-top:10px;line-height:16px;border-top:1px solid #ffffff}
#m_albumlist div.tit{margin:6px 0 7px 0;color:#995C00;font-size:14px}
#m_albumlist div.tit a{color:#995C00;font-size:14px}
#m_albumlist div.tit a:visited{color:#995C00}
#m_albumlist span.count{color:#995C00;font-size:12px;font-weight:bold}
#m_albumlist span.size{color:#999999;font-size:12px;font-family:Arial}
#m_albumlist a.act{color:#995C00;font-size:12px}
#m_albumlist a.act:visited{color:#995C00}
#m_albumlist a.page{color:#330000;font-size:14px}
#m_albumlist a.page:visited{color:#330000}
#m_albumlist td.image{padding:5px;border:1px solid #999999;background:#995C00}

#m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px}
#m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px}
#m_friend div.user{margin-top:4px;color:#995C00;font-size:12px}
#m_friend div.user a{color:#995C00;font-size:12px}
#m_friend div.user a:visited{color:#995C00}

#m_friend div.line{margin-top:10px;line-height:16px;border-top:1px solid #995C00}

#m_mylink1 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift}
#m_mylink1 div.item{color:#995C00;font-size:12px}
#m_mylink1 div.item a{color:#995C00;font-size:12px;text-decoration:none}
#m_mylink1 div.item a:visited{color:#995C00}
#m_mylink1 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#m_mylink2 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift}
#m_mylink2 div.item{color:#995C00;font-size:12px}
#m_mylink2 div.item a{color:#995C00;font-size:12px;text-decoration:none}
#m_mylink2 div.item a:visited{color:#995C00}
#m_mylink2 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#m_mylink3 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift}
#m_mylink3 div.item{color:#995C00;font-size:12px}
#m_mylink3 div.item a{color:#995C00;font-size:12px;text-decoration:none}
#m_mylink3 div.item a:visited{color:#995C00}
#m_mylink3 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#m_mylink4 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift}
#m_mylink4 div.item{color:#995C00;font-size:12px}
#m_mylink4 div.item a{color:#995C00;font-size:12px;text-decoration:none}
#m_mylink4 div.item a:visited{color:#995C00}
#m_mylink4 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#m_filed  {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift}
#m_filed div.item{color:#995C00;font-size:12px}
#m_filed div.item a{color:#995C00;font-size:12px}
#m_filed div.item a:visited{color:#995C00}
#m_filed div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#m_setting a{color:#995C00}
#m_setting a:visited{color:#995C00}
#m_setting{line-height:22px;color:#995C00;font-size:14px}
#m_setting img.sel{border:4px solid #FFDB7B}
#m_setting img.unsel{border:1px solid #D2D2D2}
#m_setting span.tit{font-size:14px}
#m_setting span.usr{color:#995C00}
#m_setting div.sel{padding-top:6px;font-size:14px;font-weight:bold}
#m_setting div.line{margin-top:20px;line-height:16px;border-top:1px solid #ffffff}

#m_sysinfo a{color:#995C00}
#m_sysinfo a:visited{color:#995C00}
#m_sysinfo{line-height:22px;color:#995C00;font-size:14px}
#m_sysinfo span.new{color:#FF0000;font-size:10px;font-family:Arial}
#m_sysinfo span.date{color:#995C00;font-size:14px}

#m_setbase{color:#995C00;font-size:14px}
#m_setbase td{color:#995C00;font-size:14px}
#m_setbase div.line{margin-top:5px;line-height:8px;border-top:1px solid #ffffff}

{all rights reserved,http://hi.baidu.com/jsqk}
#in_comment div.tit{margin-bottom:12px;color:#995C00;font-size:14px;font-weight:bold}
#in_comment div.user{margin-bottom:6px;color:#995C00;font-size:12px}
#in_comment div.user a{color:#995C00;font-size:12px}
#in_comment div.user a:visited{color:#995C00}
#in_comment div.user span.date{color:#995C00;font-size:12px}
#in_comment div.desc{color:#995C00;font-size:12px}
#in_comment div.line{margin-top:17px;line-height:17px;border-top:1px solid #995C00}

#in_send div.tit{margin:10px 0 10px 0;color:#995C00;font-size:14px;font-weight:bold}
/* 请不要随意修改版权,尊重别人的劳动成果.如有需要,请和浪儿本人联系 */


类别:教程 | 添加到搜藏 | 浏览() | 评论 (1)
 
最近读者:
 
网友评论:
1
2007-11-21 10:17 | 回复
受益不线,谢谢...
 
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu