林依的吧吧 关注:7贴子:798
  • 13回复贴,共1

【CSS】从"零"开始学玩百度空间

只看楼主收藏回复

让你看懂css各个参数   


line-height: 16px 
宽度      (具体位置)-width: 16px 
文字缩行  text-indent: 2px  
文字字体  font-family: "华文彩云" 
文字颜色  font-color: #ffffff 
文字大小  font-size: 21px


http://hi.baidu.com/tchzx 

文字排列  font-aligh:  
left 左对齐 
center 居中 
right 右对齐 
top  顶对齐 
bottom 底对齐 

边界 margin-top:(允许值:长度,百分比)(边界分为上,下,左,右) 
补白 padding-top: (允许值:长度百分比) 

顶空格填充, padding-top: 20px;, 
底空格填充    padding-bottom: 5px; 
左空格填充    padding-left: 100px;  
右空格填充    padding-right: 55px  

顶边框宽度    border-top-width: 3px 
底边框宽度    border-bottom-width: 5px 
左边框宽度    border-left-width: 1px 
右边框宽度    border-right-width: 1px  
边框上 border-top:(允许值,样式颜色,宽度,样式) 
    下 ………-bottom 
    左… 
    右… 


http://hi.baidu.com/tchzx

边框样式      border-style: none 
none(没有) | dotted(有点的) | dashed(虚线) | solid(固体) | double(两倍) | groove( 凹槽) | ridge(凸出) | inset(插入物) |tset(开头) ] 


文字修饰   { text-decoration: none } 
blink文字闪烁 
none使得上述效果都不会发生 

定位(左边和顶部)  {position: absolute; left: 100px; top: 43px }(将标记的内容定位于左100px顶43px)(另外可以添加 width:130px 限制宽度为130)(或添加heigh: 130px)(允许值:长度,百分比) 

标记的内容隐藏  p { visibility: hidden } (visible为看见hidden为隐藏inherit为可视性设置) 




http://hi.baidu.com/tchzx

链接不显示下划线  
A:link { text-decoration: none }  

颜色  color: # 

背景于文字之后 background-image: url( dfdf) 
背景      background: url(dd.jpg)    
背景不滚动  background-attachment: fixed 

背景定位    background-position: 
top将背景图象同前景要素的顶部对齐。  
bottom将其同前景要素的底部对齐。  
left将其同左边对齐。  
right将其同右边对齐。  
center将其水平居中(如果使用在另一关键字前面)或垂直居中(如果用在另一关键字后面)。 
  
背景重复  background-repeat:   (不重复)(缺省为重复) 
背景长度  background-position: 70px (水平70) 10px (垂直10)   ;  background-repeat: repeat-y(垂直平铺)或 repeat-x (水平平铺) 



http://hi.baidu.com/tchzx
背景不滚动 
body{background:url('http://hiphotos.baidu.com/monyer/pic/item/d375e4cd9bf5b8510eb34568.jpg') no-repeat fixed center;  
 cursor:url('http://hiphotos.baidu.com/monyer/pic/item/7345d3c81000ec177e3e6f72.jpg');  
 SCROLLBAR-FACE-COLOR: #fe90b0;  
 SCROLLBAR-HIGHLIGHT-COLOR: #fec5d7;  
 SCROLLBAR-SHADOW-COLOR: #cc3366;  
 SCROLLBAR-3DLIGHT-COLOR: #ffffff;  
 SCROLLBAR-ARROW-COLOR: #cc3366;  
 SCROLLBAR-TRACK-COLOR: #ffb2cc;  
 SCROLLBAR-DARKSHADOW-COLOR: #cc3366;  
 SCROLLBAR-BASE-COLOR: #ffb1cb;  




1楼2007-08-13 20:28回复
    我们可以看到CSS的语句是内嵌在HTML文档内的。所以,编写CSS的方法和编写HTML文档的方法是一样的。
      您可以用任何一种文本编辑工具来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具(Frontpage、Ultraedit等),都可以用来编辑CSS文档。 
      那么您可能会问,独立编辑好的CSS文档怎样加入到HTML文档中呢?其实在第一章中的例子里已经介绍了两种方法。
      一种是把CSS文档放到<head>文档中: 
      <style type=“text/css”> …… </style> 
      其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。 
      另一种方法是把CSS样式表写在HTML的行内,比如下面的代码: 
      <p style=“font-size:14pt;color:blue”>蓝色14号文字</p> 
      这是采用<Style=“ ”>的格式把样式写在html中的任意行内,这样比较方便灵活。   还有一种方法是:把您编辑好的CSS文档保存成“.CSS”文件,然后在<head>中定义。定义的格式是这样的: 
      <head> <link rel=stylesheet href=“style.css”> …… </head> 
      我们看到这里应用了一个<Link>,“rel=stylesheet”指连接的元素是一个样式表(stylesheet)文档。一般这里是不需要您改动的。
      而后面的“href=‘style.css’”指的是需要连接的文件地址。您只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余代码。 
      本章主要介绍了编写CSS的方法以及如何把作好的CSS文档与HTML结合起来运用。您可以根据自己编写的HTML代码的结构、长度来选择用哪一种方法将CSS与之结合。


    2楼2007-08-13 20:31
    回复
      #usrbar:右上角的整个用户条。
      #mnum:用户条中显示的消息条数。

      #main:空间主内容,包括所有模块。

      空间名称、简介
      #header:空间头部的整个标题部分。
      #header div.lc
      #header div.rc
      #header div.tit:空间名称,即主标题。
      #header div.tit a.titlink:空间名称链接.
      #header div.tit a.titlink:visited:空间名称链接(点击后).
      #header div.tit a.titlink:hover:空间名称链接(鼠标置于其上时).
      #header div.tit a.titlink:link:空间名称链接(点击前).
      #header div.desc:空间简介,即副标题。

      导航栏
      #tabline:分隔符,用来与空间名称分开。
      #tab:导航菜单栏。
      #tab a.on:“主页链接”
      #tab a.on:link:“主页链接”
      #tab a.on:visited:“主页链接”
      #tab a.on:hover:“主页链接”
      #tab span:导航栏分隔符“|”
      #tab a:link:其它菜单项
      #tab a:visited:其它菜单项

      设置里面的 (基本选项 | 模板设置 | 高级设置 | 访问统计) 这行的属性(感谢suny_00提供)
      #tab2{background:#DAE9F5}
      #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}

      .stage:页面正文所有部分,内嵌一个表格,表格内包含所有内容,并形成特定版式结构

      竖栏表格边框
      #layout td.c2t1
      #layout td.c3t1
      #layout td.c3t3{border-right:1px dashed #A6A6A6}

      #comm_info{color:#333333;font-family:Arial;text-align:left}
      #comm_info div.line{margin-top:5px;line-height:8px;border-top:1px dashed #A6A6A6}
      #comm_info a{color:#4A7FF8}

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

      #mod_profile:个人档案模块
      .mod:个人档案模块
      .modhandle{cursor:move}

      .modth:模块标题
      .modhead:模块标题栏
      .modopt:模块选项
      .modtit:标志标题文字“个人档案”
      a.modtit{color:#666666}a.modtit:visited{color:#666666}
      .modtitlink{color:#666666;font-size:12px;font-weight:bold}
      a.modtitlink{color:#666666;text-decoration:none}
      a.modtitlink:visited{color:#666666;text-decoration:none}
      a.modtitlink:hover{color:#666666;text-decoration:underline}
      .modact:“修改个人资料”链接
      a.modact:link:“修改个人资料”链接
      a.modact:visited:“修改个人资料”链接

      .modbox:模块内容

      .modtl:第一列,空列
      .modtc:第二、三列,个人档案、修改个人资料
      .modtr:第四列,空列
      .modbl{background-color:#FFFFFF;line-height:1px}
      .modbc{background-color:#FFFFFF;line-height:1px}
      .modbr{background-color:#FFFFFF;line-height:1px}

      文章列表模块
      #mod_bloglist:整个文章列表模块
      文章模块
      #m_blog div.tit:标题
      #m_blog div.tit a
      #m_blog div.tit a:visited
      #m_blog div.date:日期
      #m_blog div.cnt:文章内容
      #m_blog div.more:“阅读全文>>”
      #m_blog div.more a:“阅读全文>>”链接

      #m_blog div.more a:visited
      #m_blog div.opt:菜单栏
      #m_blog div.opt a:菜单项链接
      #m_blog div.opt a:visited
      #m_blog div.line:分隔条
      #m_blog div.none{padding:100px 0 100px 0;color:#333333;font-size:14px}

      “个人档案”内容
      #m_pro a:其中链接
      #m_pro a:visited
      #m_pro div.image:头像
      


      3楼2007-08-13 20:32
      回复
        #m_pro div.act{margin-top:10px}
        #m_pro div.user:用户名
        #m_pro div.desc:用户的简介
        #m_pro div.line{margin-top:17px;line-height:17px;border-top:1px dashed #A6A6A6}
        #m_pro td{color:#333333;line-height:24px;font-size:14px}

        相册模块
        #mod_album:整个相册模块
        #m_album:相册模块内容
        #m_album div.image:图片
        #m_album div.page{color:#333333;font-size:12px;text-align:center}
        #m_album div.page a{color:#0000CC;font-size:12px}
        #m_album div.page a:visited{color:#0000CC}

        友情链接模块
        #mod_links:整个友情链接模块
        #m_links:友情链接模块内容
        #m_links div.item:条目
        #m_links div.item a
        #m_links div.item a:visited
        #m_links div.line:分隔符

        文章分类模块
        #mod_artclg:整个文章分类模块
        #m_artclg:模块内容
        #m_artclg div.item:条目
        #m_artclg div.item a:条目链接
        #m_artclg div.item a:visited:条目链接
        #m_artclg div.line:条目分隔条

        最新评论模块
        #mod_comment:整个最新评论模块
        #m_comment:模块内容
        #m_comment div.item:评论作者
        #m_comment div.item a:
        #m_comment div.item a:visited
        #m_comment div.item a.cnt:评论内容链接
        #m_comment div.item a.cnt:visited
        #m_comment div.item a.cnt:hover

        #m_comment div.line:条目分隔条

        相册列表
        #m_albumlist div.note{color:#333333;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:#333333;font-size:14px}
        #m_albumlist div.line{margin-top:10px;line-height:16px;border-top:1px dashed #A6A6A6}
        #m_albumlist div.tit{margin:6px 0 7px 0;color:#333333;font-size:14px}
        #m_albumlist div.tit a{color:#4A7FF8;font-size:14px}
        #m_albumlist div.tit a:visited{color:#4A7FF8}
        #m_albumlist span.count{color:#333333;font-size:12px;font-weight:bold}
        #m_albumlist span.size{color:#999999;font-size:12px;font-family:Arial}
        #m_albumlist a.act{color:#4A7FF8;font-size:12px}
        #m_albumlist a.act:visited{color:#4A7FF8}
        #m_albumlist a.page{color:#0000CC;font-size:14px}
        #m_albumlist a.page:visited{color:#0000CC}
        #m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF}

        好友
        #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:#333333;font-size:12px}
        #m_friend div.user a{color:#4A7FF8;font-size:12px}
        #m_friend div.user a:visited{color:#4A7FF8}

        #m_friend div.line{margin-top:10px;line-height:16px;border-top:1px dashed #A6A6A6}

        #m_setting a{color:#4A7FF8}
        #m_setting a:visited{color:#4A7FF8}
        #m_setting{line-height:22px;color:#333333;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:#333333}
        #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 dashed #A6A6A6

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

        #m_setbase{color:#333333;font-size:14px}
        #m_setbase td{color:#333333;font-size:14px}
        #m_setbase div.line{margin-top:5px;line-height:8px;border-top:1px dashed #A6A6A6}

        #in_comment{width:710px}
        #in_comment div.tit{margin-bottom:12px;color:#333333;font-size:14px;font-weight:bold}
        #in_comment div.user{margin-bottom:6px;color:#333333;font-size:12px}
        #in_comment div.user a{color:#4A7FF8;font-size:12px}
        #in_comment div.user a:visited{color:#4A7FF8}
        #in_comment div.user span.date{color:#333333;font-size:12px}
        #in_comment div.desc{color:#333333;font-size:12px}
        #in_comment div.line{margin-top:17px;line-height:17px;border-top:1px dashed #A6A6A6}

        #in_send div.tit{margin:10px 0 10px 0;color:#333333;font-size:14px;font-weight:bold}

        #comm_info:“其它”模块

        #ft:页脚的版权声明


        4楼2007-08-13 20:32
        回复
          自定义模块1 
          #m_mylink1 div.item{color:#333333;font-size:12px} 
          #m_mylink1 div.item a{color:#3399CC;font-size:12px;text-decoration:none} 
          #m_mylink1 div.item a:visited{color:#3399CC} 
          #m_mylink1 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} 
          自定义模块2 
          #m_mylink2 div.item{color:#333333;font-size:12px} 
          #m_mylink2 div.item a{color:#3399CC;font-size:12px;text-decoration:none} 
          #m_mylink2 div.item a:visited{color:#3399CC} 
          #m_mylink2 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} 
          自定义模块3 
          #m_mylink3 div.item{color:#333333;font-size:12px} 
          #m_mylink3 div.item a{color:#3399CC;font-size:12px;text-decoration:none} 
          #m_mylink3 div.item a:visited{color:#3399CC} 
          #m_mylink3 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} 
          自定义模块4 
          #m_mylink4 div.item{color:#333333;font-size:12px} 
          #m_mylink4 div.item a{color:#3399CC;font-size:12px;text-decoration:none} 
          #m_mylink4 div.item a:visited{color:#3399CC} 
          #m_mylink4 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}


          5楼2007-08-13 20:35
          回复
            主体背景 应用于整个空间

            一、背景为颜色

            body{background:#ffffff} /*表示背景为白色,亦可以用单词white代替*/

            即body{background:black} 

            二、背景为图片

            body{background:url(http//:图片位置) 参数} /*可识别的图片格式为jpg、gif、bmp等*/

            主要参数: 
            repeat :背景图像在纵向和横向上平铺 
            no-repeat:背景图像不平铺 
            repeat-x :背景图像在横向上平铺 
            repeat-y :背景图像在纵向平铺 

            示例:

            body{background:url(http://img.baidu.com/hi/temp10/hdr.jpg) no-repeat top right}

            /* top right 表示图片与浏览器的顶边和右边对齐*/

            /* bottom left 表示图片与浏览器的底边和左边对齐*/


            文章背景 

            主体背景并不应用于文章的背景,所以看到主页的文章背景与博客文章的背景并不一致,另外设置。


            6楼2007-08-13 20:37
            回复
              在百度空间中写文章的时候,打一个回车一下子就空了两行

              这样可以让文章看起来清爽明朗,但也有些许不便,有时候想让两行挤在一起那么该怎么办呢?

              如何在按回车的时候只换一行呢?

              其实很简单,在换行的时候+按Shift就可以了,也就是按Shift+回车,这样,换行的时候就不会一下子换两行了


              8楼2007-08-13 20:45
              回复
                padding-bottom: 22px; margin-bottom: 6px; 改后面数字即可,padding-bottom为距上高度,margin-bottom为距下高度。 

                个人档案

                #m_pro div.act{margin-top:5px; background:url(图片地址) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }

                文章列表

                #m_blog div.tit{font-size:14px;font-weight:bold; background:url(图片地址)no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }

                文章列表2

                #m_blog div.tit{font-size:14px;font-weight:bold; line-height:24px; text-indent:120px; background:url(图片地址)no-repeat; }

                文章列表3

                #tabline{top:89px; background:url(图片地址)no-repeat bottom; padding-bottom: 32px; margin-bottom: 6px; }

                相册

                #m_album div.image{text-align:center; background:url(图片地址) no-repeat bottom; padding-bottom: 45px; margin-bottom: 1px; }

                友情链接

                #m_links div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(图片地址)norepeat bottom; padding-bottom: 16px; margin-bottom: 10px; }

                最新评论

                 #m_comment div.item{color:#000000;font-size:12px; background:url(图片地址) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; } 

                文章分类

                #m_artclg div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5;background:url(图片地址) bottom;padding-bottom:16px;margin-bottom: 10px;} 

                其他区域

                #comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(图片地址) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; } 

                个人控制条中间

                #tabline{margin-top:-131px;right:5px;line-height:8px; background:url(图片地址) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}/*个人控制条日期显示*/


                9楼2007-08-13 20:47
                回复
                  #header{height:140px;background:transparent}
                  先调整这里的height,然后将#tabline{top:100px;background:#A1B6CE}和#tab{top:100px;}中的top后的数值相应的调整。这样,就可以让标题有足够的空间。

                   

                  然后再调整标题的大小。#header div.tit{top:8px;left:55px;line-height:100px;font-size:80px;font-family:隶书;filter:Shadow(Color=gray,Direction=135) }。

                   #tabline TAB菜单下方的横线{top:89px;background-color:#FFFFFF}
                  #tab TAB菜单主体{top:67px;background:url(temp1/tabbg.gif) repeat-x}

                  这两项是菜单的属性。对照修改一下就可以了。

                  #header div.desc 空间简介{top:33px;left:20px;color:#FFFFFF;font-size:13px}
                  这里是简介的属性,要变动简介的位置和大小就改这里


                  10楼2007-08-13 20:49
                  回复
                    加入#m_pro .basic a.nlk{display:none}代码即可隐藏“查看该用户在百度的”分类及"该用户加入的圈子" , 该代码可只隐藏空间“个人档案”页面部分内


                    11楼2007-08-21 19:45
                    回复
                      1.新建自定义模块。进入 设置,高级设置,开始自定义,在内容模块将自定义模块2勾选,确定后保存修改。


                      2.返回主页进行模块编辑,模块名称取为天气预报,链接名称为:天气预报,链接地址为:http://www.tq121.com.cn/ 操作完成后返回。


                      3.此时进入设置,模板设置,找到自己用的CSS代码,找到刚才自定义模块的代码,将四段以#m_mylink2开头的代码换成以下代码:

                      #m_mylink2 div.item a{color:#FFFFFF;font-size:15px;text-align:center;font-family:隶书}
                      #m_mylink2 div.item a:visited{color:#FFFFFF;font-family:隶书}
                      #m_mylink2 div.line{background:url(http://firetear.com/weather/weather.aspx?city=%u5BBF%u8FC1&style=1) no-repeat bottom;line-height:40px;margin-bottom: 10px;margin-top:5px;padding-bottom: 138px}


                      4.点保存并应用就可以看见(保存前先预览一下)。


                      12楼2007-08-21 19:46
                      回复
                        • 124.93.161.*
                        红色(ff0000) 蓝色(0000ff) 黑色(000000)粉红(#ff00ff)
                        黄色(ffff00) 紫色(ff00ff) 白色(ffffff)


                        13楼2007-09-02 18:49
                        回复
                          wa~~~


                          14楼2007-09-16 20:00
                          回复
                            谢谢林子,原来还有这麼好的东东


                            IP属地:江西15楼2007-09-30 09:00
                            回复