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

    1年前 (2017/03/23) 孤狼 技巧 1420 浏览 5 条评论

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

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

    版权属于:孤狼备忘录     本文作者:孤狼

    原文地址: https://www.glbwl.com/z-blog-php-theme-div-css.html

    版权声明:转载时必须以链接形式注明原始出处及本声明。

    « 上一篇:Z-Blog PHP主题模板制作五:新建首页index.php/头部header.php以及HTML头部信息 » 下一篇:Z-Blog PHP主题模板制作七:主菜单导航栏/logo/搜索

    推荐阅读

  • 折腾Z-BlogPHP主题模板zbgl/GitHub下载(添加侧栏功能修改手机显示样式)
  • Z-Blog PHP主题模板制作十六:导出主题为.zba文件
  • Z-Blog PHP主题模板制作十五:响应式调整/手机平板自适应模式
  • Z-Blog PHP主题模板制作十四:错误页面404.php
  • Z-Blog PHP主题模板制作十三:自定义搜索页面search.php
  • 已有5条留言


    发表评论:

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