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

时间:2年前 (2017-03-23) › 阅读:1554

在前面孤狼有简单的设想一下,我们将要制作的三栏模板。在这一章中我们使用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;}

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

5条留言


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。