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

频道:技巧 日期: 浏览:2583

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



有问题需要 远程 的,可以联系孤狼,远程 20元 一次。(注:不精调,有时间才能远程)

孤狼QQ:642062966

孤狼备忘录-收费群(2元):633458183

孤狼备忘录-VIP群:906740730 验证信息请输入(铂金、钻石用户名)