float://浮动
width: //宽度
_height//高度:
min-height: //最小高度，会根据内容自动增长
font-size: 18px//字体大小
font-family: "微软雅黑"//字体
top: 20px据顶部20px
padding-left: 35px//外边距左35px
color: #b60303//颜色值
letter-spacing: 3px//每个字母相隔距离
padding//外边距
line-height: 20px行高
margin: 0px auto
padding: 0px
text-decoration: none//无下划线
text-decoration: underline有下划线
text-align: center居中
padding-top: 9px外边距顶部9px
cursor: pointer//把你的光标放到相应文字上查看效果
要注意光标的实际效果依赖于用户的系统设置，与你在这里看到的效果并不一定一致。
cursor: crosshair
十字准心
The cursor render as a crosshair
游标表现为十字准线
cursor: pointer
cursor: hand
写两个是为了照顾IE5，它只认hand。
手
The cursor render as a pointer (a hand) that indicates a link
游标以暗示(手指)的形式来表明有一个连接
cursor: wait
等待/沙漏
The cursor indicates that the program is busy (often a watch or an hourglass)
游标暗示当前程序正忙(一般为一块表或是一个沙漏)
cursor: help
帮助
The cursor indicates that help is available (often a question mark or a balloon)
游标暗示当前位置可得到帮助(一般为问号或是气球)
cursor: no-drop
无法释放
cursor: no-drop
cursor: text
文字/编辑
The cursor indicates text
游标暗示当前所处位置为文字内容
cursor: move
可移动对象
The cursor indicates something that should be moved
游标暗示一些东西应该被移动
cursor: n-resize
向上改变大小(North)
The cursor indicates that an edge of a box is to be moved up (north)
边缘可向上移动(北)
cursor: s-resize
向下改变大小(South)
The cursor indicates that an edge of a box is to be moved down (south)
边缘可向下方移动(南)
cursor: e-resize
向右改变大小(East)
The cursor indicates that an edge of a box is to be moved right (east)
box边缘可向右(东)边移动
cursor: w-resize
向左改变大小(West)
The cursor indicates that an edge of a box is to be moved left (west)
边缘可向左移动(西)
cursor: ne-resize
向上右改变大小(North East)
The cursor indicates that an edge of a box is to be moved up and right (north/east)
游标暗示box的边缘可向右上方移动(东北方向)
cursor: nw-resize
向上左改变大小(North West)
The cursor indicates that an edge of a box is to be moved up and left (north/west)
边缘可向左上方移动(西北)
cursor: se-resize
向下右改变大小(South East)
The cursor indicates that an edge of a box is to be moved down and right (south/east)
边缘可向右下方移动(东南)
cursor: sw-resize
向下左改变大小(South West)
The cursor indicates that an edge of a box is to be moved down and left (south/west)
边缘可向左下方移动(西南)
cursor: auto
自动
The browser sets a cursor
浏览器设置一个游标
cursor:not-allowed
禁止
cursor:not-allowed
cursor: progress
处理中
cursor: progress
cursor: default
系统默认
The default cursor (often an arrow)
默认的游标状态（通常为一个箭头）
cursor: url(' # ')
# = 光标文件地址 (注意文件格式必须为：.cur 或 .ani)。
用户自定义（可用动画）
The url of a custom cursor to be used.
自定义游标的url位置
Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
注意：在定义完自定义的游标之后在末尾加上一般性的游标，以防那些url所定义的游标不能使用
1、将对应的大图小图存放在同一个li标签中（鼠标悬浮到小图时，方便定位到大图）。
2、内部样式中利用"display:none"隐藏大图所在div。
3、鼠标悬浮到相应区域时，修改同li标签下大图所在div的display属性("display:block")。
小结：1、最上层的div必须定位，否则无法约束子元素。
2、li标签设置浮动时，图片会重叠，无法排成一列。浮动必须落实到图片。
3、小照片放在span标签中，变成了内联元素。需为其添加"display: block"转换为块级元素，才能设置图片外边距.
以下是代码：
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px
padding: 0px }
/*相框背景*/
#all{
width: 800px
height: 800px
background: greenyellow
position: relative
/*父元素必须定位，否则无法约束子元素*/
}
/*相册大图*/
#all ul li .big img{
width: 500px
height: 400px
}
#all ul li .big{
position: absolute
left: 70px
top: 130px
display: none/*内部样式中隐藏大图所在div*/
}
/*小图设置*/
#all ul li .smallhover img{
width: 70px
height: 50px
position: absolute
right: 100px
float: left/*设置浮动，可使图片排成一列*/
}
#all ul li .smallhover{
/*因为小照片放在span标签中，变成内联元素。设置display: block将其转换为块级元素，才能设置图片外边距*/
display: block
margin-top: 40px
overflow: hidden
}
/*实现效果，鼠标悬浮在小图片时，相应的大图片显示*/
#all ul li:hover .big{
display: block
}
</style>
</head>
<body>
<div id="all">
<ul>
<li>
<!--小图-->
<span class="smallhover"><img src="img/lotus1.jpg" /></span>
<!--大图-->
<div class="big" style="display: block" >
<!--设置初始图片-->
<img src="img/lotus1.jpg" />
</div>
</li>
<li>
<span class="smallhover"><img src="img/lotus2.jpg" /></span>
<div class="big"><img src="img/lotus2.jpg" /></div>
</li>
<li>
<span class="smallhover"><img src="img/lotus3.jpg" /></span>
<div class="big"><img src="img/lotus3.jpg" /></div>
</li>
</ul>
</div>
</body>
</html>
