收藏此页

校内网代码

校内网代码>校内网教程> 校内网css代码详细教程

热门文章

相关文章

校内代码

校内网css代码详细教程

关键词：校内网代码 【收藏到书签】【添加到百度搜藏】【留言建议】

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

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

先来美化左边的

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

分析：

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

再来右边的

/*右边h3样式*/
#userUpdates 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;}   

上一页 1 2 3 4 5 6下一页
上一篇：校内网css标签详解  
下一篇：校内网涂鸦版实用小技巧
收藏此页 | 推荐好友 | QQ空间代码 | 返回顶部 |
校内网代码 校内网 涂鸦板代码 校内网CSS代码 校内娃┆校内代码站
Copyright © 2007-2008 校内网代码. All Right Reserved.