<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#list{
float:left
width:200px
height:600px
}
#list ul{
float:left}
#list li{
float:left
width:200px
height:30px
display:block
overflow:hidden
}
#list li a{
line-height:30px
color:#666666
text-decoration:none
}
#list li.one a:hover {
background: #FFFF00
}
#list li.two a:hover{
background:#0000FF
}
#list li.three a:hover{
background:#00FF00}
#list li a:hover{
text-decoration:none
}
</style>
</head>
<body>
<div id="list">
<ul class="t">
<li class="one"><a href="#">[首页]追忆往事 展望未来</a></li>
<li class="two"><a href="#">[首页]追忆往事 展望未来</a></li>
<li class="three"><a href="#">[首页]追忆往事 展望未来</a></li>
<li><a href="#">[首页]追忆往事 展望未来</a></li>
<li><a href="#">[首页]追忆往事 展望未来</a></li>
<li><a href="#">[首页]追忆往事 展望未来</a></li>
</ul>
</div>
</body>
</html>
1、控制背景重复：如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始举例如下：
body
{
background-image: url(/i/eg_bg_03.gif)
background-repeat: repeat-y
}
2、控制背景位置
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif')
background-repeat:no-repeat
background-position:center
}
首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
