关于页面模块定位的几种办法--天涯海角

一个收藏人 2011-02-17

展开全文

（作者：HEHE）有关博客首页模块的定位问题，我也没有太深入的研究，只是把自己的想法说一下，如果说法有误，还请博友指出。
如果您有兴趣的话，可以自己试一下。我不是所有的模块都移动试过，但是自己总结了一下定位的经验。

我依次说明说明首页模块的代号，如下所示：

一、看见<div id="container">，就是我以前说过那个大框架，一般不用移动，只用修改宽度就可以了。
二、看见<div id="header">，就是头部那个Banner的模块

三、看见<div id="leftFrm">，就是那个左边框架，可以修改宽度和定位。而且里面包含了功能框架

<div id="operaTitle"></div>，就是说如果不对功能框架里面的模块重新定位的话，功能框架里的所有模块都会和左边框架的显示方位一致，即左边框架在左显示，功能框架就在左边显示；反之亦然。而且排列是按照博客默认设置的顺序，比如：关于作者、日历、快速登录等依次显示（如果你不隐藏的话）。

四、然后我把功能框架里的这些模块依次说明一下。
1、<div id="myPhoto" class="operation">——关于作者
2、<div id="calendar" class="operation">——日历
3、<div id="loginFrm" class="operation">——快速登录
4、<div id="chunnel" class="operation">——快速通道
5、<div id="search" class="operation">——博客搜索
6、<div id="newWeblog" class="operation">——最新文章
7、<div id="blogIndex" class="operation">——文章索引
8、<div id="guestBook" class="operation">——最新留言
9、<div id="remark" class="operation">——最新评论
10、<div id="textBookmark" class="operation">——这是丰富多彩的文本书签了 11、<div id="otherFrm" class="operation">——就是博客提供的访问统计那个模块了

可见，我们选择一个没有修改的模版时，功能框架里的模块就会按照如上顺序显示。而且可以通过在首页CSS添加display:none;来隐藏这些模块。比如div#myPhoto{display:none;}

但是如果对上述模块进行重新定位，就会移动这些模块。
定位的代码一般为，找到id后面的英文名称，然后在首页CSS里进行定义，以日历为例：
div#calendar{
position:absolute;
width:200px;
top:250px;
left:700px;
}

对代码的说明：
position:absolute;表示绝对位置，我一般都是这样设。
width表示模块的宽度。
top表示离页面顶端的距离。
left表示离页面左端的距离。

这样，可以对所有这些模块重新定位。但是，如果我们要对文本书签里面的子模块定位，就不能按照上面的方法定义，因为那样做会使整个文本书签的模块一起移动。
因此，我们可以在文本书签的描述里添加一些代码定义，就可以单独实现文本书签的子模块的重新定位.
比如要移动时钟的子模块，这时我们不能新建一个名为“时钟”的文本书签，而是在已经建好的、并不准备移动的文本书签的描述里再添加如下一段代码：
<DIV id=clock align=center>
<H4>时钟</H4>
这里添加个性化时钟代码
</DIV>

然后再在首页CSS里加入
div#clock{
position:absolute;
width:200px;
top:500px;
left:700px;
}

就可以单独移动子模块了，高宽度再根据你的模版进行设定。
这个clock可以自己任意取名，不过在两段代码里要保持名字一致就行了。

五、看见<div id="rightFrm">，就是右边框架了。右边框架也可以修改宽度和定位。里面包含的模块主

要有：
1、<div id="blogImg&qut;>，博客个性图片
2、<div id="blogContent">，博客介绍，就是那个可以在顶部加js代码的模块
3、<div id="diary">，日志模块。日志模块又包含了：
（1）<div id="category">日志栏目，就是博客提供的那个文章栏目分类模块
（2）<div class="entity">日志内容，就是可以置顶添加分栏代码的主体模块。

因此，可以按照与上面相同的方法，对这些模块进行修改和定位了。
比如
div#blogImg{
position:absolute;
width:200px;
top:250px;
left:200px;
}

六、看见<div id="footer">——首页底部显示博客中国版权的那个模块。一般是修改宽度和添加底部Banner，不用移动了。其实在修改首页CSS的时候，只要找到id后面那些名称，对其进行定义，就能修改相应的模块了。

=============================

（作者：逍遥赵）如果是要将下面的模块移到最顶上：

要点一：让整个功能框架下移，通过在CSS的div#leftFrm{中加入position:relative; top:数字px;来实现。

要点二：再找到功能框架中要移动的模块的id或是class类型符，然后加入对应的CSS代码，同时加上如下代码使其移到顶部：position:relative; top:数字px;（需要注意的是，这回的数字是负数）

实例：把“访问统计”模块提到最上面（参见http://bimzcy.blogchina.com/3576451.html）

如果是要将下面的模块往上移，但不是移到最顶上：

要点一：将要上移的模块上面的那个模块先下移，方法是找到上面那个模块的id或是class类型符，然后加入对应的CSS代码，同时加上如下代码使其下移position:relative; top:数字px;（需要注意的是，这里的数字是负数）

要点二：再找到要移动的模块的id或是class类型符，然后加入对应的CSS代码，同时加上如下代码使其上移：position:relative; top:数字px;（需要注意的是，这里的数字与要点一下移的数字相同，但是正数）

CSS小知识：

position属性用于模块定位，用法是position : static | absolute | fixe | relative

absolute、relative下面有left、right、top、bottom四个属性分别是定位左边、右边、上边、下边的位置。

positon标用法示例：div { position:relative; top:-3px }

拓展：如果要左右移到模块，可以用position:relative; left:数字 px;

==================================

（作者：逍遥赵）用CSS来任意调整各模块的上下顺序是十分吃力的事情，不过我们可以换一个思路来解决问题——链接列表。

是的，链接列表的顺序是可以随便调整的——你可以创建许多各链接列表，当你在后台对任意一个链接列表点击“编辑”时，就可以在“描述”中插入代码。你把代码插入到哪一个链接列表，其效果就在哪一个链接列表上出现。只要你先把对应的模块隐藏，然后再将该模块对应的代码加入到你所希望位置处的链接列表的“描述”中，就能间接实现任意模块上下顺序任意调整的效果。

实战一——“快速登陆”框顺序任意调整：

首先在CSS隐去“快速登陆”模块，代码是：#loginFrm{display:none;}

然后在合适的位置处创建一个文本书签，取名“快速登陆”，在“描述”中填入如下代码，然后点击“保存修改”即可：

<tr>

</tr>

<tr>

</tr>