热门关键字： 　隐藏访问总人数 　光电信息工程 　班级 　足球 　奥运会
当前位置 :| 校内网首页>校内网教程>

校内网css详细教程

来源：www.xiaon.org.cn 作者：校内网 时间：2008-01-24 Tag： 点击：

下面我会详细的说明，并一步步教大家如何美化。如果不明白处，请在下面留言。
注意此教程我写得很详细,主要是照顾那些刚接触CSS有同学，所以内容相当多，劳你耐心看下来，对你是帮助的。

小提示：如果你在阅读本教程中有任何不明白处都可以在下面回复栏里回复,说明你的问题，我会再详细的为你解答。不用注册也可以回复。

再提示：其实看完这篇教程很多人还是糊里糊涂的，这是正常的，但是你看完这篇教程，你至少应该懂得如果我要加个大壁纸图片做背景，我知道复制哪一部分代码，修改里面的某些属性的值，就可以有我自己要的效果。在本文的最后，我会给出完整的代码，并标上注释。如果你认真看完此篇，完全可以自由的DIY.

另本人也没系统学过CSS，也是慢慢积累的，如有错误欢迎大家指导更正。

本文转载自博友网  http://www.bo-U.Cn/show-88-1.html

校内网粗略布局结构如下:(颜色相同为同一层次)

<body id="profilePage">
  <div id="container">
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="widebar">
      <div id="navigation"></div>
      <div id="content">
        <div id="userRelations"></div>
        <div id="userStatus"></div>
      </div>
    <div id="footer"></div>
  </div>
</body>

熟悉上面的结构，因为布局常用到对应该的id。

附上校内网的完整结构层次图

 padding:0;       

  • margin:0;         
  • background:url(你的图片地址) repeat;}  

    •  

    小节回顾：看到这里你应该要学会这些

    1. 了解校内网粗略布局结构
    2. 知道找到图片后要在日记那里上传
    3. 初步了解CSS的基本格式,如background是设置背景图片用的
    4. 能动手给页面加个背景图片(完全平铺,水平\垂直平铺,固定)
    5. 发现此教程的规律：代码都是浅绿色的，小提示都是浅灰色的。校内网(Logo)

      小提示：搜索是用文本编辑器中编辑-> 查找;弹出来的源文件内容很多，使用查找功能可以很快搜索到我们要找的代码。

      那么这个校内网LOGO选择符就是logo,其实很好找,在id或者class后面那个就是,等下我会举个class的例子.

      那么隐藏校内网LOGO可以用如下代码

      #logo{display:none}

      分析:

      logo就是那个选择符了,display是显示方式属性,值呢,就是none,显示方式是什么都没有就是不显示,logo前面那个#是用来区分id 和class用的,class是用.(小点)。因为logo是<h1></h1>的ID，所以我们现在设置可以使<h1></h1>内所有元素都隐藏，不管里面有多少元素,如果不明白先略过，下面还会解释到。


      下面说个class的例子，好让大家区别一下。

       比如我们要隐藏日记内容,日记可以显示三篇，最近发表的可以显示内容，现在我们要隐藏它

      如何找日记内容的选择符？如果不知道，先回头看看我刚才是如何找校内网LOGO的选择符的,自己先试一下。

      这里简单说一下，在刚才弹出文本编辑器里搜索你日记内容中的字符，你会搜索到如下类似的代码

      <div class="content">
              <div class="text"><P>我的日记内容</P></div>
              <p class="stat"><a target="_blank" href=http://blog.xiaonei.com/GetEntry.do?id=000&owner=000>阅读(0)</a><span class="pipe">|</span><a target="_blank" href="http://blog.xiaonei.com/GetEntry.do?id=000&owner=000#comments">评论(0)</a></p>
             </div>
             
            </div>

      你现在会自己写隐藏代码么？如果你有写成下面那样就很不错了

      #text{display:none}/*这个错误的*/

      但是这还不够，因为它是错的

      小提示：上面这一步可能对新手来说有点难，没事，如果不明白就略过吧。你只要懂得这么一种格式选择符+空格+选择符+{属性:值;}

      同样大家能不能找到我的同学,我的世界的选择符

      方法我教大家了，如果还不会，直接用下面

      /*隐藏版块*/
      #logo, #tagline, #copyrightlink, .announcement, #userBlog .more,  #utility, #permalink, #sidebar, #reportlink{
      display:none}

      如果你需要隐藏其他版块，看这里http://www.bo-u.cn/show-29-1.html

      这样就可以隐藏那些非常不必要的元素了。 

      这时涂鸦板里有这些代码
      1. /*博友网原创,版权所有,转载注明出处 http://www.Bo-U.cn*/  
      2. body { 
      3. padding:0;
      4. margin:0; 
      5. background:url(upload/2007_12/071228043573731.gif) repeat;}   
      6.   
      7. /*隐藏版块*/    
      8. #logo, #tagline, #copyrightlink, .announcement, #userBlog .more,  #utility, #permalink, #sidebar, #reportlink{
        display:none}

       

      小节回顾：看到这里你应该要学会这些

      1. 会查看图片的地址(URL)
      2. 会查看源代码并懂得使用搜索
      3. 掌握CSS的格式
      4. 知道display:none可以隐藏版块
      5. 了解查找选择符的方法并明白其含义
      6. 知道CSS有个继承的功能

      隐藏完后,只剩下骨架了,现在我们要重新布局了

      怎么布局,看大家喜欢,自己可以先在纸上画好框架,规化好各部分长度.

      校内网那瘦不啦叽的布局,给一种感觉:小气,不过他是为要照顾800X600尺寸的用户,不过大家现在应该没有用那么小的显示器了,我们就做适合1024X768的.

      很多同学喜欢在头部放个超大的图片.

      我们找这一张图片,原图地址:http://fm151.img.xiaonei.com/blog/20071026/12/13/A203041926697EWE.jpg

      用图片处理工具裁减成880X400

      小提示,大家不一定都要把图片裁成长880px,宽400px的,完全可以按自己喜欢就好.而且图片太大，文件大小也相应增加，你不希望整个页面都显示完了，顶部图片的影子都没有？如果这里改而900px而下面的长度也要相应的修改.而宽度则不需要更改.

      处理后地址:http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg

      然后用下面代码来实现

      /*头部图片设置*/
      #container{
      margin:0 auto;
      width:880px;
      background:url(http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg) no-repeat;} 

      放到涂鸦板,保存一下,看看效果,是不是错位很严重?

      这是因为你#header大小没有设置，再去掉头部背景图片

      /*头部设置*/
      #header {
      height:380px;
      background:none;}

      这个400px要根据你裁减的图片宽度

      搞定头部，内容部分不协调，我们设置设置长宽和背景色

      /*内容部分*/
      #content {
      border:0;
      width:840px;
      padding:20px 20px;
      background:#fff;}

      小提示:注意最后一个background:#fff;这个是让你的内容部分背景为白色.你可以先把上面代码放到涂鸦板里保存,看看效果就知道了。有的人希望改成透明的,这样可以看到原先弄的背景图片，你可以将#fff改成transparent，结果是：background:transparent;

      加上这个后,我们发现内容部分错位,修改下widebar宽度

      #widebar {
      width:880px;
      padding:0;
      border:0;
      background:none;}

      然后发现账号信息栏宽度太小,感觉很空洞.于是我们加宽它。

      /*账号信息列设置*/
      #userUpdates{
      width:640px;}

      小提示:如果你希望头像列和账号信息列左右对调。可以用float；
      /*账号信息列设置*/
      #userRelations{
      float:right;}

      /*账号信息列设置*/
      #userUpdates{
      width:640px;
      float:left;}

      最后只剩下底部了.

      /*底部设置*/
      #footer {
      width:880px;
      background:#9E9986;}

      底部也可以用图片来修饰，我没找到合适的，就用颜色代替。

      分析:

      margin是边距的意思，就像是房子和房子之间的距离。后面带四个数值，分别表示距上，距右，距下，距左的距离，很好记，顺时间的。数据可以用负值。比如上面的-10px,表示head层超出container层10px,如果是正数，就表示表示head层在container层往里10px处;auto表示自动。
      padding是填充距的意思,就像是房子里桌子和墙壁的距离,注意是房子里
      width和height分别表示长度和宽度。
      border是边框设置,我们不要边框,就用none.

      最后代码为 ,大家复制到涂鸦板保存看看效果.

      CSS代码
      1. /*博友网原创,版权所有,转载注明出处 http://www.Bo-U.cn*/      
      2. body {    
      3. padding:0;   
      4. margin:0;     
      5. background:url(upload/2007_12/071228043573731.gif) repeat;}       
      6.       
      7. /*隐藏版块*/        
      8. #logo, #tagline, #copyrightlink, .announcement, #userBlog .more,  #utility, #permalink, #sidebar, #reportlink{    
      9.  display:none}   
      10.   
      11. /*头部图片设置*/    
      12. #container{    
      13. margin:0 auto;   
      14. width:880px;   
      15. background:url(http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg) no-repeat;}    
      16.     
      17. /*头部设置*/  
      18. #header {   
      19. height:400px;   
      20. background:none;}   
      21.   
      22. /*内容部分*/  
      23. #content {   
      24. border:0;   
      25. width:860px;   
      26. padding:20px 20px;   
      27. background:#fff;}   
      28.   
      29. #widebar {    
      30. width:880px;    
      31. padding:0;    
      32. border:0;    
      33. background:none;}    
      34.   
      35. /*账号信息列设置*/    
      36. #userUpdates{   
      37. width:640px;}   
      38.   
      39. /*底部设置*/  
      40. #footer {   
      41. width:880px;   
      42. background:#9E9986;}  

       

      复制到涂鸦板,到现在为止大体效果已经出来，只要再细节处理就OK

      小节回顾：看到这里你应该要学会这些

      1. 掌握校内网层次结构
      2. 了解美化过程的步骤
      3. 知道左右位置对调是用float来控制

       

       

      细节处理 

      通过上面的美化好，整个框架已经出来了，但是还不是那么令人满意。

      如果你能完全掌握上面所提到的,基本细节部分也可以自己做了.

      头像和账号信息列边距太近，我们修改成下面，下划线部分为新增。

      /*头像列设置*/
      #userRelations{
      margin-left:10px;}

      /*账号信息列设置*/
      #userUpdates{
      width:610px;
      margin-right:20px;}

      设置下有多少人看过那部分，也就是个人状态栏

      #userStatus {
      margin:0;
      padding:10px 0px 10px 10px;}

      小提示：如果没有上面的代码，你会发现个人状态那一栏会变得很宽

      顶部导航

      小提示：这里说明一下，一般我们要先两个颜色，一种浅颜色，一种深颜色。

      浅颜色:#9E988C

      深颜色:#686357

      这两种颜色在下面会反复出现，就是为了区别鼠标在链接上的样式。

      先修改下导航那蓝色背景

      #navigation {
      background: #9E988C;}

      发现左边还有个1像素的蓝色边框,你可更换颜色(#600051是颜色代码),也可以去掉.

      这是换颜色
      border-left:#600051;

      这是去掉，建议使用去掉。
      border:0;

      导航中每个链接中间都有一个分隔竖线,我也可以换成自己喜欢的图片,也可以去掉

      这是换图片
      #navigation ul li{background-image:url(图片URL)!important;} 

      这是去掉,建议使用去掉。
      #navigation ul li{background-image:none !important;} 

      保存下，看一下效果，效果还行，鼠标移上去，背景不协调，我们修改一下链接移去的样式。

      这里插入CSS伪类--动态链接

      概念就不说了，看下面

      a:link {} /* 未访问的链接 */
      a:visited {} /* 已访问的链接 */
      a:hover {} /* 鼠标在链接上 */
      a:active {} /* 激活链接 */

      一般情况下a:link和a:visited的样式是一样的。

      因为只是修改导航部分的链接，所以在前面加上导航的ID。

      #navigation a:link, #navigation a:visited{
      color:#fff;
      background:#9E988C;}

      分析:

      上面的意思导航条的未访问链接和已访问链接样式是：颜色为#fff,背景为#9E988C

      小提示：属性一样的样式可以用逗号（,）隔开。

      那么鼠标在链接的代码要怎么写呢，大家自己先动手写一写。

      #navigation a:hover {
      background:#686357;}

      因为我们只要修改背景就行，颜色还是#fff就不能再写了。

      我们把鼠标移到学校后面的小倒三角，发现样式还是原先的。这里说明下，这是因为列表嵌套，子列表有他自己的样式，我现在修改子列表的样式

      先修改子列表的整体样式

      #navigation ul ul{
      background:#9E988C;
      border: 1px solid #686357;}

      分析：

      你注意到那两个ul了没，这个就是修改嵌套里面的子列表样式
      这里修改到背景颜色和边框

      再修改未访问链接和已访问链接样式

      #navigation ul ul a, #navigation ul ul a:visited {
      color:#fff;
      border-bottom: 1px solid #686357;
      background:#9E988C;}

      小提示: a:link可以略写成a就可以

      分析:

      上面修改到颜色和底边框和背景

      再修改鼠标在链接样式

      #navigation ul ul a:hover {
      color:#fff;
      background: #686357;

      导航部分最后代码是

      CSS代码
      1. /*导航条样式*/  
      2. #navigation {   
      3. border-left:0;   
      4. background: #9E988C;}   
      5.   
      6. #navigation ul li{   
      7. background-image:none !important;}     
      8.   
      9. #navigation a:link,#navigation a:visited {   
      10. color:#fff;   
      11. background:#9E988C;}   
      12.   
      13. #navigation a:hover {   
      14. background:#686357;}   
      15.   
      16. /*导航子列表样式*/  
      17. #navigation ul ul{   
      18. background:#9E988C;   
      19. border: 1px solid #686357;}   
      20.   
      21. #navigation ul ul a {   
      22. color:#fff;   
      23. border-bottom: 1px solid #686357;   
      24. background:#9E988C;}   
      25. #navigation ul ul a:hover {   
      26. color:#fff;   
      27. background: #686357;}   

      顶部导航做好了,下面做整体页面的文字颜色及链接颜色,还记得整何等用什么选择符么?

      注意:文字分有链接文字和无链接文字

      这里说明一下,为了保持整体色调一致,一般我们写代码之前就应该要好选配好色的.

      为了配合导航色调,我们采用整体颜色为#9E988C

      body {   
      color:#9E988C;
      padding:0;   
      margin:0;     
      background:url(upload/2007_12/071228043573731.gif) repeat;}

      小提示:以后如果需要用到以前用过的选择符,我都会把整个代码复制下面,新增加的会加粗.

      将上面代码覆盖到原先的body上,保存一下,看看是不是整个页面上的基本颜色都变,但是有链接部分的还是蓝色的,现在我们要处理这些链接样式.

      a:link,a:visited{
      color:#9E988C;}

      分析:

      还记得上面我们是怎么做导航的么,是不是有点像,因为前面没有id,所以表示整体的链接样式.还有就是未访问的链接和已访问的链接一般都是一样的,一样的属性,可以用逗号隔开,使代码简洁,这些我上面都说过了.不懂大家有印象没.

      下面做鼠标在链接时的样式

      a:hover{
      color:#686357;}

      整体链接样式的代码

      CSS代码
      1. /*整体链接样式*/  
      2.   
      3. /*未访问的链接和已访问的链接*/  
      4. a:link,a:visited{   
      5. color:#9E988C;}   
      6. /*鼠标在链接时的样式*/  
      7. a:hover{   
      8. color:#686357;}   

      将上面代码放到涂鸦板保存一下,现在不是大部分颜色都变成我们设置的.

      这里提示下,链接样式不单单只有改颜色这一种美化方法,也可以加背景颜色,边框等,有兴趣自己试下,代码上面都出现.

      不过底部的链接却不见了,原来我的设置的颜色和背景色混在一起了.现在我们再修改下底部链接的样式.

      既然是底部,前面一定得加相应的选择符#footer,前面我们已经用到这过个选择符,我们复制下面,加个文字颜色和链接颜色就行

      /*底部设置*/
      #footer {
      width:880px;
      background:#9E9986;}
      /*底部文字样式*/
      #footer p{
      padding:0 10px;
      color:#686357;}

      /*底部链接样式*/
      #footer a:link,#footer a:visited,#footer a:hover{
      color:#686357;}

      分析: 

      底部文字样式那边#footer后面为什么要加个p,直接加在底部设置那边不行么?
      因为文字部分是在<p></p>里面,校内网已经有设置p样式,所以我们要覆盖他的p样式.padding出现了，大家明白他作用么？不明白？你先去掉padding:0 10px;

      保存一下，对比下有和没有的区别就明白了。另有的同学不喜欢#footer那边的文字，你可以在上面隐藏版块那边加个#footer p,这样底下就什么字都没了，你只要加个图片就OK。

       

       

      CSS代码 到目前为止，你的涂鸦板应该有以下代码
      1. /*整体页面设置*/              
      2. body {          
      3. color:#9E988C;        
      4. padding:0;           
      5. margin:0;             
      6. background:url(upload/2007_12/071228043573731.gif) repeat;}             
      7.               
      8. /*隐藏版块*/                
      9. #logo, #tagline, #copyrightlink, .announcement, #userBlog .more,  #utility, #permalink, #sidebar, #reportlink{            
      10.  display:none}           
      11.           
      12. /*头部图片设置*/            
      13. #container{            
      14. margin:0 auto;           
      15. width:880px;           
      16. background:url(http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg) no-repeat;}            
      17.             
      18. /*头部设置*/          
      19. #header {           
      20. height:400px;           
      21. background:none;}           
      22.           
      23. /*内容部分*/          
      24. #content {           
      25. border:0;           
      26. width:860px;           
      27. padding:20px 20px;           
      28. background:#fff;}           
      29.           
      30. #widebar {            
      31. width:880px;            
      32. padding:0;            
      33. border:0;            
      34. background:none;}    
      35.   
      36. /*我的状态样式*/  
      37. #userStatus {   
      38. margin:0;   
      39. padding:10px 0px 10px 10px;}           
      40.           
      41. /*账号信息列设置*/            
      42. #userUpdates{           
      43. width:640px;}           
      44.           
      45. /*底部设置*/      
      46. #footer {       
      47. width:880px;       
      48. background:#9E9986;}       
      49. /*底部文字样式*/      
      50. #footer p{       
      51. padding:0 10px;       
      52. color:#686357;}       
      53.       
      54. /*底部链接样式*/      
      55. #footer a:link,#footer a:visited,#footer a:hover{       
      56. color:#686357;}       
      57.       
      58.       
      59. /*整体链接样式*/          
      60.           
      61. /*未访问的链接和已访问的链接*/          
      62. a:link,a:visited{           
      63. color:#9E988C;}           
      64. /*鼠标在链接时的样式*/          
      65. a:hover{           
      66. color:#686357;}           
      67.       
      68. /*导航条样式*/          
      69. #navigation {           
      70. border-left:0;           
      71. background: #9E988C;}           
      72.           
      73. #navigation ul li{           
      74. background-image:none !important;}             
      75.           
      76. #navigation a:link,#navigation a:visited {           
      77. color:#fff;           
      78. background:#9E988C;}           
      79.           
      80. #navigation a:hover {           
      81. background:#686357;}           
      82.           
      83. /*导航子列表样式*/          
      84. #navigation ul ul{           
      85. background:#9E988C;           
      86. border: 1px solid #686357;}           
      87.           
      88. #navigation ul ul a {           
      89. color:#fff;           
      90. border-bottom: 1px solid #686357;           
      91. background:#9E988C;}           
      92. #navigation ul ul a:hover {           
      93. color:#fff;           
      94. background: #686357;}      

       

      小节回顾：看到这里你应该要学会这些

      1. 知道可以使用margin-left,margin-right调整位置 
      2. 知道文字美化是分有链接和无链接的
      3. 链接有四种状态,而我们常用前三个,第一个和第二个的设置一般是一样的.  

       

       

      因为软考，这几天没更新，今天补上 2007-11-4

      通过上面的设置已经有像样轮廓了。下面设置一下h3标题栏，就是最近谁看过余XX的页面、余XX最近登录的好友、余XX的日志。。。这些分左边和右边。

      先来美化左边的

      /*左边h3样式*/
      #userRe      lations h3{
      border:0px;
      background:#F4F4F4;} 

      分析：

      到现在为止，上面的应该不用我分析了吧？

      再来右边的

      /*右边h3样式*/
      #userUp      dates       h3{
      border:0px;
      background:#F4F4F4;}

       

       

      分析：

      和上面的一样，只是选择符换了，改成右边的。

       

      现在再来看头像下面的链接样式

      上面说过的链接有四种状态,大家还记得么,这里再复习下

      /*头像下面链接样式*/  
      #userActions li a:link,#userActions li a:visited{   
      color:#808080;}   
      #userActions li a:hover{                                  
      color:#808080;   
      background:#F4F4F4;}     
      #userActions li{border:0;}  

      分析：

      a:link和a:visited样式是一样的,只设置颜色.

      a:hover除了设置颜色外还设置了背景色.

      #userActions li{border:0;}是清除边框,大家把上面代码放到涂鸦板上,保存下对比效果就知道了.

      现在我们再找找页面还有哪些不协调的地方.

      有没有发现日记标题上边框还有蓝色边框痕迹,我们把那边框给去了,顺便改改背景

      /*日记标题样式*/
      #userBlog .info{
      border:0;
      background:#F5F5F5; }

      再细细查找下,发现"礼物"和"留言栏"那边也有蓝色边框痕迹.同样,一起去掉.

      /*礼物标题样式*/  
      #giftBox .sub-h3{   
      background:#F4F4F4;   
      border:0;}   

      /*留言栏设置*/  
      #talk .info{   
      background:#F4F4F4;   
      border:0;} 

      /*加宽留言框长度*/
      #userTalk #cmtbody{
      width:95%;}

      /*留言框背景样式*/
      #userTalk textarea{
      background: url(http://www.bo-u.cn/sc/inputbg.gif) no-repeat;}

      /*留言板按钮样式*/
      #userTalk .subbutton, #userTalk .inputbutton{
      padding:0 5px;
      border:0px solid;
      background:#0F0F0F}

      分析

      留言栏相关美化看这里:http://www.bo-u.cn/show-94-1.html

      好了,到目前为止,所有颜色都被我们操制了.

      下面再做些收尾工作.这篇教程就基本上结束了.

      1、好友分布长度限制 

      /*好友分布长度限制*/
      #userFriendUniv .boxcont{
      maxheight:1200px;
      overflow:hidden; }

      分析：

      maxheight:1200px;这个是最大宽度有1200px，那超出的部分怎么办？
      我们用到overflow; overflow属性值还有auto和scroll。

      区别：

      • auto 如果日记没有超过最大宽度，不显示滚动长，超过就显示；
      • scroll 不管日记有没有超过最大宽度都显示滚动条；
      • hidden 就是超过的部分隐藏起来，我们常用这个，因为滚动条会影响美观

      这里大家要注意一下，如果限制某个版块的长度和宽度就是用这个代码来实现的。如果你的日记很长，也可以用这个方法来限制你的。代码如下：

      /*日记最大宽度控制*/
      #userBlog .text{
      overflow:auto;
      maxheight:500px;
      color:#363739;}

      还有个小问题就是日记标题的长度。

      /*日记标题长度设置*/ 
      #userBlog .info h4{ width:auto;}  

       
      好了，如果你能坚持看到这里，对CSS应该有个大致的了解了，我写这篇日记花了4天，分四个小节，最后一节有点赶，如果部分代码看不懂，先把代码放到涂鸦板里保存后刷新自己的页面，前后对比下效果就清楚了。四小节基本上包括了所有美化的步骤了。当然，如果你要做自己有个性的页面，得花一些心思。布局很关键，一个页面的个性基本上就体现在布局，其次是配色。

      好了，最后希望大家都能做出自己的个性页面，如果有不明白地方，可以在下面回复。

      推荐下本篇文章相关文章

      1. 校内网涂鸦美化过程中常见问题汇总  (美化过程中总结的问题)
      2. 校内网CSS美化系列:留言板  (留言板相关的详细设置) 
      3. 校内网CSS美化系列:滚动条  (滚动条相关的详细设置) 
      4. 校内网涂鸦板-页面全透明代码  (如何让你的内容部分透明,显示出背景)
      5. 校内网中如何隐藏不需要的板块  (如果上面的隐藏不方法不明白,直接看这里)
      6. 校内网美化过程中常用的工具   (大家常问的颜色代码,可以在这里下载个取色板)
      7. 美化过程中常用到的配色图   (配合上面的取色板,就能得想要的颜色代码了)

      最后完整的成品代码如下

      完整的CSS成品代码 最后完成时间：2007-11-4
      1. /*整体页面设置*/                 
      2. body {             
      3. color:#9E988C;           
      4. padding:0;              
      5. margin:0;                
      6. background:url(upload/2007_12/071228043573731.gif) repeat;}                
      7.                  
      8. /*隐藏版块*/                   
      9. #logo, #tagline, #copyrightlink, .announcement, #userBlog .more,  #utility, #permalink, #sidebar, #reportlink{               
      10.  display:none}              
      11.              
      12. /*头部图片设置*/               
      13. #container{               
      14. margin:0 auto;              
      15. width:880px;              
      16. background:url(http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg) no-repeat;}               
      17.                
      18. /*头部设置*/             
      19. #header {              
      20. height:400px;              
      21. background:none;}              
      22.              
      23. /*内容部分*/             
      24. #content {              
      25. border:0;              
      26. width:860px;              
      27. padding:20px 20px;              
      28. background:#fff;}              
      29.              
      30. #widebar {               
      31. width:880px;               
      32. padding:0;               
      33. border:0;               
      34. background:none;}       
      35.      
      36. /*我的状态样式*/     
      37. #userStatus {      
      38. margin:0;      
      39. padding:10px 0px 10px 10px;}              
      40.              
      41. /*账号信息列设置*/               
      42. #userUpdates{              
      43. width:640px;}              
      44.              
      45. /*底部设置*/         
      46. #footer {          
      47. width:880px;          
      48. background:#9E9986;}          
      49. /*底部文字样式*/         
      50. #footer p{          
      51. padding:0 10px;          
      52. color:#686357;}          
      53.          
      54. /*底部链接样式*/         
      55. #footer a:link,#footer a:visited,#footer a:hover{          
      56. color:#686357;}          
      57.          
      58.          
      59. /*整体链接样式*/             
      60.              
      61. /*未访问的链接和已访问的链接*/             
      62. a:link,a:visited{              
      63. color:#9E988C;}              
      64. /*鼠标在链接时的样式*/             
      65. a:hover{              
      66. color:#686357;}              
      67.          
      68. /*导航条样式*/             
      69. #navigation {              
      70. border-left:0;              
      71. background: #9E988C;}              
      72.              
      73. #navigation ul li{              
      74. background-image:none !important;}                
      75.              
      76. #navigation a:link,#navigation a:visited {              
      77. color:#fff;              
      78. background:#9E988C;}              
      79.              
      80. #navigation a:hover {              
      81. background:#686357;}              
      82.              
      83. /*导航子列表样式*/             
      84. #navigation ul ul{              
      85. background:#9E988C;              
      86. border: 1px solid #686357;}              
      87.              
      88. #navigation ul ul a {              
      89. color:#fff;              
      90. border-bottom: 1px solid #686357;              
      91. background:#9E988C;}              
      92. #navigation ul ul a:hover {              
      93. color:#fff;              
      94. background: #686357;}         
      95.   
      96.   
      97. /*左边h3样式*/  
      98. #userRelations h3{   
      99. border:0px;    
      100. background:#F4F4F4;}   
      101.      
      102. /*右边h3样式*/  
      103. #userUpdates h3{   
      104. border:0px;    
      105. background:#F4F4F4;}   
      106.   
      107. /*头像下面链接样式*/      
      108. #userActions li a:link,#userActions li a:visited{       
      109. color:#808080;}       
      110. #userActions li a:hover{                                      
      111. color:#808080;       
      112. background:#F4F4F4;}         
      113. #userActions li{border:0;}    
      114.   
      115. /*日记标题样式*/    
      116. #userBlog .info{    
      117. border:0;   
      118. background:#F4F4F4;}    
      119.   
      120. /*礼物标题样式*/      
      121. #giftBox .sub-h3{       
      122. background:#F4F4F4;       
      123. border:0;}       
      124.   
      125. /*留言栏设置*/      
      126. #talk .info{       
      127. background:#F4F4F4;       
      128. border:0;}     
      129.   
      130. /*加宽留言框长度*/    
      131. #userTalk #cmtbody{    
      132. width:97%;}    
      133.   
      134. /*留言框背景样式*/    
      135. #userTalk textarea{    
      136. background: url(http://www.bo-u.cn/sc/inputbg.gif) no-repeat;}    
      137.   
      138. /*留言板按钮样式*/    
      139. #userTalk .subbutton, #userTalk .inputbutton{    
      140. padding:0 5px;    
      141. border:0px solid;    
      142. background:#0F0F0F}    
      143.   
      144. /*好友分布长度限制*/    
      145. #userFriendUniv .boxcont{    
      146. maxheight:1200px;   
      147. overflow:hidden;}    
      148.   
      149. /*日记最大宽度控制*/    
      150. #userBlog .text{    
      151. overflow:auto;    
      152. maxheight:500px;    
      153. color:#363739;}    
      154.   
      155. /*日记标题长度设置*/    
      156. #userBlog .info h4{ width:auto;}   

    [收藏] [推荐] [评论] [打印] [关闭]
    上一篇：教你破解校内网违禁字符代码
    下一篇：校内网css标签的详细讲解
    最新评论共有 0 位网友发表了评论
    查看所有评论
    发表评论
    评论内容：不能超过250字，需审核，请自觉遵守互联网相关政策法规。
    用户名： 密码：
    匿名?
    注册
    栏目列表
    热点关注
    相关文章
    Powered by 校内网 ©2004-2008 www.xiaon.org.cn