,改变LI背景颜色与背景图片
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].οnmοuseοver=function()
{
this.style.backgroundColor="#CCCCCC";
}
a[i].οnmοuseοut=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" οnmοusemοve="this.style.backgroundImage='url(images/bg.jpg)'" οnmοuseοut="this.style.backgroundImage=''"><a href="index.asp" class="top">首 页</a></td>
<td width="116" height="56" align="center" οnmοusemοve="this.style.backgroundImage='url(images/bg.jpg)'" οnmοuseοut="this.style.backgroundImage=''"><a href="main.asp" class="top">公司简介</a></td>
<td width="116" height="56" align="center" οnmοusemοve="this.style.backgroundImage='url(images/bg.jpg)'" οnmοuseοut="this.style.backgroundImage=''"><a href="product.asp" class="top">产品展示</a></td>
<td width="116" height="56" align="center" οnmοusemοve="this.style.backgroundImage='url(images/bg.jpg)'" οnmοuseοut="this.style.backgroundImage=''"><a href="gc.asp" class="top">企业设备</a></td>
<td width="116" height="56" align="center" οnmοusemοve="this.style.backgroundImage='url(images/bg.jpg)'" οnmοuseοut="this.style.backgroundImage=''"><a href="order.asp" class="top">客户反馈</a></td>
<td width="116" height="56" align="center" οnmοusemοve="this.style.backgroundImage='url(images/bg.jpg)'" οnmοuseοut="this.style.backgroundImage=''"><a href="contactus.asp" class="top">联系我们</a></td>
<td width="116" height="56" align="center" οnmοusemοve="this.style.backgroundImage='url(images/bg.jpg)'" οnmοuseοut="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;" οnmοuseenter="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;" οnmοuseenter="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;" οnmοuseenter="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;" οnmοuseenter="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;" οnmοuseenter="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;" οnmοuseenter="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;" οnmοuseenter="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;" οnmοuseenter="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;" οnmοuseenter="displayhead('9')"><a href="View.aspx?type=8"><span class="t1">联系我们</span></a></td>
</tr>
</table>
3,flash实现
/Files/net2/menu.swf
转载于:https://www.cnblogs.com/net2/archive/2010/09/20/1831724.html
,改变LI背景颜色与背景图片相关推荐
- html表格背景图片格式,css背景颜色、背景图片,以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...
- Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- CSS的背景(背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定(图片附着),背景复合写法)
CSS的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...
- Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
- CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)
文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结 案例:五彩导航 通过CSS背景属性,可以给页面元素 ...
- android textview 背景图片,Android—TextView 背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
- android textview获取背景颜色,Android TextView背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
- css的背景颜色有哪些,css背景颜色、背景图片,以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...
- C# 如何给Word文档设置背景颜色和背景图片
C# 如何给Word文档设置背景颜色和背景图片 Word文档在创建时,背景颜色都是白色的,这样的背景色比较单一,看久了以后也非常容易视觉疲劳,给文档设置一个合适的背景颜色或者添加好看的背景图片,不仅可 ...
- Java 给PDF文档设置背景颜色和背景图片
如题,这篇文章主要介绍如何在Java应用程序中给PDF文档设置背景颜色和背景图片. 使用组件: Spire.PDF for Java 下载Spire.PDF for JAVA包并解压缩,然后从lib文 ...
最新文章
- android圆形旋转菜单,而对于移动转换功能支持
- 原创,自己做的一个简单实用的提示小插件,兼容性很好,基本上都兼容!
- Java反射是什么?看这篇绝对会了!
- Python双版本下No module named 'requests'
- ant react 上传_react之ant design mobile如何只能上传一张图片
- String,StringBuffer,StringBuillder的一些底层实现
- collections 中的namedtuple
- (项目)在线教育平台(六)
- docker下mongodb备份导入数据库
- 文件下载及web文件的contentType类型大全
- .NET中常见的内存泄露问题——GC、委托事件和弱引用
- hsqldb mysql_HSQLDB简介
- iPhone X改11Pro在线/免越狱QQ空间任意iPhone机型虚拟定位
- 操作系统软件测试,什么是操作系统_app软件测试全栈系列精品课程_功能测试视频-51CTO学堂...
- 我是如何面试iOS开发者的?
- 一个题目引发的数组和指针复习
- 射击末世--建造者模式
- google GMS测试环境搭建详细教程
- matlab能做什么设计,Matlab GUI是什么(设计实例)
- fastjson的漏洞解决—2020年5月28日
热门文章
- 五、逆向工程--myeclipse快速开发Hibernate项目
- Python单元测试--使用装饰器实现测试跳过和预期故障
- [bzoj2506] calc
- sqlite--代码操作
- 关于Could not parse configuration: /hibernate.cfg.xml的问题
- 返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API
- How to protect video content (Flash Media Server)
- 学习动态性能表 第二篇--v$sesstat
- mac平台反编译apk,获取源码,androidmanifest和资源文件
- 3D图形学的线性代数的通俗解释。