| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2670 人关注过本帖
标题:请教一个css+div做导航的问题
取消只看楼主 加入收藏
bajun
Rank: 1
来 自:哈弗大学牛津国际学院
等 级:新手上路
帖 子:178
专家分:0
注 册:2007-8-9
结帖率:100%
收藏
 问题点数:0 回复次数:5 
请教一个css+div做导航的问题

图片附件: 游客没有浏览图片的权限,请 登录注册

请教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>
搜索更多相关主题的帖子: div css 导航 
2008-11-12 17:09
bajun
Rank: 1
来 自:哈弗大学牛津国际学院
等 级:新手上路
帖 子:178
专家分:0
注 册:2007-8-9
收藏
得分:0 
[bo][un]kai[/un] 在 2008-11-12 17:22 的发言:[/bo]

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



非常感谢

享受湖北网 吃喝玩乐统统打折[url=http://www.]享受湖北[/url]
2008-11-13 08:47
bajun
Rank: 1
来 自:哈弗大学牛津国际学院
等 级:新手上路
帖 子:178
专家分:0
注 册:2007-8-9
收藏
得分:0 
[bo][un]kai[/un] 在 2008-11-13 14:34 的发言:[/bo]

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






thank you very mach !
i'will nover forget you!

享受湖北网 吃喝玩乐统统打折[url=http://www.]享受湖北[/url]
2008-11-13 14:42
bajun
Rank: 1
来 自:哈弗大学牛津国际学院
等 级:新手上路
帖 子:178
专家分:0
注 册:2007-8-9
收藏
得分:0 
[bo][un]sldtk1[/un] 在 2008-11-12 17:42 的发言:[/bo]

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



这个很难做到 我用的是一个头文件 不容易实现

享受湖北网 吃喝玩乐统统打折[url=http://www.]享受湖北[/url]
2008-11-13 15:24
bajun
Rank: 1
来 自:哈弗大学牛津国际学院
等 级:新手上路
帖 子:178
专家分:0
注 册:2007-8-9
收藏
得分:0 
请问这样的效果用js这么做呢  这种样式有名称吗?
不知道这种JS从何找起  有谁有相关的代码发出来啊 拜谢

享受湖北网 吃喝玩乐统统打折[url=http://www.]享受湖北[/url]
2008-11-13 15:27
bajun
Rank: 1
来 自:哈弗大学牛津国际学院
等 级:新手上路
帖 子:178
专家分:0
注 册:2007-8-9
收藏
得分:0 
谁帮我写一个这个 的JS啊  万分感谢

享受湖北网 吃喝玩乐统统打折[url=http://www.]享受湖北[/url]
2008-11-13 17:07
快速回复:请教一个css+div做导航的问题
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.015294 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved