不过div:hover在ie6下不可以用，需要用个伪类
写法：
css:
.nav {width:500pxheight:30pxfloat:left}
.nav div{background:url(第一张图片) no-repeatwidth:100pxheight:30px}
.nav div:hover{background:url(第二张图片) no-repeatwidth:100pxheight:30px}
导航代码
<div class="nav">
<div>栏目1</div>
<div>栏目2</div>
<div>栏目3</div>
</div>
以上在 ie7+都可用 ie6下可调用以下js
/*解决ie6.0 的hover兼容问题*/
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return
window.attachEvent('onunload', unhookHoverEvents)
var sheets = doc.styleSheets, l = sheets.length
for(var i=0i<li++)
parseStylesheet(sheets[i])
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length
for(var i=0i<li++) parseStylesheet(sheet.imports[i])
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length
for(var j=0j<lj++) parseCSSRule(rules[j])
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText
if(!csshoverReg.test(select) || !style) return
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1')
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo)
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1]
var affected = select.replace(/:(hover|active).*$/, '')
var elements = getElementsBySelect(affected)
if(elements.length == 0) return
currentSheet.addRule(newSelect, style)
for(var i=0i<elements.lengthi++)
new HoverElement(elements[i], className, activators[pseudo])
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {}
if(node.hovers[className]) return
node.hovers[className] = true
hookHoverEvent(node, events.on, function() { node.className += ' ' + className})
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),'')})
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler)
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
}
}
function unhookHoverEvents() {
for(var e,i=0i<hoverEvents.lengthi++) {
e = hoverEvents[i]
e.node.detachEvent(e.type, e.handler)
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc]
parts = rule.split(' ')
for(var i=0i<parts.lengthi++) {
nodes = getSelectedNodes(parts[i], nodes)
}return nodes
}
function getSelectedNodes(select, elements) {
var result, node, nodes = []
var identify = (/\#([a-z0-9_-]+)/i).exec(select)
if(identify) {
var element = doc.getElementById(identify[1])
return element? [element]:nodes
}
var classname = (/\.([a-z0-9_-]+)/i).exec(select)
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '')
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false
for(var i=0i<elements.lengthi++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all
for(var j=0j<result.lengthj++) {
node = result[j]
if(classReg &&!classReg.test(node.className)) continue
nodes[nodes.length] = node
}
}
return nodes
}
</script>
以上js代码保存在一个 htc文件中
之后在css文件中加上
body
{
behavior: url(../css/hover.htc)/*可在IE6,7中对非<a>元素使用hover等伪类*/
}
不支持绝对路径，只支持相对路径。
如还没能解决 可以hi我 。 这个绝对有效用
CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。
首先先将放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：
.showImage{
background-image: url(9pic2.jpg)
width: 100px
height: 100px
}
然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。
扩展资料
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。
CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。
<style>ul.list1 {list-style-type:circle} /* 圆形符号 */
ul.list2 {list-style-type:square} /* 实心方块 */
</style>
<body>
<ul class="list1">
<li>list1</li>
</ul>
<ul class="list2">
<li>list1</li>
</ul>
</body>
