Learn a little every day (2) -- cursor, the zoom property

1. cursor Property to display the cursor type (shape).

An example:

<html>

<body>

<p>Please move your mouse over the words, can see the mouse pointer changes: </p>

<span style="cursor:auto">

Auto</span><br />\\The default. Browser cursor.

<span style="cursor:crosshair">

Crosshair</span><br />\\The cursor appears as a cross line.

<span style="cursor:default">

Default</span><br />\\The default cursor (usually an arrow)

<span style="cursor:pointer">

Pointer</span><br />\\The cursor is to indicate the link pointer (hand)

<span style="cursor:move">

Move</span><br />\\The cursor indicates that an object can be moved

<span style="cursor:e-resize">

e-resize</span><br />\\The cursor indicates the rectangular frame edge can be to the right (East) mobile.

<span style="cursor:ne-resize">

ne-resize</span><br />\\The cursor indicates the rectangular frame edge can be up and moving to the right (North / East).

<span style="cursor:nw-resize">

nw-resize</span><br />\\The cursor indicates the rectangular frame edge can be up and move to the left (North / West).

<span style="cursor:n-resize">

n-resize</span><br />\\The cursor indicates the rectangular frame edge can be upwardly mobile (North).

<span style="cursor:se-resize">

se-resize</span><br />\\The cursor indicates the rectangular frame edge can be downward and rightward movement (South / East).

<span style="cursor:sw-resize">

sw-resize</span><br />\\The cursor indicates the rectangular frame edge may be down and move to the left (South / West).

<span style="cursor:s-resize">

s-resize</span><br />\\The cursor indicates the rectangular frame edge may be moving down (North / West).

<span style="cursor:w-resize">

w-resize</span><br />\\The cursor indicates the rectangular frame edge can be moved to the left (West).

<span style="cursor:text">

text</span><br />\\The cursor indicates text.

<span style="cursor:wait">

wait</span><br />\\The cursor indicates that the program is busy (usually a table or hourglass).

<span style="cursor:help">

help</span>\\The cursor indicates the help available (usually a question mark or a balloon).

</body>

</html>

2. The zoom property

The role of zoom:1

Compatible with IE6, IE7, IE8 browser, often encounter some problems, can use zoom:1 to solve, has the following functions:

Trigger the IE browser hasLayout

Floating around ie, some problems of margin overlap.

For example, the station uses the DIV to do a row and the two column display, HTML code:

<div class="h_mainbox">

<h2>Recommended articles</h2>

<ul class="mainlist">

<li><a href="#" style="color:#0000FF" target="_blank">The CSS library.</a></li>

<li><a href="#" style="color:#0000FF" target="_blank">Originality</a></li>

</ul>

</div>

CSS code:

.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}

.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}

.h_mainbox h2 span { float:right; font-weight:normal;}

.h_mainbox ul { padding:6px 0px; background:#fff;}

.mainlist { overflow:auto; zoom:1;}

.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}

Add the red where it can be in the IE6, IE7, IE8 normal display effect.



Posted by Aubrey at November 19, 2013 - 10:21 PM