用DW怎样制作网页导航条？鼠标经过的时候和鼠标离开两种背景效果，和两种字体颜色

初学者，求帮助！！！

推荐答案 æ¨èäº2016-04-02

å¯ä»¥ç´æ¥å¨DWçä»£ç åºåè¾å¥ç¸åºä»£ç å³å¯è§£å³ï¼
èæ¯å¾çhover å¾ç®åç
#globalNavi {
width: 908px;
margin: 0 auto 18px;
height: 42px;
overflow: hidden;
}
#globalNavi li {
float: left;
}
#globalNavi li a {
display: block;
}
#globalNavi li.gnavi01 a {
width: 97px;
background: url(../img/template/globalnavi01_out.jpg) no-repeat;
}
#globalNavi li.gnavi02 a {
width: 158px;
background: url(../img/template/globalnavi02_out.jpg) no-repeat;
}
#globalNavi li.gnavi03 a {
width: 118px;
background: url(../img/template/globalnavi03_out.jpg) no-repeat;
}
#globalNavi li.gnavi04 a {
width: 118px;
background: url(../img/template/globalnavi04_out.jpg) no-repeat;
}
#globalNavi li.gnavi05 a {
width: 128px;
background: url(../img/template/globalnavi05_out.jpg) no-repeat;
}
#globalNavi li.gnavi06 a {
width: 128px;
background: url(../img/template/globalnavi06_out.jpg) no-repeat;
}
#globalNavi li a:hover {
background-color: #FFFFFF;
}
#globalNavi li a:hover img {
visibility: hidden;
}

ä¸é¢æ¯cssæ ·å¼ï¼ä¸é¢æ¯ä»£ç ï¼

<ul id="globalNavi">
<li class="gnavi01"><a href="/"><img src="common/img/template/globalnavi01_out.jpg" alt="Top Page" /></a></li>
<li class="gnavi02"><a href="/"><img src="common/img/template/globalnavi02_out.jpg"alt="30" /></a></li>
<li class="gnavi03"><a href="/"><img src="common/img/template/globalnavi03_out.jpg" alt="ç«£" /></a></li>
<li class="gnavi04"><a href="/"><img src="common/img/template/globalnavi04_out.jpg" alt="å" /></a></li>
<li class="gnavi05"><a href="/"><img src="common/img/template/globalnavi05_out.jpg" alt="ä½" /></a></li>
<li class="gnavi06"><a href="/"><img src="common/img/template/globalnavi06_out.jpg" alt="è®¡ /></a></li>
</ul>

å¦ææ¯ç©å½¢åºåï¼å¯ä»¥ç´æ¥ç¨CSS
æ¯å¦åHTMLæ ç¾ä¸º
<a href="#">åå®¢</a>

ç¶åCSSé¨åå ä¸ä»£ç a {background:blue} ç¶å a:hover {background:red} è¿æ ·å¯ä»¥å®ç°èæ¯è²çè½¬æ¢ï¼å¦ææ³è¦åè²çåºåä¸æ¯ç©å½¢ï¼é£å°±å¾åå¤å¥½åå¾åæ¿æ´»å¾äºï¼ç¶åä¹ç¨ a:hover {background:url()}æ¥å®ç°äºï¼å¾ç®åã

ä¸é¢çæ¯ä¸ä¸ªèæ¯å¾ç
æ¯ç¨jsæ¹åæ ·å¼
<div style="" onmouseover=âaa(this);â onmouseout="aaa(this);"> é¼ æ æ¾ä¸æ¥è¯è¯</div>
<script>
function aa(obj)
{
obj.style.background="blue";//ä½ ä¹å¯ä»¥æåé¢çå¼æ¢æå¾ç
//obj.style.background="url(å¾çè·¯å¾)";
}
function aaa(obj)
{
obj.style.background="red";
}
</script>

ä¹å¯ä»¥å¤å¶ä¸é¢ä»£ç ä¿åæhtmlå³å¯ï¼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>æ æ é¢ææ¡£</title>
<style type="text/css">

</style>
</head>
<body>
<ul id="nav">
<li><a href="#">é¦ é¡µ</a></li>
<li><a href="#">æçç¸å</a></li>
<li><a href="#">ç§çå²å°</a></li>
<li><a href="#">ç¤¼åå®å¶</a></li>
<li><a href="#">ç²¾å½©ç»å»</a></li>
<li><a href="#">ä¸åç©ºé´</a></li>
</ul>
</body>
</html>
ä¸é¢çé£ä¸ªæ¯æ´æ¢å¾çç
è¦æ´æ¢èæ¯çè¯å¨åä½æå¨çååæ ¼åä¸ï¼onMouseOver="this.bgColor='æ³æ¹åçé¢è²'"
<td onMouseOver="this.bgColor='æ³æ¹åçé¢è²'" onMouseOut="this.bgColor=''åæ¥çé¢è²">å¯¼èªæå</td>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/U9D2psUnssip2pvsvpv.html

其他回答

第1个回答推荐于2016-06-25

<a href="" class="nava">导航1</a>
<a href="" class="nava">导航2</a>
<a href="" class="nava">导航3</a>
<a href="" class="nava">导航4</a>
<a href="" class="nava">导航5</a>
<a href="" class="nava">导航6</a>
<style>
.nava{color:#000000;display:block;float:left;padding:10px;background:#CCCCCC;}
.nava:hover{color:#FF0000;background:#BBBBBB;}
</style>

===================================
使用说明：
直接将以上代码复制到您的网页代码里的适当位置粘贴即可。
提示：以上代码中，<style>与</style>之间放置的是CSS代码，这些代码可以控制a标签的显示样式。

如需修改链接本来的文字颜色，请在CSS样式中.nava样式里找到color这个参数，修改其颜色代码即可。
如需修改链接变幻时的文字颜色，请在CSS样式中.nava:hover样式里修改color这个参数，方法同上。

如需修改链接本来的背景颜色，请在CSS样式表中.nava样式里找到background这个参数，修改其颜色值即可，如果需要显示背景图片，请把background:#CCCCCC;替换为background:url(这里是您的图片地址);即可。
如需修改链接变换时的背景颜色，请在CSS样式表中.nava:hover样式里找到background这个参数，修改其颜色值即可，如果需要显示背景图片，请把background:#BBBBBB;替换为background:url(这里是您的图片地址);即可。本回答被提问者采纳

相似回答

大家正在搜