前面小V提过，本次教程演示主流的三栏ZBlog主题模板制作。在这一章中我们使用DIV+CSS布局，简单的做个三栏主要框架。
分别为 左 中 右，左为菜单导航，中为文章列表和内容页，右为侧边栏（工具栏）。下面是DIV+CSS布局响应式框架详细参数和代码。
——先简单看一下效果：
——查看源代码如下。
——注意：header.php文件没有修改。
——具体代码如下：
PHP
{template:header}<body><div class="wrapper"><div class="header">这是菜单导航，这是菜单导这是菜单导这是菜单导这是菜单导这是菜单导这是菜单导这是菜单导这是菜单导这是菜单导这是菜单导</div><!--nav .End--><div class="main"><div class="center">这是列表内容，这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容这是列表内容
</div><!--center .End--></div><!--main .End--><div class="sidebar">这是侧边栏，这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏这是侧边栏</div><!--sidebar .End--></div><!--wrapper .End--></body></html>——下面是index主页的CSS样式。
——CSS样式文件目录 C:\AppServ\www\zb_users\theme\xvblog\style\style.css（style.css文件新建主题时自动生成的，直接打开就可以添加CSS样式代码。）
——CSS样式代码如下：
PHP
/*
Theme Name:xvblog
Description:这是由小V博客制作的Z-Blog演示模板，名为：xvblog
Author:小V博客
Author URI:http://www.51xv.cn
Version:1.0
*/body{font-family:"Microsoft YaHei";font-size:16px;background:#f1f1f1;margin:0px;padding:0px;word-wrap:break-word;}.wrapper{background:#fff;width:1280px;margin:0 auto;}.header{background:#f9f9f9;margin:0px;padding:0px;float:left;width:190px;position:fixed;top:0px;bottom:0px;z-index:100;}.main{width:100%;float:left;}.center{margin-right:300px;margin-left:190px;padding-top:20px;padding-right:20px;padding-bottom:0px;padding-left:20px;overflow:hidden;}.sidebar{width:300px;float:right;margin-left:-300px;padding-top:20px;}——目前就是这样子，后面分享制作菜单导航。
转载请说明出处
zblog资源网 » ZBlogPHP主题模板制作教程_主页布局代码实现
zblog资源网 » ZBlogPHP主题模板制作教程_主页布局代码实现
