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

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.

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

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

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

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