• 校内网涂鸦板代码
  • 首 页
  • 校内网代码
  • 校内网涂鸦板代码
  • 校内网教程
  • 校内网音乐代码
  • 校内网播放器代码
  • 校内网鼠标代码
校内网涂鸦板代码>>校内网教程>> 校内网css详细教程

校内网css详细教程

文章来源: 发表时间：2008-04-18
  • 将本文收藏到QQ书签中，以便日后查看或与好友分享

    下面我会详细的说明，并一步步教大家如何美化。如果不明白处，请在下面留言。
    注意此教程我写得很详细,主要是照顾那些刚接触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。

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

     点此在新窗口浏览图片

    好了,如果让你来美化,你第一步会想到什么? 

    加个个性背景图片,对么?

    你上网去找到你喜欢的图片,也可以在这里找找http://www.Bo-u.cn/show-15-1.html

    我们随便找一个,比如这个图片
    点此在新窗口浏览图片

    找到图片后,怎么写代码呢?

    小提示：找到的图片一定要再上传到校内网去，这样可以保证图片的有效性；而且切记只能用在写日记那里的上传图片功能，这样图片不会变形。 

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

    把上面代码放到涂鸦板中去,保存一下,看看有没有效果.

    分析:

    body 为什么是body呢,因为是整体页面的背景,你对比下校内网粗略布局结构就知道.
    padding和margin分别是填充距和边距的意思，下面我会讲到，先略过。
    background 这句是有格式的background:url(图片地址) repeat;  repeat是完全平铺的意思,因为图片比较小张,如果是壁纸,那图片够大了,可以用no-repeat替换,如果背景图片是细长型的,那就水平平铺,用repeat-x替换.细窄的就用垂直平铺repeat-y;
    如果替换替换如果你图片只有屏幕那么大,那你还可以固定你的背景,加个fixed就OK,格式是background:url(图片地址) no-repeat fixed;

    如果你上面看不懂。你只要明白，我给整个页面加个背景的代码是 

    CSS代码
    1. body {        
    2. padding:0;       
    3. margin:0;         
    4. background:url(你的图片地址) repeat;}  

     

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

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

     

     

    加完背景图片后,下一步要做什么? 

    先把没用的部分去掉,校内网LOGO,头部左边我的同学,我的世界, 隐私设置,帮助,退出,我的页面,我的班级 ...等链接 还有就是底部将如下链接发给朋友...

    这里插入CSS基本语法

    一个样式的语法由三部分构成：Selector(选择符)，属性(Property)，属性值(Value)

    比较你要修改页面整体文字颜色为黑色，你可以使用以下代码

    body{
    color:#000
    }

    从上面那个例子你可以看出什么？

    body = 选择符
    color = 属性
    #000 = 属性值

    很显示body是整体页面的意思；color是颜色的意思；#000是黑色的意思。
    整句翻译下来就是让整体颜色的颜色设置成黑色。

    那么美化时要如何查找相应的选择符呢?

    这里我举个例:比如找校内网LOGO的选择符

    打开我的页面 -> 对空白地方右键 -> 查看源文件 就弹出文本编辑器 (这个方法很常用,偷人代码也是这样弄的)

    小提示：如果你弄不明白什么是空白的地方，你可以在浏览器菜单栏上点查看，再点查看源文件就可以了

    我们搜索校内网LOGO图片的地址(http://static.xiaonei.com/img/logo.gif)

    小提示：校内网LOGO图片的地址知道怎么获取么?对着那个校内网LOGO图片右键 -> 属性 -> 弹出属性框,你就可以在地址(URL)那一栏看到地址了.这个方法可以查看所有图片的地址.弹出文本编辑器用完不要关掉，整个美化过程中都要用到

    找到如下代码

    <h1 id="logo"><a href="http://home.xiaonei.com/Home.do" title="校内网"><img src="http://static.xiaonei.com/img/logo.gif" alt="校内网(Logo)"/></a></h1>

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

    那么这个校内网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}/*这个错误的*/

    但是这还不够，因为它是错的点此在新窗口浏览图片，class的要用点号(.)，正确如下：

    #userBlog .content{display:none}/*这个是正确的*/

    分析：

    前面我们说过“因为logo是<h1></h1>的ID，所以我们现在设置可以使<h1></h1>内所有元素都隐藏，不管里面有多少元素”，content是最外面的层的class，对它的设置，它里面包含的同样会继承到，因为是class所以content前面用 . ；
    前面的#userBlog 又是做什么用？这里又扯到id和class的区别，id是唯一的，只能使用一次，class是一个类，可以多次使用，简单说就是，id是一对一,class是一对多;可能还有其他元素应用这个样式，所以我们要在前面加个唯一的id,让它唯一。通俗些说，比如张三和张四都有个儿子都叫张五，你说张五指哪个，不确定，你说张三的儿子张五不就清楚了。
    #userBlog 怎么来的？你可以往外层找；.content最近的ID是<ol id="blog">, 但是用#userBlog比较好,当然用#blog .content{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;}   

查找： 相关文章 | 评论 (0) | 复制本页地址 |

发表评论/ 全部评论

  • 用户名： （新注册）
  • 密 码 ：
  • 匿名发表:

推荐文章

  • 绝对经典的校内网魔兽代码,喜欢的来看看哦 (2008-04-13)
  • 海邊 沙灘主题校内网代码 (2008-04-13)
  • 最有人气的经典校内网代码!绝对漂亮! (2008-04-13)
  • 校内网-宁静的蓝天 (2008-04-13)
  • 校内网涂鸦板助手，不懂代码也能自己编辑自己的 (2008-04-13)
  • 一天就可以上升1000的人气代码 (2008-04-13)
  • 把校内网留言板改成可以发卡通表情的那种 (2008-04-13)
  • 成为校内之星的代码（非主流）绝对经典 (2008-04-13)
  • 让你人气大增的校内网涂鸦板代码 (2008-04-13)
  • 千首音乐分类播放器，包括流行前线，劲舞歌曲， (2008-04-13)
  • 校内网涂鸦板代码 地图| rss