天下家园

博客首页模块的定位方法

                                      

                                         

最近，博友问到有关博客首页模块的定位问题，我也没有太深入的研究，只是把自己的想法说一下，如

果说法有误，还请博友指出。
如果您有兴趣的话，可以自己试一下。我不是所有的模块都移动试过，但是自己总结了一下定位的经验

。

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

一、看见<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">，博客个性图片
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后面那些名称，对其进行定义，就能修改相应的模块了。

【作者: 尚群卓】【访问统计:】【2005年11月28日 星期一 14:33】【 加入博采】【打印】