The adjustment of the Log panel of PJBlog 日志面板布局调整 -℃ 
通过修改PJBlog博客的模板文件和CSS文件来实现类似吉光片羽博客的文章列表布局的图文混搭效果，该教程为PJZONE.CN原创，转载请注明来源。
有人问我，类似吉光片羽目前博客的文章排版布局PJBlog可以做到吗？答案是肯定的，如果是PJBlog4就可以用绝对来回答。下面我就来简单介绍下如果通过CSS来调整PJBlog日志面板的文章排版，从而实现左侧图片，右侧分别为日志标题，日志相关信息和日志内容的效果。
首先，为了区别列表页和日志内容页的布局效果，我们需要修改相关模板文件来增加class类，打开template文件夹里的Articlelist.asp文件，找到第2行和第29行，以及class文件夹的cls_article.asp文件，找到第189行，分别用以下代码替换：
<div class="Content ArticleList">
接着，打开皮肤文件夹的layout.css文件，在最后插入以下代码。我的思路是通过绝对定位来实现不凡的布局效果。由于时间关系，下面就直接给出答案，如果你对此感兴趣，可以评论提出疑问，有时间我会做详细解答：
.ArticleList{
position:relative;
/*假设该板面的高宽分别为200和600*/
padding-left:220px;
height:200px;
overflow:hidden;
}
.ArticleList .Content-top .ContentTitle{
margin:0;
padding:0;
/*假设标题为20像素的字体*/
font-size:20px;
line-height:20px;
height:20px;
overflow:hidden;
}
.ArticleList .Content-top .ContentAuthor{
margin:0;
padding:5px 0;
/*假设作者和时间为12像素的字体*/
font-size:12px;
line-height:15px;
height:15px;
overflow:hidden;
}
.ArticleList .Content-body{
padding:15px 0 0;
line-height:18px;
}
.ArticleList .Content-body img{
position:absolute;
left:0;
top:0;
border:0;
height:200px;
width:200px;
}
.ArticleList .Content-bottom{
font-size:12px;
position:absolute;
left:220px;
top:40px;
}
position:relative;
/*假设该板面的高宽分别为200和600*/
padding-left:220px;
height:200px;
overflow:hidden;
}
.ArticleList .Content-top .ContentTitle{
margin:0;
padding:0;
/*假设标题为20像素的字体*/
font-size:20px;
line-height:20px;
height:20px;
overflow:hidden;
}
.ArticleList .Content-top .ContentAuthor{
margin:0;
padding:5px 0;
/*假设作者和时间为12像素的字体*/
font-size:12px;
line-height:15px;
height:15px;
overflow:hidden;
}
.ArticleList .Content-body{
padding:15px 0 0;
line-height:18px;
}
.ArticleList .Content-body img{
position:absolute;
left:0;
top:0;
border:0;
height:200px;
width:200px;
}
.ArticleList .Content-bottom{
font-size:12px;
position:absolute;
left:220px;
top:40px;
}
以上代码只是实现该效果的基本代码，你需要根据自己博客皮肤的实际情况进行相应调整，需要注意的是，你在填写内容摘要的时候必须的含有一张有效的图片，以此例来说，图片尺寸必须是200*200，以保证不变形或超出其固定范围。如有不明白的地方请评论提出，谢谢。
注：修改前请务必做好备份，出现问题本站概不负责！
吉光片羽 发表于 2009-12-19 
- 版权声明
- 相关日志
- 相关搜索
-
作品主人：本站原创 | http://www.pjzone.cn/beta/
引用通告：查看所有引用 | 我要引用此文章
版权声明：非特别说明，本站原创作品遵循创作共用2.5许可协议，转载请务必注明来源！
温馨提示：如果你的博客出现问题，请评论留下相关演示地址，方便参考，谢谢！
回复
7crimes 说于 2009-12-23 10:59:47 | 
嘿嘿~正在测试~主机宕机了，在用免费空间测试，国家严打，用个博客都这么难~~我靠了！ 第三次了，你把发表评论和重写换个位置啊！！火大了！
发表评论