• Z-Blog PHP主题模板制作七:主菜单导航栏/logo/搜索

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

    在前一章我们把主要框架布局完成,在这章中孤狼来制作左侧菜单导航栏。在菜单导航栏加入logo、搜索还有站长联系方式。在菜单导航中只制作了一级导航和二级导航,具体效果如下图片。


    Z-Blog PHP主题模板制作七:主菜单导航栏/logo/搜索

    ——这是菜单导航栏的,一级导航和二级导航。


    Z-Blog PHP主题模板制作七:主菜单导航栏/logo/搜索

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


    Z-Blog PHP主题模板制作七:主菜单导航栏/logo/搜索

    ——后台导航栏设置。


    Z-Blog PHP主题模板制作七:主菜单导航栏/logo/搜索

    ——index.php主页代码,header.php文件没有修改。

    {template:header}
    
    <body>
    <div class="wrapper">
    <div class="header">
      <div class="logo"><h1><a href="{$host}">{$name}</a></h1><samp>{$subname}</samp></div>
      <div class="search"><form name="search" method="post" action="{$host}zb_system/cmd.php?act=search"><span><input type="text" name="q" size="11"  class="search-text" placeholder="输入搜索内容"/></span><input type="submit" class="search-submit" value=""/></form></div>
      <div class="nav"><ul>{module:navbar}</ul></div>
      <div class="social-links"><a href="http://wpa.qq.com/msgrd?v=3&uin=642062966&site=qq&menu=yes" class="qq" target="_blank"></a></div>
    </div><!--header .End-->
      <div class="main">
      <div class="center">
    </div><!--center .End-->
      </div><!--main .End-->
      <div class="sidebar"></div><!--sidebar .End-->
    </div><!--wrapper .End-->
    </body>
    </html>


    Z-Blog PHP主题模板制作七:主菜单导航栏/logo/搜索

    ——这是菜单导航栏/logo/搜索,CSS控制样式。

    h1,h2,h3,h4,h5,h6,ul,ol{margin:0px;padding:0px;display:block;}
    li{list-style-type:none;}
    a{text-decoration:none;color:#444;font-size:16px;}
    a:hover{text-shadow:0 0 1px #000;}
    .logo{background:#26A6F2;text-align:center;height:110px;width:180px;overflow:hidden;padding:5px;}
    .logo a{font-size:32px;color:#444;font-weight:bold;line-height:70px;display:block;height:70px;text-shadow:0 0 3px #fff;}
    .logo samp{font-size:14px;color:#fff;line-height:18px;display:block;height:30px;overflow:hidden;}
    .search{background:#fff;text-align:center;width:178px;border:solid 1px #ddd;margin:10px 5px 5px 5px;border-radius:5px;overflow:hidden;}
    .search span{float:left;padding-left:5px;}
    .search-text{border:none;font-size:16px;width:153px;height:25px;outline:0 none;margin:3px 0;}
    .search-submit{border:none;cursor:pointer;background-image:url(images/search.gif);background-repeat:no-repeat;width:16px;height:16px;margin-top:10px;right:7px;}
    .nav{padding-top:10px;margin-top:10px;border-top:solid 1px #ddd;}
    .nav ul{width:100%;}
    .nav ul li{width:100%;height:40px;border-bottom:solid 1px #f7f7f7;}
    .nav ul li a{font-size:18px;line-height:40px;padding-left:20px;display:block;color:#444;}
    .nav ul li:hover{background:#fff;border-bottom:solid 1px #26A6F2;}
    .nav ul ul{margin:20px 0 0 0;opacity:0;visibility:hidden;left:190px;z-index:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;position:absolute;}
    .nav li:hover > ul{background:#fff;opacity:1;visibility:visible;margin:-40px 0 0 0;}
    .nav li li{border-bottom:solid 1px #ddd;}
    .social-links{width:100%;text-align:center;border-top:solid 1px #ddd;border-bottom:solid 1px #ddd;margin-top:10px;display:block;background-color:#ddd;}
    .social-links a{height:37px;width:37px;margin:5px 5px 0px 5px;border-radius:5px;background-color:#ddd;display:inline-block;background-image:url(images/qq.png);background-repeat:no-repeat;}


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

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

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

    « 上一篇:Z-Blog PHP主题模板制作六:DIV+CSS布局响应式框架 » 下一篇:换程序换主题模板百度收录低了流量少了

    推荐阅读

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

    • 萱萱生态果园不知火丑柑爱媛38号  2017-04-07 12:48:53 回复该评论
      站名:萱萱生态果园不知火丑柑爱媛38号
      网址:http://hotfruit.net/
      欢迎大家到我的博客上面做评论广告,带您的网站链接都可以,没有什么要求,
      发布的内容没有不良信息就可以

    发表评论:

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