，改变LI背景颜色与背景图片
2010-09-20 14:23
387 查看
1，背景颜色
<!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>
<link href="hansh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="hanshu">
<ul id="qqq">
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
</ul>
</div>
<script language="javascript">
var a=document.getElementById("qqq").getElementsByTagName("li");
for(var i=0;i<a.length-1;i++){
a[i].onmouseover=function()
{
this.style.backgroundColor="#CCCCCC";
}
a[i].onmouseout=function(){
this.style.backgroundColor="white";
}
}
</script>
</body>
</html>
2，背景图片
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="index.asp" class="top">首 页</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="main.asp" class="top">公司简介</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="product.asp" class="top">产品展示</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="gc.asp" class="top">企业设备</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="order.asp" class="top">客户反馈</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="contactus.asp" class="top">联系我们</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="admin/index.asp" target="_blank" class="top">后台管理</a></td>
<td width="106" height="56" align="center"><div align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px">
<script language="JavaScript" type="text/javascript">
<!-- Begin
var enable=0; today=new Date();
var day; var date;
var time_start = new Date();
var clock_start = time_start.getTime();
if(today.getDay()==0) day="星期日"
if(today.getDay()==1) day="星期一"
if(today.getDay()==2) day="星期二"
if(today.getDay()==3) day="星期三"
if(today.getDay()==4) day="星期四"
if(today.getDay()==5) day="星期五"
if(today.getDay()==6) day="星期六"
date=+(today.getYear())+"年"
+(today.getMonth()+1)+"月"
+today.getDate()+"日 ";
document.write("<span style='font-size: 9pt;color:#000000'>"+date);
document.write(day+"</font></span>");
// -->
</script>
</div></td>
</tr>
</table>
注：style="background-position:center; background-repeat:no-repeat;"可对其进行修饰
<script language="javascript">
function displayhead(id)
{
for(var i = 1;i < 10;i++ )
{
document.getElementById("head_td_" + i).style.background = "url(images/menu_dd.gif)";
document.getElementById("head_tab_" + i).style.display = "none";
}
document.getElementById("head_td_" + id).style.background = "url(images/menu_d.gif)";
document.getElementById("head_td_" + id).style.backgroundPosition = "center";
document.getElementById("head_td_" + id).style.backgroundRepeat = "no-repeat";
document.getElementById("head_tab_" + id).style.display = "block";
}
</script>
<table width="980" height="33" border="0" align="center" cellpadding="0" cellspacing="0" background="images/menu_bg.gif">
<tr>
<td id="head_td_1" width="108" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('1')"><a href="/"><span class="t1">首 页</span></a></td>
<td id="head_td_2" width="101" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('2')"><a href="View.aspx?type=1"><span class="t1">关于邦派</span></a></td>
<td id="head_td_3" width="105" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('3')"><a href="News.aspx?type=1"><span class="t1">新闻中心</span></a></td>
<td id="head_td_4" width="123" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('4')"><a href="Article.aspx?type=1"><span class="t1">资讯一站通</span></a></td>
<td id="head_td_5" width="103" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('5')"><a href="Product.aspx"><span class="t1">产品专区</span></a></td>
<td id="head_td_6" width="106" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('6')"><a href="Image.aspx?type=1"><span class="t1">形象专区</span></a></td>
<td id="head_td_7" width="105" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('7')"><a href="SalesNet.aspx"><span class="t1">销售网络</span></a></td>
<td id="head_td_8" width="120" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('8')"><a href="Dealer.aspx"><span class="t1">经销商专区</span></a></td>
<td id="head_td_9" width="109" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('9')"><a href="View.aspx?type=8"><span class="t1">联系我们</span></a></td>
</tr>
</table>
3,flash实现
/Files/net2/menu.swf
<!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>
<link href="hansh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="hanshu">
<ul id="qqq">
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
<li>这是内容这是内容这是内容这是内容这是内容这是内容</li>
</ul>
</div>
<script language="javascript">
var a=document.getElementById("qqq").getElementsByTagName("li");
for(var i=0;i<a.length-1;i++){
a[i].onmouseover=function()
{
this.style.backgroundColor="#CCCCCC";
}
a[i].onmouseout=function(){
this.style.backgroundColor="white";
}
}
</script>
</body>
</html>
2，背景图片
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="index.asp" class="top">首 页</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="main.asp" class="top">公司简介</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="product.asp" class="top">产品展示</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="gc.asp" class="top">企业设备</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="order.asp" class="top">客户反馈</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="contactus.asp" class="top">联系我们</a></td>
<td width="116" height="56" align="center" onmousemove="this.style.backgroundImage='url(images/bg.jpg)'" onmouseout="this.style.backgroundImage=''"><a href="admin/index.asp" target="_blank" class="top">后台管理</a></td>
<td width="106" height="56" align="center"><div align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px">
<script language="JavaScript" type="text/javascript">
<!-- Begin
var enable=0; today=new Date();
var day; var date;
var time_start = new Date();
var clock_start = time_start.getTime();
if(today.getDay()==0) day="星期日"
if(today.getDay()==1) day="星期一"
if(today.getDay()==2) day="星期二"
if(today.getDay()==3) day="星期三"
if(today.getDay()==4) day="星期四"
if(today.getDay()==5) day="星期五"
if(today.getDay()==6) day="星期六"
date=+(today.getYear())+"年"
+(today.getMonth()+1)+"月"
+today.getDate()+"日 ";
document.write("<span style='font-size: 9pt;color:#000000'>"+date);
document.write(day+"</font></span>");
// -->
</script>
</div></td>
</tr>
</table>
注：style="background-position:center; background-repeat:no-repeat;"可对其进行修饰
<script language="javascript">
function displayhead(id)
{
for(var i = 1;i < 10;i++ )
{
document.getElementById("head_td_" + i).style.background = "url(images/menu_dd.gif)";
document.getElementById("head_tab_" + i).style.display = "none";
}
document.getElementById("head_td_" + id).style.background = "url(images/menu_d.gif)";
document.getElementById("head_td_" + id).style.backgroundPosition = "center";
document.getElementById("head_td_" + id).style.backgroundRepeat = "no-repeat";
document.getElementById("head_tab_" + id).style.display = "block";
}
</script>
<table width="980" height="33" border="0" align="center" cellpadding="0" cellspacing="0" background="images/menu_bg.gif">
<tr>
<td id="head_td_1" width="108" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('1')"><a href="/"><span class="t1">首 页</span></a></td>
<td id="head_td_2" width="101" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('2')"><a href="View.aspx?type=1"><span class="t1">关于邦派</span></a></td>
<td id="head_td_3" width="105" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('3')"><a href="News.aspx?type=1"><span class="t1">新闻中心</span></a></td>
<td id="head_td_4" width="123" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('4')"><a href="Article.aspx?type=1"><span class="t1">资讯一站通</span></a></td>
<td id="head_td_5" width="103" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('5')"><a href="Product.aspx"><span class="t1">产品专区</span></a></td>
<td id="head_td_6" width="106" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('6')"><a href="Image.aspx?type=1"><span class="t1">形象专区</span></a></td>
<td id="head_td_7" width="105" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('7')"><a href="SalesNet.aspx"><span class="t1">销售网络</span></a></td>
<td id="head_td_8" width="120" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('8')"><a href="Dealer.aspx"><span class="t1">经销商专区</span></a></td>
<td id="head_td_9" width="109" class="t1" style="text-align:center; background-position:center; background-repeat:no-repeat;" onmouseenter="displayhead('9')"><a href="View.aspx?type=8"><span class="t1">联系我们</span></a></td>
</tr>
</table>
3,flash实现
/Files/net2/menu.swf
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iOS 点击cell改变背景颜色或者图片&&cell中其他部分取消高亮显示
- Android改变图片背景颜色tint(着色)或 backgroundTint
- VC对话框加载图片、改变背景颜色、画图、显示隐藏控件
- 快速设置UINavbar的属性包括背景 title的颜色字体以及改变返回键的图片
- Flex中如何通过backgroundImage, backgroundColor和backgroundAlpha样式，设置VBox的背景图片和背景颜色以及改变透明度
- tableView 背景改变 颜色 图片
- 动态改变 图片的背景颜色
- css3 实现png图片改变背景颜色
- VS2012使对话框透明和改变对话框背景颜色或图片背景
- 拖动滑块改变图片大小和背景颜色的代码例子
- vc对话框添加图片背景及改变背景颜色
- 按钮单击改变图片，布局单击改变背景颜色
- 点击li标记中的<a>标记改变li背景图片怎样实现
- 鼠标悬停在表格任意一个<td>上改变整行背景颜色并在第一个td显示象征性的某图片
- JSP彩色验证码，生成有4个随机数字和杂乱背景的图片，数字和背景颜色会改变，服务器端刷新
- css改变透明背景png图片的图标颜色
- 关于改变窗口背景颜色、图片的研究
- 对鼠标移到图片上及离开图片时，图片背景颜色改变的JS实现
- IOS UITabBar+UINavigation(改变背景/标题文字颜色、状态图片、tabbar选中方形背景、item间距)
- vc对话框添加图片背景及改变背景颜色