灵月希吧 关注:20贴子:613
  • 3回复贴,共1

〖百度空间〗「空间」L的新手百度CSS入门初部完成

只看楼主收藏回复

〖百度空间〗「空间」L的新手百度CSS入门初部完成 


1楼2008-05-02 12:00回复
    http://hi.baidu.com/llwws/blog/item/10946963708670600d33fa24.html 
    CSS.1 
    http://hi.baidu.com/llwws/blog/item/238d03e982a23a3fb90e2d25.html 
    CSS.2 
    为了防止内容过多被百度截停所以写在两个不同地方,被截停真是最倒霉的事,本人以后会在大家的提问中将它更加完善.我还会写一篇关于我如何掌握CSS的文章帮助新手.废话不多说,下面就是正文 

    http://www.baidu.com/search/hi/hi_css.html 

    楼上联接必读,读完再看下文,代码中中文要省去(和我的空间无关) 


    body{background:url(图片地址);CURSOR: url('鼠标联接');后面这一串是使图片变成我或者这个效果background-position:center;background-attachment:fixed} 

    body 整个空间页面{background-color:#FFFFFF}这是上面代码的原始代码,在编辑CSS中将它替换即可, 

    其中这串代码是鼠标代码CURSOR: url('鼠标联接i'); 

    background:url(图片地址); 

    这一串是插入背景图片也可以换成background-COLOR#FFFFFF; 

    COLOR:FFFFFF是选择你喜欢的饿颜色,不过有背景的可以把上面的代码去掉 

    如果你不喜欢我的这种效果可以改成body {background:url(图片地址);},如果你想要鼠标,把鼠标代码家入即可,切记不同代码要用;阁开 


    将这串代码加入下面长串代码的最后(即模块代码的最后),就可以有透明效果.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 


    .mod {margin-bottom:10px} 
    .modhandle{cursor:move} 
    .modth 模块标题栏主体{height:24px} 
    .modhead{padding:4px 4px 0 4px} 
    .modopt 模块操作区(如写新文章){padding:4px 4px 0 0} 
    .modtit 模块标题区(如文章列表){color:#FFFFFF;font-size:12px;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:underline} 
    .modact 操作文字链接(如文章列表){color:#FFFFFF;font-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited{color:#FFFFFF} 
    .modbox 模块内容区{padding:10px 10px 0 10px;background-color:#FFFFFF} 
    .modtl 模块左上角背景{background:url(temp1/ptitl.gif) no-repeat top left;line-height:1px} 
    .modtc 模块中上背景{background:url(temp1/ptitc.gif) repeat-x} 
    .modtr 模块右上角背景{background:url(temp1/ptitr.gif) no-repeat top right;line-height:1px} 
    .modbl 模块左下角背景{background-color:#FFFFFF;line-height:1px} 
    .modbc 模块中下背景{background-color:#FFFFFF;line-height:1px} 
    .modbr 模块右下角背景{background-color:#FFFFFF;line-height:1px} 


    filter:alpha(opacity=80);-这个代码为透明代码中调透明度的代码,数字可以换,越底越透明,越高就越不透明,另外这个代码可以插入别的代码中,如文章标题代码,就是第1个有#BLOD的代码,其实看过百度介绍的就该知道 


    a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse013.ani')} 这个是鼠标超链的代码,最好放在BODY之后,#header 主体部分{height:89px;background:#3399CC}之前 


    内容区域 .stage(TAB菜单与版权信息之间的区域){background:#F3F1F1} 

    这个是内背景代码及除版头以外的地方,将它改成 .stage{background:URL(图片地址)}就是换图片,如果不想用图的,可以用原代码,把颜色代码修改即可,不过,如果背景用了和我相同效果的最好不要改这个代码. 


    http://www.baidu.com/search/hi/hi_css.html 

    还是那句话必看,里面有颜色代码 
    


    2楼2008-05-02 12:01
    回复


      ;scrollbar-face-color:#57B1ED; 
       
       
       
       作者: lifelikeboat 2006-9-1 22:03   回复此发言 
       
      --------------------------------------------------------------------------------
       
      2 L的新手百度CSS入门初部完成 
       scrollbar-highlight-color:#199EF8; 
      scrollbar-3dlight-color:#9DE9FC; 
      scrollbar-darkshadow-color:#9DE9FC; 
      scrollbar-shadow-color:#9DE9FC; 
      scrollbar-arrow-color:#70C0F5; 
      scrollbar-track-color:#9DD5FC: 


      将以上代码加入CSS教程1中(http://hi.baidu.com/llwws/blog/item/10946963708670600d33fa24.html)提到的BODY部分就可以更改滚动条的颜色 

      如果眼调颜色就更改COLOR后的颜色代码即可,没个颜色代码都有不同作用,建议先备分CSS代码再尝试. 

       给大家个比较有用的代码 文章的透明滚动条代码..作者: 唯美之风 
      添加在#m_blog的最后就可以了.. 
      #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);} 
       
       


      其他代码也如法炮制例如友情联接只需将#m_blog改成#m_links,然后再改颜色代码,但是要注意高度就是这个代码height:1000px;1000是可改数字,根据你的需求进行修改,很多代码中都有这个代码例如我的空间的标题上SABER的图为什么可以这么大,这个下次再说, 


      如何在标题后加入图片,就是目前我空间上那个高达的图片,方法在#m_blog div.tit代码中插入以下代码如果某些代码已存在请把我的这代码的那部分去掉;text-indent:4cm; line-height:140px;font-weight:bold;color:#D366EE;font-size:15px;background:url(图片地址) no-repeat; 


      line-height:140px刚介绍过了 这个代码为前面的空格长度text-indent:4cm;也可以调 

      这个background:url(图片地址) no-repeat; 代码也可插入其他区域,例如最新评论,基本上都是每类型代码的第1个代码 

      从这开始 

      .mod{margin-bottom:10px} 
      .modhandle{cursor:move} 
      .modth{height:24px} 
      .modhead{padding:4px 4px 0 4px} 
      .modopt{padding:4px 4px 0 0} 
      .modtit{color:#000000;font-size:12px;font-weight:bold}a.modtit{color:#000000}a.modtit:visited{color:#000000} 
      .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:#FFFFFF;text-decoration:underline} 
      .modact{color:#000000;font-size:12px}a.modact:link{color:#000000}a.modact:visited{color:#000000} 

      到这是空间全透代码 




      切记不同CSS代码用用;格开,不过只有一个,还有要善于利用预览功能 


      如果有什么不懂的欢迎在我的空间留言或发信息给我


      3楼2008-05-02 12:01
      回复
        作者: lifelikeboat 2006-9-1 22:03   回复此发言 
         
        --------------------------------------------------------------------------------


        4楼2008-05-02 12:01
        回复