CSS interlaced color-changing tutorial

We know that in the HTML, Ul,li list before the need to use the color difference layout effect, then ul Li how to use CSS to make interlaced color? Today we will give you an example to demonstrate.

In order not to affect the program to make calls, make the program simple, using the UL Li List layout to achieve the above interval background color layout, while the mouse over hover Li above the background color change color, there are usually two ways.

The first kind: background picture, cut a narrow vertical bar background picture material, the background image as a UL background, let background picture as UL background after the next tile, you can easily achieve the interval effect.

The second: the use of JQ special effect, through the JS effect to achieve such a gap background color and the mouse through the background color change effect, special effects code and need to inductive JS files and code.

Next, the two methods are introduced by graphic + online demo examples.

Background image material Implementation Li list background interval color

This DIV+CSS case comparison recommendation method, simple and convenient, save code, while you can achieve the mouse to move over the background of Li color effect.

Here's how it works:

Cut out 1 pixels wide, height just two colors of li height for the picture material

HTML corresponding source code

<ul class= "Licss" > <li><a href= "http://www.php.cn/" > Welcome you to visit </a></li> <li><a href= "http://www.php.cn/" > Welcome you to visit </a></li> <li><a href= "http://www.php.cn/" > Welcome to visit </a ></li> <li><a href= "http://www.php.cn/" > Welcome you to visit </a></li> <li><a href= "http ://www.php.cn/"> Welcome you to visit </a></li> </ul>

Above is the UL Li layout content, key look behind CSS code writing and explanation.

4. Corresponding CSS code

ul.licss{margin:0 Auto; Background:url (ul-bg.gif); width:400px; Text-align:left}

/* Background only attractive picture without setting other parameters you can tile the object in full screen */

Ul.licss li{width:100%; text-indent:10px; height:34px; line-height:34px}

/* Height needs to be calculated, and the layout picture must be related to * *

Ul.licss li:hover{background: #EBEBEB}

/* In order to have a dynamic background color change, the Li set hover pseudo-class */

Here a single class is set for UL. Explanation: In the actual layout will be used in the UL Li Layout, in order to facilitate the difference between the use of UL in other places, so the instance named class.

CSS extension: If you want to implement the mouse to change color on the Li, you can set the CSS ul.licss li:hover{set the background color}.

Flexible use: According to the example, you can extend the UL Li layout technique to the layout of a non-Li layout to implement the list class layout background interval color.

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

How HTML 2d and 3d transforms

HTML5 Video Audio Implementation steps

JS gets the common way to get styles