校内网CSS代码教程

校内涂鸦攻略之CSS入门篇之二

#spacePage #content{background:transparent url(http://5q.com/hhj530);border:0pt;}
<li><a href ="http://event.xiaonei.com/GetEventList.do?univ=5001">活动</a></li>
<li><a href ="http://xiaonei.com/Search.do">搜索</a></li>
<li><a href ="http://xiaonei.com/Invite.do">邀请</a></li>
</ul>
</div>
</div>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
相关知识点：什么是DIV
这个又是一个涵盖比较大的概念，可以在网上搜索一下DIV CSS，简单点说就是DIV是HTML中的一种标签名称，作用是定义一块区域，而

CSS可以用来修饰它。如果把DIV比作一块桌布的话，CSS是剪刀，可以裁减DIV，CSS还可以是画笔，来给这块没有内容的DIV加上图案或修边，网页上说的DIV+CSS是运用这两者来搭建网页的布局，并用CSS加以修饰。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

这里面有很多标识符，初学者看了可能会头大，其实一开始我们并不用知道这些标识符都是很么意义，有什么作用，先找到我们要修改的内容，然后再顺藤摸瓜，往上找就行了，在有了一定基础之后，再去研究这些标识符的意义和作用吧。

这里以修改“我的首页”等文字属性为例。在源文件里找到“我的首页”这几个字，我们看到<a href ="http://home.xiaonei.com/Home.do">我的首页</a>的是这样的一行代码，<a></a>表示这是一个链接，接着往上找，<li><ul>这些我们暂时可以不予理会，只看这个链接是包含在哪个id或class内的，这时我们找到了<div id="navigation">，如果再住上找，我们就找到了<div id="header">，这个时候就不必再往上找了，因为这已经是一个功能比较独立的区域　了，接下来就是对这些文字属性的修改，我们先看下main.css里关于header部分的定义

/* Header */
#header { position:relative; width:760px; height:57px; overflow:hidden; font-family:Tahoma, Helvetica, sans-serif;}
#header #logo { position:absolute; left:0; top:0; width:132px; height:57px;}
#header #tagline { position:absolute; left:132px; top:0; width:628px; height:33px; background:#000000 url(/UpFile/2007/6/8/20076825153377.gif) 0 0 no-repeat; color:#fff; font-size:14px; text-indent:15px; line-height:33px;}
#header #tagline a { color:#fff; text-decoration:none;}
#accessiblenavigation { display:none;}
#utility { position:absolute; right:0; top:0; width:270px; height:33px; padding:0 15px; background:#000000 url(/UpFile/2007/6/8/20076825153630.gif) 100% 0 no-repeat; color:#d8dfea; text-align:right; line-height:33px;}
#utility .pipe { visibility:hidden;}
#utility a { color:#d8dfea; text-decoration:none;}
#utility a:hover { color:#fff;}
#navigation { position:absolute; left:132px; top:33px; width:628px; height:23px; border-bottom:1px solid #000000; background:#6d84b4; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#navigation h3 { display:none;}
#navigation p { padding-left:15px; color:#fff; line-height:24px;}
#navigation ul { list-style-type:none; padding-left:5px;}
#navigation li { display:inline;}
#navigation a { float:left; height:22px; margin-right:3px; padding:1px 11px 0 9px; color:#fff; text-decoration:none; line-height:22px;}
#navigation a:hover { height:20px; padding:3px 10px 0; line-height:20px;}
/*.widthHeader #navigation { background:#6d84b4 url /UpFile/2007/6/8/20076825153756.gif) 72% 50% no-repeat;}*/
.widthHeader #navigation { background:#6d84b4}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
相关知识点：关于main.css和home.css
这两个是校内网个人页面预定义的两个css样式表，用的是链入外部样式表文件的方式
这两个文件内容是不同的，大体上说，main.css是从总体上定义页面的样式，而home.css是一些细节部分的样式

下载地址：
http://static.xiaonei.com/css/main.css
http://static.xiaonei.com/css/home.css
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

这是服务器端预定义的样式，我们要做的就是在涂鸦板内通过css代码来自定义它的样式，我们从上往下找，看一下main.css里关于a的定义，我们找到这样一行代码
#navigation a { float:left; height:22px; margin-right:3px; padding:1px 11px 0 9px; color:#fff; text-decoration:none; line-height:22px;}
这里是预定义的内容，我们可以套用这个模式，修改我们想要修改的内容，比如我们要修改这些字的颜色，大小，字体，那么就可以用下面的代码修改
#navigation a { color:文字颜色; font-size:文字大小; font-family:字体; }

main.css和home.css里已经预定义的内容，我们可以参照着来修改，没有定义的，找到相应的html标识符，参考其它对象的定义修改即可。

b、自定义内容

自定义内容多指一些放在涂鸦板内的文字，图片等，当然，我们也可以通过绝对定位使其定位到页面任意位置。

这里面的对象属性修改起来比较灵活，因为在这里我们不仅可以用css来定义，也可以使用html来定义，比如下面的代码
<font color=#009999 ; face="隶书" ; size=3.5>我是文字</font>
这就是用html语法来定义的文字属性，而下面的代码
<div style="position:absolute;Top:1000px;left:266px;width:100px;">我是文字</div>
就是用css来定义的，也可以两种结合着用
<div style="position:absolute;Top:1000px;left:266px;width:100px;"><font color=#009999 ; face="隶书" ; size=3.5>我是文字</font></div>
如果想用html来定义对象，而用css来修改其属性，就上面例子而言，可以这样做
<div id="myfont">我是文字</div>
<style type=text/css></style>

当然，在大多数情况我不用上面这种形式，怎么方便，怎么写代码比较精简就怎么写即可。

　　　　
三、相关知识及技巧

1、如何写外部样式表文件
内部样式代码如下
<style type=text/css>

</style>
如果想把它写到外部样式文件内，然后用第一种方式链入，去掉代码前后的标识符，保留中间的功能代码即可
A:link{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:visited{COLOR:#999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:active{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:hover{COLOR: #999999}
body{COLOR:#999999;FONT-SIZE:9pt; FONT-WEIGHT: bolder;FONT-FAMILY:隶书}

　　　　　　　　　　
2、读代码
看完这篇攻略，也许你还不会去写代码，因为那需要经验的积累的，但是我希望你至少能做到会读，很多经验都是由别人那里借鉴来的，下面说一下读代码的方法吧。

随便找个代码
<style type=text/css></style>
通过以上的讲解，我们知道 < STYLE> 标记中包括了 TYPE ＝ "text/css" ，这是让浏览器知道你是使用 CSS 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该部分代码忽略不计。所以这些都是标记，我们可以不理会，而#userAlbum{display:none;}是功能代码，我们先看一下#userAlbum，“#”告诉我们，这个html标识符在源文件里是一个id，那么我们可以在源文件里搜索一下，可以找到<div class="box" id="userAlbum">，看一下它后面的内容，我们知道这是相册部分，而display:none;实现的功能就是把相册部分隐藏。

接下来我们就可以举一反三，尝试着去写了，既然相册的隐藏代码是这个，那么与处于同一级的日志部分我们就可以参照着写出来了，在源文件里搜索一下“××的日志”，可以找到它上面的一行代码<div class="box" id="userBlog">，那么隐藏日志的代码就可以这么写
<style type=text/css></style>

　　　　　　　　　　
3、关于标记
html和css是弱标记性语言（可能说法不是很准确，以前在书上看过这方面的术语，记不清了），简单说就是它是大小写不敏感的，结束标识符也不是强制要求的，举个例子
<style type=text/css></style>
这行代码，代用下面几种方式写都是可用的
<STYLE type=text/css></STYLE>
<STYLE type=text/css></style>
<style type=text/css>
但是不推荐最后一种写法，这样平时应用是可用的，但是与其它代码一起使用时就可能会出问题，所以最好是带上结束标识符。

查看更多关于校内涂鸦攻略之CSS入门篇之二的文章。

[上一篇]校内网涂鸦代码攻略之CSS入门篇之.. [下一篇]校内网涂鸦代码攻略之CSS入门篇之..

校内网小提示

本站公告

校内网xiaonei.com是面向在校大学生及白领的互动空间。所谓校内，顾名思义，就是一个针对在校大学生做的网络空间。大家可以在这里完美的展示自己。校内网-优酷校内网代码站www.xnw.ac.cn则是精心为你收集最优最酷的校内网代码及校内网涂鸦板代码和校内网css代码,背景代码等代码的专业网站。

校内网-优酷校内网代码站！

当前位置：>首页 -> 校内网CSS代码 -> 校内网CSS代码教程

校内涂鸦攻略之CSS入门篇之二

校内网小提示

最新代码

本站公告

热门代码