通过第一讲我们知道校内网涂鸦板代码 校内网涂鸦版代码 校内网代码 何给头像部分加"边框"[背景]
这讲我们说一下顶部banner的添加方法
分析一下页面结构以及默认的css文件
在main.css中定义了顶部的样式，下面逐一分析
------------------------可爱的分割线--------------------------
body { padding:0px 0; font:12px/1.5 "Lucida Grande", Arial, Tahoma, Helvetica, sans-serif; background:#000;}
这句定义了整个页面的一些信息，和banner相关的一支由第一个属性padding
默认值是padding:10px 0;这个10像素也就是整个页面顶部的那一条空白，如果想取消
就直接写成0好了，想改宽窄也可以任意改~~
------------------------可爱的分割线--------------------------
顶部那么一小块地方，结构还真是复杂，涉及如下几个层
header，logo[xiaonei.com那个小图]，universityName[学校名字]，navigation[最上面的顶部导航]
咱们来一一设置
#header {
position:relative; /*以原位置为准*/
left:0px;
width:780px;
height:118px;
background:#000;
overflow:hidden;
font-family:Tahoma, Helvetica, sans-serif;
background:url(http://img.xiaonei.com/photos/20060816/1520/orig55566.jpg) no-repeat fixed; /*banner*/
}
-由于我改变了各部分的位置，所以代码中经常有定位的语句以确保不会乱套，头两句可有可无。
-下面的width和height分别定义了header这个层的宽、高，根据自己的banner图大小定义吧，或者设成自己满意的大小。
-background设置本部分的背景填充色，也就是如果banner不够大，剩下的用什么来填满，可有可无
-overflow:hidden;如果有某些东西超出这个层，那么将隐藏超出的部分
-font-family，定义这个层的字体
最后一句就是定义banner的图片地址咯~~no-repeat表示不重复，即使背景图不够大，也不要平铺，fixed表示背景不跟随页面移动
这样设置完只是添加了背景，但是还有好多东西在前面挡着，很难看啊，咱逐一取消之~
------------------------可爱的分割线--------------------------
#logo { display:none;} /*取消校内网logo*/
#header h1 { display:none;}
#header h2 { display:none;} /*取消"某某的页面"*/
#header #universityName { display:none;} /*取消学校名称*/
------------------------可爱的分割线--------------------------
这些都取消之后，再来看顶部导航
我感觉蛮有用的，所以不推荐取消，不过要是真弄不好看影响整体美观的话，还是忍痛割爱吧
取消之~~ #navigation{ display:none;}
下面分析一下这个导航的设置
#navigation {
position:absolute;
left:220px;
top:0;
width:540px;
height:33px;
background:none;
}
首先定义位置等
前三句，定义其相对父标签顶部对齐，并向右偏220像素[这可是默认值哦~根据需要自己调吧]
后面是宽和高，最后定义无背景
#navigation h3 { display:none;}
#navigation ul { list-style-type:none; margin:3px 5px 0; text-align:right;}
#navigation li { display:inline; font-size:14px; line-height:30px;}
#navigation a { padding:2px 4px; color:#6B88C5; text-decoration:none;}
#navigation a:hover { color:#b1ff0b; background:#3f3f3f; text-decoration:none;}
下面定义导航的h3标签不显示[没啥用，几个字，默认值]
ul中定义了个链接的间隔[ margin ]和字是右对齐
li中定义了字体大小为14像素，行高30像素[都是默认，可以看情况修改]
由于导航都是超链接，下面第4行定义了超链接在鼠标没指在上面的样子
可以修改颜色，后面的text-decoration:none;表示没有下划线
最后一行定义鼠标指在超链接上的样子，这里定义了颜色，背景色，和无下划线[我修改过，不是默认值了]
恩，大家可以任意修改到自己满意为止
顶部banner设置到这种程度，就差不多了
以上代码全部是写入css文件中的，虽然也可以写入涂鸦板[要加点东西]，不过这样大量的定义css还是写入文件中比较好~~
