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

登录后才能浏览的网址

不登录打不开
Waves v11.0.41版本下载
Waves Complete v2018.12.05安装包下载

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


——这是菜单导航栏/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;}


转载请说明出处
孤狼备忘录 » Z-Blog PHP主题模板制作七:主菜单导航栏/logo/搜索

技术交流

    孤狼

    为了网站运行流畅和加速打开网站,所以关闭评论功能。
    有什么问题可以到孤狼备忘录-收费群(5元):633458183

    1. 孤狼

      孤狼提供远程技术支持:只限本站资源,需预约。
      远程费用(20元)各种问题;
      永久会员 免费。

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

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

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