WSBLog(或者z-blog)液体两栏布局 Z-Blog 1.8

用户 wubuku 2006-12-9 4250

WSBLog(或者z-blog)液体两栏布局

所谓的液体两栏布局,指的是左边(或者右边)一栏目固定宽度,另外一栏的宽度随着浏览器宽度的大小自由缩放。我个人比较偏好这样的布局,觉得比较大气。

以我的BLOG为例,我的BLOG原先使用的是simple风格,该风格原来是固定宽度的,并非液体布局。我将其改为液体布局之后,样子就像这样:

http://www.wubuku.com

z-blog的缺省的两栏目布局的Template,由于div标签结构的缺陷,不能完美地支持液体两栏布局。所以,首先要对Template文件做一些修改,不用担心,改动很小的。洪哥,我们动手罢:

找到Template目录下面的几个文件:

default.html
search.html
catalog.html
single.html

搜索这些文件,找到id为divMain的div标签,在这个div下面再嵌入一个id为divMainContent的div。

比如在default.html文件中,这个div标签包裹着的代码块像这样:

		<div id="divMain">
<#template:article-multi#>
<div class="post pagebar"><#ZC_MSG042#>:<#template:pagebar#></div>
		</div>


我们改为这样:


		<div id="divMain">
			<div id="divMainContent">
<#template:article-multi#>
<div class="post pagebar"><#ZC_MSG042#>:<#template:pagebar#></div>
			</div>
		</div>


对search.html、catalog.html、single.html文件依次做这样的操作。

顺便说一句,新增这个div标签对使用其他的z-blog两栏风格没有任何影响,放心大胆地改吧。呵呵。

然后,我们修改Style目录下面的CSS风格文件,像我是把原来的simple.css文件作了这样的修改:

#divAll{
	width:95%;
	margin:0 auto;
	padding:0
}

#divPage{
	width:100%;
	margin:0;
	padding:0 0 0 0;
	text-align:left;
}
/*
#divMiddle{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:left;
	float:left;
}
*/
#divTop{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:left;
	float:left;
	height:100px;
}

#divSidebar{
	width:200px;
	margin:0;
	padding:0;
	text-align:center;
	float:left;
	border-right:1px solid #CACACA;
}
/*
#divInnerSidebar {	
}
*/

#divMain{
	float:right;
	margin:0px 0px 0px -205px;
	width:100%;
}
#divMainContent{
	margin:0px 0px 0px 205px;
	padding: 0;
	text-align:left;
}

#divBottom{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	float:left;
	height:70px;
	border-top:2px solid #8488D2;
}


——修改完之后保存,进入BLOG后台管理界面,重建索引、重建文件,就搞定了。

如果需要我修改后的simple风格文件,请到我的BLOG下载。

转载请注明出处:http://www.wubuku.com,谢谢合作!
最新回复 (3)
全部楼主
  • 管理员 washun 2006-12-9 0
    引用 2
    我的divtop是图片的 变形了会很难看的

    我的博客 怡泉环保

  • 用户 wubuku 2006-12-11 0
    引用 3
    原帖由 washun 于 2006-12-9 19:13 发表
    我的divtop是图片的 变形了会很难看的


    、我看了你的blog,是的,这样的图片是比较难处理的。

    一般来说,要做液体风格的话,图片一般不是很大,可以放在页面的最上面紧靠在左边,然后,背景颜色选择和图片颜色一致,这样就不露痕迹了。
  • 用户 flyseven 2007-1-11 0
    引用 4
    支持一下!野鼠爱我们的小孩有意思。。

    不过我的野鼠也有意思,哈哈

    我的ZBLOG博客:www.jm365.cn/seven/blog

    • ZBlogger技术交流中心
      5
          
返回