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

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


2017-3-23 20-35-27.gif

——先看一下效果。


2017-3-23 20-37-06.gif

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


2017-3-23 20-35-52.gif

——这是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>


2017-3-23 20-36-16.gif

——这是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;}

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

转载请说明出处
孤狼备忘录 » Z-Blog PHP主题模板制作六:DIV+CSS布局响应式框架

技术交流

    1. 孤狼

      远程处理各种问题(20元)。
      精调效果SAM、Studio One、Cubase(150元),Pro Tools(250元)。

      联系孤狼QQ:642062966
      支付方式,点击:扫码支付
      远程工具:向日葵 这是官方网址,请放心下载。

授人以鱼— —不如授人以渔

Waves插件系列视频教程 常用机架视频教程