注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

走近太平洋

感悟生命真谛

 
 
 

日志

 
 

『博客首页模块定位方法』  

2011-06-19 19:58:10|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

依次说明说明首页模块的代号,如下所示:

一、看见<div >,就是我以前说过那个大框架,一般不用移动,只用修改宽度就可以了


二、看见<div >,就是头部那个Banner的模块

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

<div ></div>,就是说如果不对功能框架里面的模块重新定位的话,功能框架里的所有

模块都会和左边框架的显示方位一致,即左边框架在左显示,功能框架就在左边显示;反之亦然。
而且排列是按照博客默认设置的顺序,比如:关于作者、日历、快速登录等依次显示(如果你不隐藏的

话)。 

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

可见,我们选择一个没有修改的模版时,功能框架里的模块就会按照如上顺序显示。而且可以通过在首

页CSS添加display:none;来隐藏这些模块。比如div#myPhoto{display:none;}

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

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

这样,可以对所有这些模块重新定位。但是,如果我们要对文本书签里面的子模块定位,就不能按照上

面的方法定义,因为那样做会使整个文本书签的模块一起移动。
因此,我们可以在文本书签的描述里添加一些代码定义,就可以单独实现文本书签的子模块的重新定位


比如要移动时钟的子模块,这时我们不能新建一个名为“时钟”的文本书签,而是在已经建好的、并不

准备移动的文本书签的描述里再添加如下一段代码:
<DIV align=center>
<H4>时钟</H4>
这里添加个性化时钟代码
</DIV>

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

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

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

要有:
1、<div >,博客个性图片
2、<div >,博客介绍,就是那个可以在顶部加js代码的模块
3、<div >,日志模块。日志模块又包含了:
(1)<div >日志栏目,就是博客提供的那个文章栏目分类模块
(2)<div >日志内容,就是可以置顶添加分栏代码的主体模块。

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

六、看见<div >——首页底部显示博客中国版权的那个模块。一般是修改宽度和添加底部

Banner,不用移动了。

其实在修改首页CSS的时候,只要找到id后面那些名称,对其进行定义,就能修改相应的模块了。

给首页加边框的方法

如果要让首页看起来更紧凑,可以通过在博客后台管理的DIY首页CSS里添加代码来实现。
主要的代码包括:
border-left:5px solid #00688B;
border-right:5px solid #00688B;
border-bottom:5px solid #00688B;
border-top:5px solid #00688B;
分别表示你要给你网页组件添加的方位为左边、右边、底部和上部,
5px表示宽度,
#00688B表示边框的颜色,当然你可以自行选择了。

这个边框可以给你网页的任何组件进行添加,包括大框架、左边框架、右边框架、功能框架等。
比如:div#container{
}
div#leftFrm{ 
}
div#rightFrm{     
 }
div.operation{
}
可以在首页CSS里找到上述代码,根据你自己模版的宽度,修改添加边框宽度和颜色。这样就可以使你的博客首页更加紧凑、美观了。

  评论这张
 
阅读(13)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017