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

 

 posted on 2010-09-20 14:23  ddxgc  阅读(4322)  评论(0编辑  收藏  举报