个人随笔和一些网文摘录
http://www.dlxp.cn

修改Pjblog皮肤各个部分尺寸,让哪款皮肤都适合您的blog~(修改layout.css文件)

[b]1、修改边上的侧边栏的左右位置
目的:[/b]想把文章显示部分,和侧边栏左右调换一下。
侧边栏居左:
/*—工具条–*/
#sidebar部分,将float参数改为left,sidebar就是侧边栏。
/*—主内容–*/
#mainContent部分,将float参数改为right,mainContent就是文章部分。
侧边栏居右:
/*—工具条–*/
#sidebar部分,将float参数改为right,sidebar就是侧边栏。
/*—主内容–*/
#mainContent部分,将float参数改为left,mainContent就是文章部分。
这里要注意下,修改侧边栏的左右位置是修改两个部分的。本别是工具条的float属性和主内容的float属性。
它的左右是和显示文章部分相对的。简单的文字表示看下面。
这里先强调两个词的意思。
工具条=#sidebar部分=侧边栏
主内容=#mainContent部分=显示文章部分
侧边栏#sidebar{float:left | 显示文章部分#mainContent{float:right
显示文章部分#mainContent{float:left | 侧边栏#sidebar{float:right
我说的这么详细,应该明白了哈。。。。
2、修改侧边栏和文章显示部分的宽度;
目的:想把侧边栏和文章显示部分的宽度比例改一下。比如侧边栏宽点,文章显示部分窄点;右或者想侧边栏窄点,文章显示部分宽点。
想修达到目的:,必须先注意一下“主体样式”部分。
/*—主体样式—*/
#container{width:960px
这个主体样式部分定义了你皮肤的宽度了。所以侧边栏和文章显示部分,无论你怎么分割宽度,都不能大过960像素。
侧边栏部分的宽度修改。
/*—工具条–*/
#sidebar{float:left;width:200px
修改width参数。
修改文章显示部分的宽度
/*—主内容–*/
#mainContent{float:right;margin:3px 0 6px;width:760px !important;width:755px
同样修改width的值,例子中的
width:760px是IE6下的宽度效果。
!important;width:755px是IE7下的效果。
目前我的侧边框是200像素,文章显示部分是760像素,加起来刚好等于主题样式里定义的960像素。
有些朋友换皮肤后错位,可能是因为加了广告,或者什么其他工具。撑大了侧边栏或文章显示部分的宽度,但是你换的皮肤中,侧边栏或文章显示部分的宽度小于广告的宽度。因此就出现了错误。具体表现就是侧边栏跑下面去了。
3、修改文章内容靠边的位置。
目的:想调试文章显示的文字和文章显示部分的边靠近点。
修改内容框部分的“.Content”样式
/*—内容框–*/
.Content{margin:10px -5px;}
[quote] margin参数的功能:检索或设置对象四边的外延边距。
如果只提供一个参数值,将用于全部的四边。
如果提供两个参数值,第一个用于上-下,第二个用于左-右。
如果提供三个参数值,第一个用于上,第二个用于左-右,第三个用于下。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
[/quote] 我这里的margin参数只提供了2个参数值。按照引用内的要求,这两个参数值,
第一个“10px”修改的就是文章文字与文章边框的上下距离。
第二个“-5px”修改的就是文章文字与文章边框的左右距离。
4、修改打开某篇文章后,在文章标题上面的分类位置
目的:比如我打开谋篇日志了,在日志标题上面有个分类。我想让这个分类显示靠两边点。
/*—主内容–*/
#innermainContent{margin:0px;}
修改“主内容”的#innermainContent样式部分。margin属性请参见上面的引用框噢。。
5、修改打开某篇文章后,文章标题靠左右边的距离。
目的:比如我打开谋篇日志了,想让日志标题靠边点。
/*—日志标题框–*/
.Content-top{text-align:left;margin-bottom:2px;border-left:6px solid #ca1717;width:740px;}
修改“日志标题框”.Content-top样式内的width的值。值越大,约靠边。但是不能大过文章显示部分的最大宽度。
/*—日志标题框–*/
.Content-top .ContentTitle{font-size:12px;color:#3E3E2F;margin:0px -5px 0px;line-height: 25px;text-indent: 10px;}
修改“日志标题框”.Content-top .ContentTitle样式内的margin值,margin属性请参见上面的引用框。
6、修改打开某篇文章后,文章标题下面的天气图片位置。
目的:,让标题下面的天气图片也靠边一点。。
/*—日志其他信息–*/
.Content-Info {margin:0px 10px 6px 20px;padding:0px}
修改“日志其他信息”.Content-Info样式的 margin值,margin的属性请参见上面的引用框。(提示:4个值时,顺序是上右下左)
7、修改首页文章区域的间距。准确的说应该是文章标题的行间距离吧。
目的:日志在列表显示模式下,标题的行与行之间的距离大小了。看着太紧凑了。想分散点。
/*—日志内容框–*/
.Content-body{margin:5px 8px 0px 8px;overflow:hidden;text-align:left;width:97%;line-height:182%;}
修改“日志内容框” .Content-body属性里的line-height:182%的百分比。值越大,标题间的距离越大。否则反之

未经允许不得转载:Leejoa's 生活随笔 » 修改Pjblog皮肤各个部分尺寸,让哪款皮肤都适合您的blog~(修改layout.css文件)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!