加载中…
个人资料
冰河星矢
冰河星矢
  • 博客等级:
  • 博客积分:0
  • 博客访问:21,789,707
  • 关注人气:21,617
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

新浪博客模版移位代码

(2006-11-07 07:30:26)
分类: 互联科技类映日花别样红
 这个代码其实很早的时候就试验过,只是没有合适的大背景,模版移位起来不好看,就没用过,也就没在意。前几天改一套模版正好用到这段代码,效果看起来还可以,有些朋友想知道这代码,现在就把代码公布出来:
 
<style>

.body{margin-top:**px;} →调整模版上下位置
.bodybg{margin-left:**px;} →调整模版左右位置
.feeds .text{margin-left:**px;} →调整正文文章部分左右位置
.label{margin-left:**px;} →调整面板的左右位置
.photo{margin-left:**px;} →调整形象照片的左右位置
.callboard{margin-left:**px;} →调整公告栏的左右位置
.calendar{margin-left:**px;} →调整日历的左右位置
.links{margin-left:**px;} →调整面板(最新留言、最新评论等面板)的左右位置
.menu .home a{padding-left:**px;} →调整菜单处HOME的左右位置,与等下后面介绍的.home{width:**px;}配合使用用于调整菜单处那几个链接的位置
.feeds .function{margin-left:**px;} →调整固定链接┆评论┆引用┆阅读的左右位置
#labelFM000014{margin-left:**px;} →调整博客隐藏计数器的左右位置
#labelFM000011{margin-left:**px;} →调整推荐订阅处的左右位置
</style>

其实这也不是什么新代码,只是巧用了margin属性而已。其中最主要的是第二段代码 .bodybg{margin-left:**px;} 能使中间的部分整体移位,其他的代码主要用于更改模版的时候进行细微调节用的,能使博客整体布局更加协调合理,以趋于完美。

用的时候请把每行代码后面的解释文字去掉,否者代码无效。

每行代码中的**为具体数值,可根据你自己的实际需要进行设定。

对代码不够熟悉的朋友请不要乱用上面的代码,用不好会使模版出现混乱,变形的很难看。移位代码可配合修改模版宽度的代码一起使用,顺便再发一下更改模版宽度的代码(有补充):


&nbsp;
<STYLE type=text/css>
.bodyTop{width:900px;}
.bodyBg{width:900px;}
.bodyBottom{width:900px;}
.feeds .text{width:660px;}
.label{width:20px;}
.photo{width:200px;}
.callboard{width:200px;}
.links{width:200px;}
.calendar{width:200px;}
.sysBr180{width:200px;}
.menu{width:900px;}
.feeds .aBody table{width:660px;}
.feeds .itemBox table{width:650px;}

</STYLE>

参数说明:
.bodyTop 指的是页面顶部的宽度,控制了 banner(就是题图)的宽度。

.bodyBg 指的是整个页面的宽度,其值最好与上者相同(也可以自行变化)。

.bodyBottom 指的是页面底部的宽度,其值最好是与上面相同 。

.feeds .text 指的是正文文章部分的宽度。

.label 指的是面板的宽度(其值加正文宽度的值应略小于整个页面的宽度)。

.photo 指的是形象照片面板的宽度(其值同上)。

.callboard 指的是公告栏的宽度(其值同上)。

.links 面板(最新留言、最新评论等面板)宽度(其值同上)。

.calendar 日历的宽度(其值同上) 。

.sysBr180 这个值比较特殊,其值同以上各面板宽度近似,但不一定相同大家应当根据自己设置的宽度进行调节。


后面红色的三段代码是补充的,一般人好像都不知道,很早的时候自己就在用,今天有朋友问,顺便再写出来。

.menu{width:900px;} 其宽度值与.bodyBg宽度一致,主要用于移动menu处“登录┆注册┆搜索┆帮助”的位置,一般很多人修改了模版宽度,但是“登录┆注册┆搜索┆帮助”还是在原来位置,并不靠边,用上这段代码就可以了。

.feeds .aBody table{width:660px;} 其宽度值与.feeds .text正文文章部分的宽度值可以相同,也可以略小,但不要小太多,也用于修改文章部分的宽度,细节部分,不详说了。

.feeds .itemBox table{width:650px;} 其宽度值比.feeds .text正文文章部分的宽度值略小。与menu类似,一般很多人修改了模版宽度,但是文章发表时间还是在原来位置,并不靠边,此代码就可用于移动文章发表时间的位置。


width后面的数字就是你要修改的宽度值,可根据自己的需要设置。
 
文章来自: 蚊子

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有