Z-Blog PHP主题模板制作六:DIV+CSS布局响应式框架

频道:技巧 日期: 浏览:2265

在前面孤狼有简单的设想一下,我们将要制作的三栏模板。在这一章中我们使用DIV+CSS布局,简单的做出了三栏主要框架,分别为 左 中 右,左为菜单导航,中为文章列表和内容页,右为侧边栏(工具栏)。同时也为响应式做基础,让我们在制作后面的全体响应式更为简单。下面是DIV+CSS布局响应式框架详细参数和代码。



——先看一下效果。



——这是浏览器显示代码。



——这是index.php主页,DIV+CSS。header.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>



——这是DIV+CSS的CSS样式。

——CSS样式文件目录 D:\web\Z-Blog\zb_users\theme\zbgl\style\style.css(style.css文件新建主题时自动生成的,直接打开就可以添加CSS样式代码。)

——CSS样式代码如下:

/* Theme Name:zbgl Description:这是由孤狼制作的Z-Blog PHP免费主题式响应适模板,名为:zbgl Author:孤狼 Author URI:http://www.glbwl.com 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;}

——目前就是这样子,后面我们将会制作菜单导航。

有问题需要 远程 的,可以联系孤狼,远程 20元 一次。(注:不精调,有时间才能远程)

孤狼QQ:642062966

孤狼备忘录-收费群(2元):633458183

孤狼备忘录-VIP群:906740730 验证信息请输入(用户名)