网站首页 | 校内网CSS代码 | 简洁校内网代码 | 男生代码 | 校内网群班级美化 | 本站原创 | 校内网VIP代码 | 女生代码 | 校内网涂鸦板代码 | xiaonei素材 | 非主流代码 |
当前位置:主页>简洁校内网代码>文章内容

关于页面构架各模块的改变


来源:校内网涂鸦板资源网 作者:涂鸦版 发布时间:2007-05-24  

一、页面各模块属性。

#homepage                    页面全部元素
#header                        顶部导航栏
#footer                          底部导航栏
#sidebar                         左侧导航栏
#content                         #homepage中除#header、#footer和#sidebar外其余部分 #userInfo                         个人照片和用户行为部分
#userVisitor                    最近访问好友
#userFriend                 最近登陆好友
#userFriendUniv            外校好友
#userProfile                    个人资料部分
#userBlog                       日志部分
#userPandora                涂鸦板
#userStatus                          用户状态

#userShare                           用户分享

#userFriendSpecial             特别好友

二、具体实现

1、移动homepage

参数说明:

overflow:visible :此处不做说明,在后面一起说明。

position : relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。用通俗点的话讲,就是在当前所在的框架内移动,而不流出。
关于position更详细的说明,参考css2.0中文手册,我的网络U盘里可以下载,lxcnn.5u6.net

width:宽度。如有需要,可以加个height参数调整高度。

left:相对移动距离。正值为向右移动,负值为向左移动。这个值要结合content一起调整,开始给270px这个值时,会使homepage部分偏右,而调整content后,页面将回到居中位置。

当然,如果有需要,还可以加上top参数,以调整垂直方向的位置。

2、移动content

参数意义同上
这里因为移走了sidebar,所以这里的width取值与homepage相同。

3、加宽及移动个人资料、相册、日志和涂鸦板

参数意义同上

4、移动sidebar

我这里修改了一下border的属性,如果单纯移动sidebar可用下面代码

参数说明:

position:absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。
其中z-index:1;表示置于顶层。此处如果不加这一参数,sidebar移动到这一位置时,链接将无法点击。

其余参数同上

5、移动header

参数意义同上

6、关于overflow:visible;

overflow:visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 举例说明吧,代码都是写在涂鸦板内的,所以如果不用position:absolute进行绝对定位时,所加的图片或flash等都是在涂鸦板内的,此时我的涂鸦板位置移动了,我再要绝对定位flash如我顶部的导航栏,就要在#content #userPandora的代码内加上overflow:visible;才能使原本在涂鸦板内的flash绝对定位的显示。而涂鸦板又是在content中的,content也移动了,所以content也要加上,同理,homepage也要加上。

在移动了相关部分,关在各部分代码里加入overflow:visible;参数后,用绝对定位代码定位图片或flash时,如果图片或flash不见了,可以把定位代码里的left和top的值调小或置零,然后再一点点的调整好位置。