星羽de心愿吧 关注:20贴子:1,253
  • 2回复贴,共1

【经典】baidu空间模板代码详细教程

只看楼主收藏回复

注:<>括号不是代码内容 
另外,最好有个PS软件   

 
 -------------------------空间名称------------------------- 

body{background:#FFFFFF} 
整个空间的背景颜色;如果需要以图片作为背景,则替换为<background:url(图片地址) repeat>把里面图片地址替换掉就行,() 

保留; 
图片显示方式: 
 -- repeat : 横向,纵向平铺 
 -- repeat-y : 纵向平铺 
 -- repeat-x : 横向平铺 
 -- no-repeat : 无平铺 
 -- center : 居中 
 -- fixed : 锁定背景图,不随滚动条而移动 
例: 
body{background:#3399CC url(图片地址) no-repeat center fixed} 
<背景图片周围颜色为#3399CC;不平铺;图片居中显示;锁定> 


#header{height:89px;background:#3399CC} 
这是整个主题图的高度和颜色,就是<主页│博客│相册...>上面的那条蓝色区域;px是象素(wait,象素是什么? -- 我无话可 

说..),值越大区域越高,一般要等于或高于图片高度;插入图片方法和上面一样 


#header div.lc{background:url(图片地址) no-repeat} 
#header div.rc{background:url(图片地址) no-repeat top right} 
这两句是左右背景图的代码,<lc>是左边,<rc>是右边;MS图片插入都是默认以左上角开始,所以第二句中有<top>置顶、<right>置 

右--猜测而已.. 方法继续同上 - -! 
百度默认的是一边一个小蓝条条 
突法其想: 
 -- top:??px <距顶部??象素> 
 -- left:??px <距最左边??象素> 
 -- right:??px <距最右边??象素> 
在最后加入这个,应该能有作用吧... 因为我空间目前不需要那么复杂的说(懒?),有兴趣朋友可以自己试试(小白鼠?) 


#header div.tit{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑体} 
这句是调整空间名称位置和字体大小的 
 -- <距顶部8象素,最左边20象素,字体行高22象素(貌似于作业本中两条线的距离),文字大小20象素,黑体> 
字体行高一定要大于文字大小,否则字会显示不完全;据说CSS默认的字体不多,我也懒得一个个的试,大家继续小白鼠吧 - -! 
空间标题加萤光效果 
 -- <;filter:glow(color:#266EFF,strength=3)> 
颜色是萤光颜色(字体周围加上一圈颜色),不要跟背景板颜色同,<strength=3>是指发光大小,数值越大,萤光范围越大,但是字也 

糊了 
空间标题加阴影效果 
 -- <;filter:DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true)> 
里头颜色就是阴影的颜色啦,XY那两句我猜想是阴影结束的范围 


#header div.tit a.titlink{color:#FFFFFF;text-decoration:none} 
#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none} 
这两句是设置空间名称的;第一句是点击前的,第二句是点击后的;<文字颜色,文字样式>;两句都试过,无用.. 
文字样式: 
 -- none :  无装饰 
 -- blink :  闪烁 
 -- underline :  下划线 
 -- line-through :  贯穿线 
 -- overline :  上划线 
用不上的东西(不要扔我鸡蛋) 


#header div.desc{top:33px;left:20px;color:#FFFFFF;font-size:13px} 
空间简介部分,和空间名称一样;不过少了标题行高,多了个颜色,某C立刻无良地把标题和字体代码加进去,修改字体颜色大小,
OK... 把文字样式加入,无用;在空间名称中加入颜色代码和文字样式代码,继续无用....  
 

 -------------------------菜 单 栏------------------------- 

所谓菜单栏,就是<主页│博客│相册....>那些东东 

#tabline{top:89px;background-color:#FFFFFF} 
菜单下方的横线,<距离顶部89象素,颜色为#FFFFFF> 



#tab{top:67px;left:320px;background:url(背景图片) repeat-x} 
菜单主体部分,<距离顶部67象素,距离左边320象素,背景图片(若要透明效果就把这句删掉,也可以换成其他颜色,同上..),横向平铺(也可换成纵向平铺....有没有斜的?)> 



1楼2007-12-19 13:04回复


    #tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;background-color:#F3F1F1;line-height:19px;color:#197CAE;font-size:14px} 


    菜单选中状态 
     -- <margin-top:选中的那项的效果(比如选中<主页>,那么在主页周围会出现一个小框框,并且<主页>字体下降),值越高,效果越明显;border-left\right\top:前面提到的小框框左\右\上方的边框线粗细\类型\颜色;小框框的背景颜色(要透明就删掉);字体行高19象素;字体颜色为#197CAE;字体大小14象素> 
    这段代码好长,我自己看着都有点头晕 
    边框线类型: 
     -- solid : 实线 
     -- dotted :  点线 
     -- dashed :  虚线 
     -- double :  双线边框 
     -- groove :  3D凹槽 
     -- ridge : 菱形边框 
     -- inset :  3D凹边 
     -- outset :  3D凸边 
    (像双线菱形3D什么的,边框线要设置得粗点,起码要在3PX以上才会看得出效果) 


    #tab span{color:#FFFFFF;font-size:14px} 
    菜单与菜单之间的分割符"|" 
     -- <分割符的颜色;大小(长短?)> 
    据说把这句删除,那竖线还是会存在,而且变成默认黑色.... me无解 


    #tab a:link{color:#FFFFFF;text-decoration:none;font-size:14px} 
    菜单未点击时状态 
     -- <字体颜色;文字样式(无用...我要找315!我要打假!);字体大小> 
    貌似文字样式都用不上来的说? 


    #tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px} 
    菜单点击后状态 
     -- <同上..> 
    这可不是菜单选中状态,比如你点了主页,再点博客,那么主页的字体颜色等等就换掉了 


    #tab2{background:#DAE9F5} 
    所谓菜单2呢,就是<基本选项|模板设置|高级设置|访问统计>那一块(找不到?在你自己的空间里啦,慢慢找吧...) 
     -- <背景色> 


    #tab2 span{color:#000000;font-size:12px;font-weight:bold} 
    菜单2选中状态 
     -- <字体颜色;字体大小;最后那句是字体粗细代码> 
    字体粗细(3指定方法): 
    1.-- normal : 细的 
     -- bold : 粗的 
    2.-- lighter: 更细 
     -- bolder : 更粗 
    3.-- 100 : 最细 
     -- 200 : 更粗一点点 
     -- . 
     -- . 
     -- . 
     -- 800 : 很粗的了 
     -- 900 : 最粗 
    第1种是关键字法,包括<normal>和<bold>两个 
    第2种是相对粗细值法,相对粗细也是由关键字定义,但是它的粗细是相对于上级元素的继承值而言的,包括<bolder>和<lighter>两个(偶搞不明白..糊) 
    第3种为数字法,包括从<100>到<900>的9个数字序列(注意,只能是100、200之类的整百数),这些数字序列代表从最细<100>到最粗<900>的字体粗细程度,每一个数字定义的粗细都要比上一个等级稍微粗一些 


    #tab2 a{font-size:12px} 
    菜单2未选中状态 
     -- <字体大小> 


    #tab2 a:link{color:#0000CC} 
    菜单2未点击时状态 
     -- <字体颜色> 


    #tab2 a:visited{color:#0000CC}  
    菜单2点击后状态 
     -- <字体颜色> 
     
    


    2楼2007-12-19 13:04
    回复
      马克


      3楼2011-12-09 16:05
      回复