Discuz模板教程魅族导航制作

小白 · 发表于 2014-1-28 08:27:29

在上几次课程我们通过教程 Discuz魅族模板头部制作把魅族的头部仿造完成,接下来就是讲讲魅族导航仿造,我们会先分析模板,然后看代码,最后复制代码,最终将代码导入到dz论坛的header.htm里面整个流程就是如此

首先看看魅族导航的涉及到的布局,如图所示:

整个导航涉及到的css如下:#hd .wp,.hdc,#nva,#scbar,.scbar_wrap,#scbar_txt,具体的代码我们用google chrome将其复制出来:

/*导航2*/
.wp {margin: 0 auto;width: 1040px;padding: 0px 20px;}
#nva {overflow: hidden;padding: 17px 0px;height: 36px;float: left;}
#nva li {float: left;height: 36px;line-height: 36px;font-size: 14px; padding-right: 0px;}
#nv,#nv li,#nv li a:hover,#nv li.a{background:none;}
#nva .separator {height: 10px;margin-top: 13px;}
#nva li a {display: inline-block;padding: 0px 6px;margin: 0px 19px;color: #666;}
#nva span{display:none;}
/*搜索*/
#scbar {float: right;height: 36px;line-height: 36px;padding: 17px 0px;overflow: hidden; border:none; background:none;}
.scbar_wrap {_float: right;height: 34px;background: url(../../template/daodejing_mz/image/main_icon.png) no-repeat 0 0;
_background-image: url(../../template/daodejing_mz/image/main_icon.gif);}
#scbar_txt {width: 170px;height: 34px;padding: 0px 0px 0px 10px;outline: none;font-size: 14px;border: none;background: none transparent;float: left;}
#scbar_btn {width: 40px;height: 34px;margin: 0;padding: 0;border: none;background: none transparent;cursor: pointer;float: left;
}

复制代码

然后我们将以下代码代码复制到#w_header下面,用dreamweaver折叠#w_header这段代码,如图所示:

游客，如果您要查看本帖隐藏内容请回复

iikk · 发表于 2014-2-3 23:27:40

{:4_88:}{:4_88:}{:4_88:}{:4_88:}{:4_88:}{:4_88:}{:4_88:}{:4_88:}{:4_88:}{:4_88:}

CG少年 · 发表于 2014-2-7 18:08:02

[s_catsoul=4]这真是极好的[/s_catsoul]

荷叶地汪 · 发表于 2014-7-25 13:26:33

这个不错的一定要看看

coitems · 发表于 2015-3-23 06:29:44

谢谢分享，学了回，，

JSJSJSJS · 发表于 2016-1-31 20:49:27

可以有这个

[模板制作] Discuz模板教程魅族导航制作