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

时间:2年前 (2017-03-24) › 阅读:1792

在前一章我们把主要框架布局完成,在这章中孤狼来制作左侧菜单导航栏。在菜单导航栏加入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;}


5条留言

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

发表评论:

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