xiaonei改变页面构架模块

一、页面各模块属性。
#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相同。

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



参数意义同上

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的值调小或置零，然后再一点点的调整好位置。
以上有些资料转载涂鸦版的秘密，如果能够掌握这些知识，相信你的涂鸦版DIY程度会更高，给人的感觉会更个性化，大家可以到我的主页去看看效果：http://xiaonei.com/getuser.do?id=51029421