| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2680 人关注过本帖
标题:请教一个css+div做导航的问题
只看楼主 加入收藏
bajun
Rank: 1
来 自:哈弗大学牛津国际学院
等 级:新手上路
帖 子:178
专家分:0
注 册:2007-8-9
结帖率:100%
收藏
 问题点数:0 回复次数:10 
请教一个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
kai
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:52
帖 子:3450
专家分:59
注 册:2004-4-25
收藏
得分:0 
你把navi 的源文件发给我,我帮你改一下。
我的email: kaihua1@

自由,民主,平等,博爱,进步.
中华民国,我的祖国,中华民国万岁!中华民国加油!
本人自愿加入中国国民党,为人的自由性,独立性和平等性而奋斗!
2008-11-12 17:22
sldtk1
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:20
帖 子:624
专家分:258
注 册:2006-5-4
收藏
得分:0 
对每个html文件里面的li设置不同的背景样式就可以了
2008-11-12 17:42
恋轩念伊人
Rank: 5Rank: 5
来 自:湖南衡阳
等 级:贵宾
威 望:19
帖 子:643
专家分:0
注 册:2008-2-23
收藏
得分:0 
其实很简单,这个不是有个楼主刚刚写了个"CSS+JS实现滑动门效果"进入看看就明白了

我不是一个随便的人,我随便起来不是人我哦。信不?
2008-11-12 19:14
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
kai
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:52
帖 子:3450
专家分:59
注 册:2004-4-25
收藏
得分:0 
我帮你看过了,帮你把图片处理了一下,你原来的图片的左边和右边,我把它们合并到一起了,宽度现在是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 的数据。

自由,民主,平等,博爱,进步.
中华民国,我的祖国,中华民国万岁!中华民国加油!
本人自愿加入中国国民党,为人的自由性,独立性和平等性而奋斗!
2008-11-13 14:34
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.028720 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved