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