请教一个css+div做导航的问题
[Discuz!]&Menu=yes" target="_blank">" border="0">请教CSS+DIV做导航 如何做当前页面对于的导航变色
css代码:
程序代码:
#head_menu { PADDING-LEFT: 0px; FLOAT: left; MARGIN: 0px; TEXT-ALIGN: left } #top_nav { DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: left; MARGIN: 0px; TEXT-ALIGN: left } #top_nav LI { FONT-WEIGHT: bold; FONT-SIZE: 14px; FLOAT: left; MARGIN-LEFT: 4px; LIST-STYLE-TYPE: none } #top_nav LI A:link { PADDING-RIGHT: 11px; DISPLAY: block; BACKGROUND: url(images/menu_right.gif) no-repeat right top; FLOAT: left; TEXT-DECORATION: none } #top_nav LI A:visited { PADDING-RIGHT: 11px; DISPLAY: block; BACKGROUND: url(images/menu_right.gif) no-repeat right top; FLOAT: left; TEXT-DECORATION: none } #top_nav LI SPAN { DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(images/menu_left.gif) no-repeat; FLOAT: left; CURSOR: pointer; COLOR: #333333; LINE-HEIGHT: 26px } #top_nav LI A:hover { BACKGROUND: url(images/menu_right.gif) no-repeat right bottom } #top_nav LI A:active { BACKGROUND: url(images/menu_right.gif) no-repeat right bottom } #top_nav LI A:hover SPAN { DISPLAY: block; BACKGROUND: url(images/menu_left.gif) no-repeat left bottom; COLOR: #ffffff } #top_nav LI A:active SPAN { DISPLAY: block; BACKGROUND: url(images/menu_left.gif) no-repeat left bottom; COLOR: #ffffff } #top_nav .current A:link { PADDING-RIGHT: 11px; BACKGROUND: url(images/menu_right.gif) no-repeat right bottom } #top_nav .current A:visited { PADDING-RIGHT: 11px; BACKGROUND: url(images/menu_right.gif) no-repeat right bottom } #top_nav .current SPAN { PADDING-LEFT: 10px; BACKGROUND: url(images/menu_left.gif) no-repeat left bottom; COLOR: #ffffff } #top_nav #cur A:link { BACKGROUND: url(images/menu_right.gif) no-repeat right bottom } #top_nav #cur A:visited { BACKGROUND: url(images/menu_right.gif) no-repeat right bottom } #top_nav #cur SPAN { BACKGROUND: url(images/menu_left.gif) no-repeat left bottom; COLOR: #ffffff } #topnav-cart { MARGIN-TOP: 30px; FLOAT: left; MARGIN-LEFT: 30px; LIST-STYLE-TYPE: none } #topnav-cart UL { PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } #topnav-cart LI { PADDING-RIGHT: 5px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #topnav A:hover { TEXT-DECORATION: underline } #seccode { DISPLAY: none } #search_bar { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: url(images/nav.gif); PADDING-BOTTOM: 3px; PADDING-TOP: 3px; HEIGHT: 60px } #search_area { PADDING-RIGHT: 2px; TEXT-ALIGN: center } #search_area .btn { BACKGROUND: url(images/search.gif) no-repeat left 2px; WIDTH: 66px; BORDER-TOP-STYLE: none; MARGIN-RIGHT: 10px; PADDING-TOP: 2px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 25px; BORDER-BOTTOM-STYLE: none } #search_area A:link { COLOR: #fff; TEXT-DECORATION: none } #search_area A:visited { COLOR: #fff; TEXT-DECORATION: none } #search_area A:hover { COLOR: #fff; TEXT-DECORATION: underline } #search_area A:active { COLOR: #fff; TEXT-DECORATION: none }
网页代码:
程序代码:
<DIV id=top_nav> <UL id=head_menu> <LI id=cur><A href="#HOPE_InstallDir#index.html" target="_parent"><SPAN>首页</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/39.html" target="_parent"><SPAN>餐 饮</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/40.html" target="_parent"><SPAN>娱 乐</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/41.html" target="_parent"><SPAN>购 物</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/42.html" target="_parent"><SPAN>酒 店</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/43.html" target="_parent"><SPAN>旅 游</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/44.html" target="_parent"><SPAN>便 民</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/45.html" target="_parent"><SPAN>教 育</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/47.html" target="_parent"><SPAN>汽 车</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/46.html" target="_parent"><SPAN>房 产</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/48.html" target="_parent"><SPAN>折 扣</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#tradeinfo/trade/48.html" target="_parent"><SPAN>公 益</SPAN></A> </LI> <LI id=curnot><A href="#HOPE_InstallDir#bbs/"><SPAN>社区</SPAN></A> </LI> </UL></DIV>