19楼风格导航美化有演示代码提取出来分享

地摊一族 · 发表于 2011-6-30 18:23:32

本帖最后由地摊一族于 2011-7-1 06:45 编辑

二级导航还没有修改完，晚上有空再修改 ,我也只是懂修改一点点，不太懂，只要知道的，懂的都会说出来，如果做成与我一样的请下载
[Discuz!模板]宁德社区Discuz X2蓝色19楼风格|漂亮大气门户套装【免费分享】演示：http://www.d5d4.com
header.htm 代码

<meta name="application-name" content="$_G['setting']['bbname']" />
<meta name="msapplication-tooltip" content="$_G['setting']['bbname']" />
<meta name="msapplication-task" content="name=$_G['setting']['navs'][1]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['portal']) ? 'http://'.$_G['setting']['domain']['app']['portal'] : $_G[siteurl].'portal.php'};icon-uri={$_G[siteurl]}{IMGDIR}/portal.ico" />
<meta name="msapplication-task" content="name=$_G['setting']['navs'][2]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['forum']) ? 'http://'.$_G['setting']['domain']['app']['forum'] : $_G[siteurl].'forum.php'};icon-uri={$_G[siteurl]}{IMGDIR}/bbs.ico" />
<meta name="msapplication-task" content="name=$_G['setting']['navs'][3]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['group']) ? 'http://'.$_G['setting']['domain']['app']['group'] : $_G[siteurl].'group.php'};icon-uri={$_G[siteurl]}{IMGDIR}/group.ico" />
<meta name="msapplication-task" content="name=$_G['setting']['navs'][4]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['home']) ? 'http://'.$_G['setting']['domain']['app']['home'] : $_G[siteurl].'home.php'};icon-uri={$_G[siteurl]}{IMGDIR}/home.ico" />
<link rel="archives" title="$_G['setting']['bbname']" href="{$_G[siteurl]}archiver/" />
$rsshead
<link rel="stylesheet" id="css_widthauto" type="text/css" href="data/cache/style_{STYLEID}_widthauto.css?{VERHASH}" />
<script type="text/javascript">HTMLNODE.className += ' widthauto'</script>
<script type="text/javascript" src="{$_G[setting][jspath]}forum.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<link rel="stylesheet" type="text/css" id="diy_common" href="data/cache/style_{STYLEID}_css_diy.css?{VERHASH}" />
<script src="{IMGDIR}/ndsns_jq.js" type="text/javascript"></script>
</head>
<body id="nv_{$_G[basescript]}" class="pg_{CURMODULE}" onkeydown="if(event.keyCode==27) return false;">
<div id="append_parent"></div><div id="ajaxwaitid"></div>
<a id="diy-tg" href="javascript:openDiy();" title="{lang open_diy}" class="y"><img src="{STATICURL}image/diy/panel-toggle.png" alt="DIY" /></a>
<div class="xi1 bm bm_c">
{lang your_mobile_browser}<a href="{$_G['siteurl']}forum.php?mobile=yes">{lang go_to_mobile}</a> <span class="xg1">|</span> <a href="$_G['setting']['mobile']['nomobileurl']">{lang to_be_continue}</a>
</div>
<div class="y ndsns_diy">
$nav[code]
<a href="javascript:;" onClick="widthauto(this)">{lang switch_wide}{lang switch_narrow}</a>
<a id="sslct" href="javascript:;" onMouseOver="delayShow(this, function() {showMenu({'ctrlid':'sslct','pos':'34!'})});">{lang changestyle}</a>
<a id="diy-tg" href="javascript:openDiy();" title="{lang open_diy}" class="xi1 xw1">DIY</a>
</div>
<div class="cl ndsns_topbar">
<form target="_blank" action="http://www.baidu.com/s" method="get" name="scForm">
<div class="wp">
<span class="left">小虫在线，精彩无限！<script type="text/javascript">var d = new Date(); document.write('<input type="hidden" name="wd" type="text" value="'+ (d.getMonth()+1)+'月'+d.getDate()+'日'+ '">'); document.write('<a class="scbutton" href="javascript:document.scForm.submit()">'+d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日'+' 星期'+'日一二三四五六'.charAt(new Date().getDay()));</script></a></span><span class="right">·<a href="Javascript: void(0)" id="sqgj" onMouseOver="showMenu(this.id)">社区工具</a>·<a href="home.php?mod=space&do=thread&view=all&order=dateline" target="_blank">查看新帖</a>·<a onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.d5d4.com/');return(false);" href="javascript:">设为首页</a>·<a target="_blank" href="http://www.d5d4.com/url.php">保存桌面</a>·<a href="http://www.d5d4.com" target="_blank" title="用手机上小虫网">手机版</a></span>
<div class="sqgj_menu" id="sqgj_menu" style="display:none;">
<ul>
<li><a target="_blank" href="meitu.php">图片处理</a></li>
<li><a target="_blank" href="plugin.php?id=ks_ac:ks_ac&apc=apply&mod=index">申请版主</a></li>
<li><a target="_blank" href="plugin.php?id=dsu_paulconvertx:dsu_paulconvertx">转帖工具</a></li>
<li><a target="_blank" href="home.php?mod=magic">道具商店</a></li>
<li><a target="_blank" href="home.php?mod=medal">勋章中心</a></li>
<li><a target="_blank" href="map.php">地图</a></li>
</ul>
</div>
</div>
</div>
<div id="sslct_menu" class="cl p_pop" style="display: none;">
<span class="sslct_btn" onClick="extstyle('')" title="{lang default}"><i></i></span>
<span class="sslct_btn" onClick="extstyle('$extstyle[0]')" title="$extstyle[1]"><i style='background:$extstyle[2]'></i></span>
</div>
<div id="qmenu_menu" class="p_pop" style="display: none;">
<ul>
<li>$nav[code]</li>
</ul>
</div>
<input type="hidden" value="andy215_pg" name="tn"></form>
<div id="hd" class="ndsns_hd">
<div class="wp">
<div class="hdc cl">
<h2><a href="./" title="$_G['setting']['bbname']">{$_G['style']['boardlogo']}</a>$_G['setting']['navlogos'][$mnid]</h2>
<div id="um">
<div class="avt y"><a href="home.php?mod=space&uid=$_G[uid]"></a></div>
<p>
<strong class="vwmy{if $_G['setting']['connect']['allow'] && $_G[member][conisbind]} qq{/if}"><a href="home.php?mod=space&uid=$_G[uid]" target="_blank" title="{lang visit_my_space}">{$_G[member][username]}</a></strong>
<span id="loginstatus">
<a id="loginstatusid" href="member.php?mod=switchstatus" title="{lang login_switch_invisible_mode}" onClick="ajaxget(this.href, 'loginstatus');return false;" class="xi2"></a>
</span>
<span class="pipe">|</span><a href="home.php?mod=spacecp">{lang setup}</a>
<span class="pipe">|</span><a href="home.php?mod=space&do=pm" id="pm_ntc"{if $_G[member][newpm]} class="new"{/if}>{lang pm_center}</a>
<span class="pipe">|</span><a href="home.php?mod=space&do=notice" id="myprompt"{if $_G[member][newprompt]} class="new"{/if}>{lang remind}($_G[member][newprompt])</a><span id="myprompt_check"></span>
<span class="pipe">|</span><a href="home.php?mod=task&item=doing" id="task_ntc" class="new">{lang task_doing}</a>
<span class="pipe">|</span><a href="portal.php?mod=portalcp">{lang portal_manage}{lang portal_block_manage}</a>
<span class="pipe">|</span><a href="forum.php?mod=modcp&fid=$_G[fid]" target="_blank">{lang forum_manager}</a>
<span class="pipe">|</span><a href="admin.php" target="_blank">{lang admincp}</a>
<span class="pipe">|</span><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>
</p>
<p>
<a href="home.php?mod=spacecp&ac=credit&showcredit=1" id="extcreditmenu"{if !$_G[setting][bbclosed]} onMouseOver="delayShow(this, showCreditmenu);" class="showmenu"{/if}>{lang credits}: $_G[member][credits]</a>
<span class="pipe">|</span>{lang usergroup}: <a href="home.php?mod=spacecp&ac=usergroup"{if $upgradecredit !== 'false'} id="g_upmine" class="xi2" onMouseOver="delayShow(this, showUpgradeinfo)"{/if}>$_G[group][grouptitle]</a>
</p>
</div>
<p>
<strong><a id="loginuser" class="noborder"></a></strong>
<span class="pipe">|</span><a href="member.php?mod=logging&action=login" onClick="showWindow('login', this.href)">{lang activation}</a>
<span class="pipe">|</span><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>
</p>
</div><img src="http://www.d5d4.com/template/ndsns/imgdir/qiang.gif" style="position:absolute;z-index:1001;margin-left:325px;margin-top:-3px;"><img src="http://www.d5d4.com/template/ndsns/imgdir/re.gif" style="position:absolute;z-index:1001;margin-left:692px;margin-top:-3px;">
<img src="http://www.d5d4.com/template/ndsns/imgdir/xin.gif" style="position:absolute;z-index:1001;margin-left:502px;margin-top:-3px;">
<div id="nv">
<div class="nv_l"></div>
<div class="nv_r"></div>
<a href="javascript:;" id="qmenu" onMouseOver="showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});">{lang my_nav}</a>
<ul>
<li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li>
</ul>
</div>
<ul class="p_pop h_pop" id="plugin_menu" style="display: none">
<li>$module[url]</li>
</ul>
$_G[setting][menunavs]
<div id="mu" class="cl">
<ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
$subnav
</ul>
</div>
<style type="text/css">
#nav_bottom {
background-image: url(http://www.d5d4.com/template/ndsns/imgdir/nav_bottom.png);
height: 59px;
padding-top:9px;
width: 980px;
}
</style>
<div id="nav_bottom"><table width="980" border="0" align="center" style="font-size:12px; font-family:宋体;">
<tbody><tr>
<td width="10" rowspan="2" style="padding-left:8px;"><img src="http://www.d5d4.com/template/ndsns/imgdir/menu_zixun.gif" width="29" height="47"></td>
<td width="170" height="22" valign="top" style="padding-left:10px;"><a href="#" target="_blank">茂南</a> | <a href="#" target="_blank">茂港</a> | <a href="#" target="_blank">化州</a> | <a href="#" target="_blank">高州</a></td>
<td width="29" rowspan="2"><img src="http://www.d5d4.com/template/ndsns/imgdir/menu_hudong.gif" width="29" height="47"></td>
<td width="315" valign="top" style="padding-left:10px;"><a href="http://www.d5d4.com/forum-2-1.html" target="_blank">茂名生活</a> | <a href="http://www.d5d4.com/forum-36-1.html" target="_blank">聊天八卦</a> | <a href="http://www.d5d4.com/forum-38-1.html" target="_blank">我型我秀</a> | <a href="http://www.d5d4.com/forum-42-1.html" target="_blank">交友征婚</a> | <a href="http://www.d5d4.com/forum-37-1.html" target="_blank">情感</a></td>
<td width="29" rowspan="2"><img src="http://www.d5d4.com/template/ndsns/imgdir/menu_kuanpin.gif" width="29" height="47"></td>
<td width="220" valign="top" style="padding-left:10px;"><a href="http://www.d5d4.com/forum-47-1.html" target="_blank">房屋租售</a> | <a href="http://www.d5d4.com/forum-48-1.html" target="_blank">求职招聘</a> | <a href="http://www.hao123.com/haoserver/kuaidi.htm" target="_blank">快递</a> | <a href="http://map.baidu.com/" target="_blank">地图</a></td>
<td width="29" rowspan="2"><img src="http://www.d5d4.com/template/ndsns/imgdir/menu_shenghuo.gif" width="29" height="47"></td>
<td width="130" valign="top" style="padding-left:5px;"><a href="#">网络电视</a>
| <a href="#"><font color="red">搞活动</font></a></td>
</tr>
<tr>
<td width="170" style="padding-left:10px;"><a href="#" target="_blank">信宜</a> | <a href="#" target="_blank">电白</a> | <a href="http://www.d5d4.com" target="_blank"><font color="#FF3300">茂名</font></a> | <a href="http://t.qq.com/gdmm88"target="_blank">微博</a></td>
<td width="315" style="padding-left:10px;"><a href="http://www.d5d4.com/forum-43-1.html" target="_blank">茂名美食</a> | <a
href="http://www.d5d4.com/forum-44-1.html" target="_blank">时尚潮流</a> | <a href="http://www.d5d4.com/forum-41-1.html" target="_blank">原创摄影</a> | <a href="http://www.d5d4.com/forum-39-1.html" target="_blank">影音娱乐</a> | <a href="http://www.d5d4.com/forum-40-1.html" target="_blank">互助</a></td>
<td width="220" style="padding-left:10px;"><a href="http://www.d5d4.com/forum-49-1.html" target="_blank">二手市场</a> | <a href="http://www.d5d4.com/forum-50-1.html" target="_blank">广告专区</a> | <a href="http://www.d5d4.com/forum-50-1.html" target="_blank">开张</a> | <a href="http://www.d5d4.com/forum-50-1.html" target="_blank">打折</a></td>
<td width="130" align="center" style="padding-left:5px;"><a href="#">音乐电台</a> | <a href="#">音乐台</a></td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div id="wp" class="wp">

复制代码

css 代码

/* 页头 */
#toptb { line-height: 24px; height:24px; overflow:hidden; }
#toptb #ppered{ overflow:hidden;}
#toptb a { float: left; padding: 0 4px; height: 24px; }
#toptb a.showmenu { padding-right: 15px; }
#toptb a.hover { background-color: #FFF; }
#toptb .pipe { float: left; display: none; }
#hd { border-bottom: {HEADERBORDER} solid {SPECIALBORDER}; {HEADERBGCODE} }
#hd .wp { padding: 10px 0 0; }
#diy-tg { width: 55px; background: url({STATICURL}image/diy/panel-toggle.png) no-repeat 100% 1px; text-indent: -9999px; overflow: hidden; }
.hdc { min-height: 70px; }
.ie6 .hdc { height: 70px; }
#hd h2 { padding: 0 20px 8px 0; float: left; }
#space #hd h2 { margin-top: 0; }
#hd .fastlg { float: right; padding-top: 10px; }
#scbar { height: 36px; background: url({IMGDIR}/search.png) repeat-x 0 0; line-height: 36px; overflow: hidden; margin-bottom:8px; }
#scbar form{ float:left; }
.scbar_icon_td { width: 50px; background: url({IMGDIR}/search.png) no-repeat 6px -79px; }
.scbar_txt_td, .scbar_type_td { background: url({IMGDIR}/search.png) repeat-x 0 -222px; }
#scbar_txt { width: 250px; border: 1px solid #FFF; outline: none; font-size: 12px; background:none;}
.scbar_btn_td { width: 60px; background: url({IMGDIR}/search.png) no-repeat 0 -296px; text-align: center; cursor: pointer; }
#scbar_btn { margin: 0; padding: 0; border: none; background: transparent none; }
.scbar_type_td { background: url({IMGDIR}/search.png) no-repeat 0 -377px; }
#scbar_type { display: block; padding-left: 5px; text-align: left; text-decoration: none; }
#scbar_type_menu { margin-top: -8px; }
#scbar_hot { padding-left: 8px; height: 36px; overflow: hidden; padding-top:1px; }
#scbar_hot strong, #scbar_hot a { float: left; margin-right: 8px; white-space: nowrap; }
#sc_txt { margin-right: 0; width: 120px; border-right: none; outline: none; }
#sc_type_w { border-left: none; }
#sc_type { height: 17px !important; line-height: 17px; }
.ie8 #sc_type { line-height: 18px; }
#sc_btn { margin-right: 0; }
#sc_type_menu { margin: 2px 0 0 -5px; width: 100px; line-height: 1.5; }
#sc_type_menu a { float: none; }
#sc table{ height:32px; margin-right:5px; }
#nv { overflow: hidden; padding-left: 3px; height: 33px; {MENUBGCODE}; }
#nv li { float: left; height: 33px; line-height: 33px; background: url({IMGDIR}/nv_a.png) no-repeat 100% 0; font-weight: 700; font-size: 14px; }
#nv li a { float: left; padding: 0 20px; height: 33px; }
#nv li a { color: {MENUTEXT}; }
#nv li span { display: none; }
#nv li.a { {MENUHOVERBGCODE}; }
#nv li.a a { color: {MENUHOVERTEXT}; }
#nv li a:hover { background: url({IMGDIR}/nv_a.png) no-repeat 50% -66px; }
#nv li.hover a:hover, #nv li.hover a { background: url({IMGDIR}/nv_a.png) no-repeat 50% -99px; }
#mu { position: relative; z-index: 1; }
.ie6 #mu, .ie7 #mu { line-height: 0; font-size: 0; }
#mu ul { background: url({IMGDIR}/mu_bg.png) no-repeat 0 100%; line-height: 22px; z-index: 2; font-size: 12px; }
#mu li { float: left; height: 32px }
#mu a { float: left; display: inline; margin: 5px 6px; padding: 0 10px; white-space: nowrap; }
#mu a:hover { margin: 4px 5px; border: 1px solid {SPECIALBORDER}; background: {SPECIALBG}; color: {HIGHLIGHTLINK}; text-decoration: none; }
.floatmu { position: absolute; left: 0; top: 0; }
#um { float: right; padding-top: 10px; padding-right: 60px; _padding-right: 54px; line-height: 2.3; }
#um, #um a { color: {HEADERTEXT}; }
#um p { text-align: right; }
#um .avt { display: inline; margin-right: -60px; }
.vwmy { padding-left: 16px; background: url({IMGDIR}/user_online.gif) no-repeat 0 2px; }
.vwmy.qq { background: url({IMGDIR}/connect_qq.gif) no-repeat scroll 0 0; padding-left: 20px; }
/* .topnav .new, .sch .new 分别为为个人中心和搜索页面头部新消息样式 */
#um .new, .topnav .new, .sch .new, #toptb .new { padding-left: 20px; background-repeat: no-repeat; background-position: 0 50%; color: {HIGHLIGHTLINK}; font-weight: 700; }
#myprompt.new { background-image: url({IMGDIR}/notice.gif); background-position: 3px 50%; }
#pm_ntc.new { background-image: url({IMGDIR}/new_pm.gif); }
#task_ntc { background-image: url({STATICURL}image/feed/task.gif); }
#um .pipe { margin: 0 5px 0 0; }
#extcreditmenu { margin-right: 2px !important; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; }
#extcreditmenu.a { position: relative; z-index: 302; margin-right: 1px !important; border: 1px solid; border-color: {DROPMENUBORDER}; border-bottom: none; background-color: {WRAPBG}; }
#extcreditmenu_menu { margin-top: -1px; width: auto; }
#extcreditmenu_menu li { float: none; display: block; padding-left: 10px !important; padding-right: 3em !important; }
#qmenu { float: right; display: inline; margin: 3px 4px 0; padding: 0 12px 0 0; width: 83px; height: 26px; background: url({IMGDIR}/qmenu.png) no-repeat 0 0; line-height: 26px; text-align: center; color: {HIGHLIGHTLINK}; font-weight: 700; text-shadow: 0 1px 0 #FFF; overflow: hidden; }
#qmenu:hover { text-decoration: none; }
#qmenu.a { position: relative; z-index: 302; background-position: 0 -30px; }
#qmenu_menu { margin-top: -1px; padding: 20px 5px 10px; width: 180px; border-color: #9A9A9A; }
.ie_all #qmenu_menu { margin-left: 1px; }
.ie9 #qmenu_menu { margin-left: 0; }
#qmenu_menu ul li { float: left; }
#qmenu_menu ul a { margin-bottom: 10px; padding: 47px 0 0; width: 60px; border: none; border-radius: 4px; background: url({IMGDIR}/noicon.gif) no-repeat 50% 5px; text-align: center; }
#qmenu_menu ul a:hover { background-color: {SPECIALBG}; color: {HIGHLIGHTLINK}; text-shadow: none; }

复制代码

所用到的背景图

fs902 · 发表于 2011-6-30 18:59:44

楼主，你那登录窗口是怎么弄的？是在header.htm里的一段代码吗，可不可以共享下呀，谢谢了

effort8 · 发表于 2011-6-30 18:59:56

沙发了，

Alex° · 发表于 2011-6-30 19:22:47

LZ 你那天气预报怎么添加的，添加在哪里，能不能共享下，谢谢。

gushiyue · 发表于 2011-6-30 19:39:28

提示: 作者被禁止或删除内容自动屏蔽

地摊一族 · 发表于 2011-6-30 21:15:31

fs902 发表于 2011-6-30 18:59
楼主，你那登录窗口是怎么弄的？是在header.htm里的一段代码吗，可不可以共享下呀，谢谢了

哪个登录窗口，截个图看看

地摊一族 · 发表于 2011-6-30 21:16:01

gushiyue 发表于 2011-6-30 19:39
有一部分人需要！

有人要我就发出来

男人馆 · 发表于 2011-6-30 21:23:35

要头部和搜索

jxhoward · 发表于 2011-6-30 21:28:13

我也需要，顶

地摊一族 · 发表于 2011-6-30 21:29:16

Alex° 发表于 2011-6-30 19:22
LZ 你那天气预报怎么添加的，添加在哪里，能不能共享下，谢谢。

默认风格\template\default\common\pubsearchform.htm 文件代码中找到以下代码：

</div>
</td>
</tr>
</table>
</form>

复制代码

在下面添加

<div id="weather"><iframe src="http://weather.hao.360.cn/index_small_userdata_20100701.html" width="380" height="22" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" allowtransparency="true" scrolling="no"></iframe></div>

复制代码

		自动登录	找回密码
密码			立即注册

[发布] 19楼风格导航美化有演示代码提取出来分享

本帖子中包含更多资源

[发布] 19楼风格导航美化 有演示 代码 提取出来分享

本帖子中包含更多资源

[发布] 19楼风格导航美化有演示代码提取出来分享