Discuz论坛模板教程、魅族导航

Discuz论坛模板教程、魅族导航

Discuz论坛模板教程、魅族导航

注：需要Discuz论坛模板的 请 百度 风格吧 里面有很多精品的论坛模板

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

整个导航涉及到的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这段代码,如图所示: