光标设置
{cursor:auto;}--光标根据需要自动变化。
{cursor:crosshair;}--光标变成“+”。
{cursor:pointer;}--光标变成手指模式。
{cursor:move;}--光标变成十字箭头，平时移动界面经常看到。
{cursor:e-resize;}--光标变成水平双向箭头，平时调整界面右边（东边）那条边经常看到。
{cursor:s-resize;}--光标变成垂直双向箭头，平时调整界面下边（南边）那条边经常看到。
{cursor:w-resize;}--光标变成水平双向箭头，平时调整界面左边（西边）那条边经常看到。
{cursor:n-resize;}--光标变成垂直双向箭头，平时调整界面上边（北边）那条边经常看到。
{cursor:ne-resize;}--(ne不能写成en,下同)光标变成东北双向箭头，平时调整界面东北角经常看到。
{cursor:nw-resize;}--光标变成西北双向箭头，平时调整界面西北角经常看到。
{cursor:se-resize;}--光标变成东南双向箭头，平时调整界面东南角经常看到。
{cursor:sw-resize;}--光标变成西南双向箭头，平时调整界面西南角经常看到。
{cursor:default;}--光标变成正常鼠标光标样子。
{cursor:text;}--光标和大写罗马数字1有点像。
{cursor:wait;}--光标变成等待模式。
{cursor:help;}--鼠标正常模式基础上加上一个问号。
浮动布局与clear
上面设置光标的代码，用浮动布局设置。
<!DOCTYPE html> <html> <head> <style type="text/css"> div{ border:2px solid red; width:100px; height:100px; text-align:center; line-height: 100px; } #auto{ float:left; cursor:auto; } #crosshair{ float:left; margin-left:10px; cursor:crosshair; } #pointer{ float:left; margin-left:10px; cursor:pointer; } #move{ float:left; cursor:move; clear:left; } #e-resize{ float:left; margin-left:10px; cursor:e-resize; } #s-resize{ float:left; margin-left:10px; cursor:s-resize; } #w-resize{ float:left; margin-left:10px; cursor:w-resize; } #n-resize{ float:left; margin-left:10px; cursor:n-resize; } #ne-resize{ float:left; margin-left:10px; cursor:ne-resize; } #nw-resize{ float:left; margin-left:10px; cursor:nw-resize; } #se-resize{ float:left; margin-left:10px; cursor:se-resize; } #sw-resize{ float:left; margin-left:10px; cursor:sw-resize; } #default{ float:left; cursor:default; clear:left; } #text{ float:left; margin-left:10px; cursor:text; } #wait{ float:left; margin-left:10px; cursor:wait; } #help{ float:left; margin-left:10px; cursor:help; } </style> </head> <body> <div id="auto">auto</div> <div id="crosshair">crosshair</div> <div id="pointer">pointer</div> <div id="move">move</div> <div id="e-resize">e-resize</div> <div id="s-resize">s-resize</div> <div id="w-resize">w-resize</div> <div id="n-resize">n-resize</div> <div id="ne-resize">ne-resize</div> <div id="nw-resize">nw-resize</div> <div id="se-resize">se-resize</div> <div id="sw-resize">sw-resize</div> <div id="default">default</div> <div id="text">text</div> <div id="wait">wait</div> <div id="help">help</div> </body> </html>
效果如下：
如上图，主要用到“float:left”来使每个div框浮动向左，再move那个div框加入“clear:left”使其左边没有浮动元素，所以move那个div框换到下一行，default那个div框也是同样的道理；但是如果在pointer那个div框加入“clear:right”而不是在move的div框加“clear:left”，move的div框是不会换到下一行的，可以说是没有效果的；同理，如果是浮动向右的布局，就需要用到“clear:right”来使元素的右边没有浮动元素。