注册 登录
编程论坛 → WEB前端(UI)

请教一个css+div做导航的问题

bajun 发布于 2008-11-12 17:09， 2687 次点击
[qq]272008123[/qq]
只有本站会员才能查看附件，请 登录

请教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>
10 回复
#2
kai2008-11-12 17:22
你把navi 的源文件发给我，我帮你改一下。
我的email: kaihua1@
#3
sldtk12008-11-12 17:42
对每个html文件里面的li设置不同的背景样式就可以了
#4
恋轩念伊人2008-11-12 19:14
其实很简单,这个不是有个楼主刚刚写了个"CSS+JS实现滑动门效果"进入看看就明白了
#5
bajun2008-11-13 08:47
[bo][un]kai[/un] 在 2008-11-12 17:22 的发言：[/bo]

你把navi 的源文件发给我，我帮你改一下。
我的email: kaihua1@



非常感谢
#6
kai2008-11-13 14:34
我帮你看过了，帮你把图片处理了一下，你原来的图片的左边和右边，我把它们合并到一起了，宽度现在是86px, 这个太宽了点，你自己再处理一下，把图片在宽度里面再缩小一些。在图片的垂直方面我也做了处理，把原来的图一切为二，这样橘黄色单独作为一张图，浅色单独作为一张图。

这两张图我会发给你。

在代码方面，我认为你这种当前不当前是没有必要的。如果你一定要实现那要用javascript  了.

现在就是指定了a 的背景图, a hover 的背景图 以及 a active 的背景图.

html code for navi
程序代码：

<div id=top_nav>
  <ul id=head_menu>
    <li class="head_menu_item" id="home"><a href="index.html" style="text-align:center;">首  页</a></li>
    <li class="head_menu_item" id="gastro"><a href="/tradeinfo/trade/39.html" target="_parent">餐  饮</a></li>
    <li class="head_menu_item" id="entertaiment"><a href="/tradeinfo/trade/40.html" target="_parent">娱  乐</a></li>
    <li class="head_menu_item" id="shopping"><a href="/tradeinfo/trade/41.html" target="_parent">购  物</a></li>
    <li class="head_menu_item" id="hotel"><a href="/tradeinfo/trade/42.html" target="_parent">酒  店</a></li>
    <li class="head_menu_item" id="travel"><a href="/tradeinfo/trade/43.html" target="_parent">旅  游</a></li>
    <li class="head_menu_item" id="service"><a href="/tradeinfo/trade/44.html" target="_parent">便  民</a></li>
    <li class="head_menu_item" id="education"><a href="/tradeinfo/trade/45.html" target="_parent">教  育</a></li>
    <li class="head_menu_item" id="auto"><a href="/tradeinfo/trade/47.html" target="_parent">汽  车</a></li>
    <li class="head_menu_item" id="immobil"><a href="/tradeinfo/trade/46.html" target="_parent">房  产</a></li>
    <li class="head_menu_item" id="onsale"><a href="/tradeinfo/trade/48.html" target="_parent">折  扣</a></li>
    <li class="head_menu_item" id="bbs"><a href="/bbs/">社  区</a></li>
  </ul>
</div>


css code
程序代码：

/*-- head menu begin --*/
#top_nav {
    DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: left; MARGIN: 0px; TEXT-ALIGN: center;
}
#head_menu {
    PADDING-LEFT: 0px; FLOAT: left; MARGIN: 0px; TEXT-ALIGN:center;
}

#top_nav LI {
    FONT-WEIGHT: bold; FONT-SIZE: 14px; FLOAT: left; text-align:center; width:86px; height:26px; margin-right:2px; LIST-STYLE-TYPE: none; line-height:30px;
}
#top_nav LI a{ background-image:url(images/leftbindright_light.png); background-repeat:no-repeat;
    width:86px; height:26px; text-decoration: none; text-align:center; display:block;
}

#top_nav LI A:hover {
    BACKGROUND: url(images/leftbindright_orange.png) no-repeat; color:#FFFFFF;
}
#top_nav LI A:active {
    BACKGROUND: url(images/leftbindright_orange.png) no-repeat; color:#FFFFFF;
}
/*-- head menu end --*/


在你对图片的宽度处理之后，你需要修改css 文件中的width 的数据。
#7
bajun2008-11-13 14:42
[bo][un]kai[/un] 在 2008-11-13 14:34 的发言：[/bo]

我帮你看过了，帮你把图片处理了一下，你原来的图片的左边和右边，我把它们合并到一起了，宽度现在是86px, 这个太宽了点，你自己再处理一下，把图片在宽度里面再缩小一些。在图片的垂直方面我也做了处理，把原来的图 ...






thank you very mach !
i'will nover forget you!
#8
bajun2008-11-13 15:24
[bo][un]sldtk1[/un] 在 2008-11-12 17:42 的发言：[/bo]

对每个html文件里面的li设置不同的背景样式就可以了



这个很难做到 我用的是一个头文件 不容易实现
#9
bajun2008-11-13 15:27
请问这样的效果用js这么做呢  这种样式有名称吗？
不知道这种JS从何找起  有谁有相关的代码发出来啊 拜谢
#10
bajun2008-11-13 17:07
谁帮我写一个这个 的JS啊  万分感谢
#11
wxm1984272009-09-25 10:06
以下是引用bajun在2008-11-12 17:09:14的发言：

272008123
 
请教CSS+DIV做导航 如何做当前页面对于的导航变色
css代码：
#head_menu {
 PADDING-LEFT: 0px; FLOAT: left; MARGIN: 0px; TEXT-ALIGN: left
}
#top_nav {
 DISPLAY: inline; PADDING-LEFT: 0px ...
我也想要一个这样的效果，用纯CSS实现的，请各位不吝赐教…………，感谢
1
©2025, BCCN.NET
电脑版