CSS interlaced color changing tutorial

We know that in HTML, the color difference layout effect is required before the ul and li lists. So how to use css to change the color of ul li on alternate lines? Today I will give you an example to demonstrate.

In order not to affect the program calls and make the program simple, use the ul li list layout to achieve the above interval background color layout. At the same time, the mouse slides and hovers over the li to change the background color. There are usually two methods.

The first method: background picture, cut a narrow vertical strip of background picture material, use the background picture as the ul background, and let the background picture be used as the ul background and then tiled up, down, left, and right, you can easily achieve the spacing effect.

Second type: Use JQ special effects to achieve this. Use JS special effects to achieve the effect of spacing the background color and changing the background color when the mouse passes over it. There are many special effects codes and need to introduce JS files and codes.

Next, we will introduce these two methods through graphic and text + online demonstration examples.

Background image material realizes the background interval color of the li list

This DIV+CSS case is a recommended method, which is simple and convenient, saves code, and can also achieve the background color change effect when the mouse is moved above the li.

The operation method is as follows:

Cut out a li with a width of 1 pixel and a height of exactly two colors as the picture material

HTML corresponding source code

<ul class="licss"> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
</ul>

The above is the layout content of ul li. The key is to see the writing and explanation of the CSS code below.

4. Corresponding CSS code

ul.licss{ margin:0 auto; background:url(ul-bg.gif); width:400px; text-align:left}

/* The background only introduces the image and can be tiled in full screen within the object without setting other parameters*/

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

/* The height needs to be calculated and has a certain relationship with the layout image*/

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

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

Here is a separate pair ul sets a class. Explanation: In the actual layout, ul li layout will be used in many places. In order to distinguish the use of ul in other places, the class here is named separately.

CSS extension: If you want to change the color when the mouse moves over li, you can set CSS ul.licss li:hover{set background color}.

Flexible use: According to examples, you can extend the ul li layout skills to non-li layouts to implement the background interval color of the list type layout.

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to convert HTML 2d and 3d

HTML5 video Audio implementation steps

Js common ways to get styles

The above is the detailed content of CSS interlaced color changing tutorial. For more information, please follow other related articles on the PHP Chinese website!