RSS
热门关键字： 　校内 　涂鸦板 　黑色代码 　紫色 　规范
当前位置 : 主页>校内网涂鸦板教程>列表

校内网涂鸦板css代码详细教程

来源： 作者： 时间：2008-01-30 点击：

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

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

字串4

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

字串7

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

字串1

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

字串5

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

<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>

字串3


</body>
字串5

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

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

 点此在新窗口浏览图片 字串2

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

加个个性背景图片,对么? 字串9

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

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

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

字串5

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

字串3

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

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

分析:

字串4

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

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

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

  字串9

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

字串9

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

 

字串8

 

字串9

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

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

这里插入CSS基本语法 字串7

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

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

字串6

body{
color:#000
}

字串1

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

body = 选择符
color = 属性
#000 = 属性值 字串2

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

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

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

字串1

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

字串6

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

字串5

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

字串5

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

找到如下代码

字串5

<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>

字串4

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

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

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

字串6

#logo{display:none}

字串8

分析: 字串7

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


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

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

字串2

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

字串1

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

<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> 字串9

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

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

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

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

分析：

字串9

前面我们说过“因为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}也没错。

字串7

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

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

字串7

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

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

字串6

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

字串9

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

这时涂鸦板里有这些代码
  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

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

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

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

字串7

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

字串6

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

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

字串2

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

字串7

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

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

字串5

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

然后用下面代码来实现

字串5

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

字串7

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

字串9

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

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

字串3

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

字串1

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

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

字串4

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

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

字串3

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

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

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

字串9

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

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

字串4

最后只剩下底部了. 字串9

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

字串9

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

字串1

分析: 字串3

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

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

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;}  

 

字串4

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

字串3

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

字串7

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

 

字串8

  字串5

细节处理 

字串4

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

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

字串8

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

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

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

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

字串5

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

字串9

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

顶部导航 字串7

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

字串6

浅颜色:#9E988C

字串9

深颜色:#686357

字串9

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

先修改下导航那蓝色背景 字串4

#navigation {
background: #9E988C;} 字串3

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

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

字串3

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

 字串5

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

字串7

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

字串1

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

字串2

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

字串5

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

概念就不说了，看下面

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

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

字串2

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

字串3

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

字串7

分析:

字串6

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

字串2

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

字串2

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

字串6

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

字串9

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

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

先修改子列表的整体样式

字串7

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

分析： 字串1

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

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

字串5

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

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

分析:

字串7

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

再修改鼠标在链接样式 字串9

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

字串5

导航部分最后代码是

字串4

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;}   

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

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

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

字串8

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

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

字串3

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

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

字串6

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

字串3

分析:

字串9

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

字串6

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

字串8

a:hover{
color:#686357;}

字串2

整体链接样式的代码 字串9

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

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

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

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

字串8

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

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

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

分析:  字串7

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

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

字串4

 

字串7

  字串3

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;}      

 

字串6

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

字串3

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

 

字串1

  字串6

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

字串1

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

先来美化左边的 字串2

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

分析：

字串2

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

字串6

再来右边的

字串2

/*右边h3样式*/
#userUpdates h3{
border:0px;
background:#F4F4F4;} 字串7

  字串2

  字串6

分析： 字串2

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

 

字串9

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

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

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

字串7

分析： 字串2

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

字串1

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

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

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

字串2

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

字串2

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

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

字串6

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

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

字串4

/*加宽留言框长度*/
#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} 字串2

分析

字串4

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

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

字串2

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

字串1

1、好友分布长度限制
 

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

字串1

分析： 字串5

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

区别：

字串4

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

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

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

字串4

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

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

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

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

字串4

推荐下本篇文章相关文章

字串8

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

最后完整的成品代码如下

字串6

完整的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 位网友发表了评论
查看所有评论
发表评论
评论内容：不能超过250字，需审核，请自觉遵守互联网相关政策法规。
用户名： 密码：
匿名?
注册
热点关注
相关文章
推荐文章
Power by xiaoneidaima.org Copyright 2007-2008
校内网代码--专门收集大学生校内网涂鸦板相关代码及美化文章