首页 | 涂鸦版代码 | 音乐代码 | 校内网教程 | 鼠标代码 | 播放器代码 | css代码 | 校内网非主流 | 校内网人气

首页 | games单机游戏 | 网络工具 | soft常用软件 | game相关 | media媒体工具
您当前的位置:校内资源网文章中心校内网教程 → 文章内容
本类热门文章
相关下载
 
关于页面构架各模块的改变
作者:佚名  来源:不详  发布时间:2007-10-14 0:31:09

减小字体 增大字体

一、页面各模块属性。

#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的值调小或置零,然后再一点点的调整好位置。


[] [返回上一页] [打 印]
文章评论 (评论内容只代表网友观点,与本站立场无关!)

用户名: 查看更多评论

分 值:100分 85分 70分 55分 40分 25分 10分 0分

内 容:

         (注“”为必填内容。) 验证码: 验证码,看不清楚?请点击刷新验证码

关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 管理登陆