pjblog修改皮肤主体宽度教程

来源:网络整理 责任编辑:栏目编辑 发表时间:2013-07-01 07:00 点击:

在逛别人的blog(pjblog)的时候,发现人家和我一样的pjblog皮肤,但是整个的布局宽度却看上去很舒适,就想着自己改一下皮肤的宽度,于是去百度搜索,却没有详细的教程,当然,对CSS很熟悉的高手来说,这根本不是问题,可惜我还处于初步学习CSS的阶段,不过终究灵犀一点,自己试验了一把,成功了,把这个过程傻瓜化,帖出来,方便后来的人使用。

pjblog主体内容宽度调整,pjblog皮肤宽度调整,pjblog风格宽度调整,其实是一样的目的,不一样的说法。

第一步,找到你使用的pjblog皮肤(pjblog风格)安装文件夹,就是服务器目录skins(皮肤风格文件都在这里存放)

第二步,找到你用的是那个皮肤,找到layout.css 这个CSS文件

第三步,编辑这个CSS。

                其实改几个数值就可以了,就是调整宽度的数值。

#container #header #menu{
 height:32px;
 text-align:right;/*visibility:hidden;*/
 margin-top: 11px;
 padding: 0px;
 width: 900px;   (内容框+侧栏宽度=900.就是你这款皮肤总的宽度,这里需要变化哦)
 margin-right: auto;
 margin-left: auto;

/*---工具条--*/
  #sidebar{float:left;width:210px;margin-left:15px;text-align:left;}  红色的数值是侧边栏的宽度

/*---主内容--*/
  #mainContent{float:left;text-align:center;width:670px;padding-top:0px;border:1px solid #ddd;}  红色的数值是内容框的宽度
  #innermainContent{margin:5px 10px 0px 0px;}
  #mainContent-topimg{height:0px;overflow:hidden;}
  #mainContent-bottomimg{height:0px;overflow:hidden;}
  .content-width{margin:auto;width:100%;}/*--主内容元素的全局宽度--*/

好了,知道怎么做了吧?首先计算看你现在的宽度是多少?你想改变为多少?为了迎合宽屏和普屏的需要,总宽度不可超过1000,一般是910、996等,做好这个加减法,你就可以看到pjblog的布局变化了。

最后,如果你的blogname那一栏,(就是pjblog顶部)和你设置好的内容宽度不符合,或者和内容框对不齐,你还可以调整一下PJblog顶部的宽度。见下表:

  #container #header #blogname{
 font-size:16px;
 text-align:left;
 font-weight:bold;
 margin-right: auto;
 margin-bottom: 11px;
 margin-left: auto;
 padding-top: 15px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 60px; blog标志距离屏幕左边的数值
 background-image: url(logo.png);
 background-repeat: no-repeat;
 height: 55px;
 width: 840px;  (红色的两个数值加起来等于你设置的整个pjblog的宽度值)

需要注意需要设计的就这几个数值,我说的很详细咯,琢磨一下自己就会了!可以只增加内容宽度不改变侧栏宽度,也可以同时增加两者的宽度。看你自己需要吧!

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • 火车头采集器dedecms织梦5.7图集发布模块的制作方法
    • PJBLOG页面广告投放终极攻略教程(威客365版)
    • 手动修改实现日志标题左侧小日历效果

    新闻关注排行榜

    热门推荐 最新推荐
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1