Shulou(Shulou.com)06/02 Report--

Today, the editor will share with you the relevant knowledge of what the css interlaced color change method is, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Ul li layout li background interlaced color change, interlaced color change different color effect screenshot

In order not to affect the call of the program, to make the program simple, use the ul li list layout to achieve the above interval background color layout, while mouse over the li above the background color change, there are usually two ways.

The first kind: background picture, cut a narrow vertical bar background picture material, take the background picture as the ul background, let the background picture as the ul background after tiling up and down, you can easily achieve the interval effect.

Second: the use of JQ special effects, through JS special effects to achieve such interval background color while the mouse over the background color change effect, the special effects code and need to attract JS files and codes.

Next, DIVCSS5 introduces these two methods through picture and text + online demonstration examples.

1. Background picture material to realize the background spaced color of li list

This DIV+CSS case is a recommended method, which is simple and convenient, saves code, and can achieve the effect of changing color over the background by moving the mouse over the li.

The method of operation is as follows:

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

Cut out a screenshot of the picture material

Click me to save as picture material (right mouse button click Save as)

2. Introduce DIVCSS5 initialization template

Enter the download initialization template

And copy the picture material into the initialization template images folder.

3. HTML corresponds to the source code

DIVCSS5 Welcome to visit

The above is the ul li layout content, the key to see the following CSS code writing and interpretation.

4. Corresponding CSS code

Ul.licss {margin:0 auto; background:url (ul-bg.gif); width:400px; text-align:left} / * background only leads to full-screen tiling within an object without setting other parameters * / ul.licss li {width:100%; text-indent:10px; height:34px The height of line-height:34px} / * needs to be calculated and has something to do with the layout image * / ul.licss li:hover {background:#EBEBEB} / * in order to change the color of the dynamic background, set the hover pseudo class to li * /

Here you set a single class for ul. Explanation: the ul li layout is used in many places in the actual layout, so name the instance class separately in order to make it easier to distinguish the use of ul elsewhere.

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

5. Screenshot of effect

Screenshot of li list layout interlaced with different background colors

6. Background pictures to achieve li interval color change online demonstration: view the case

7. Background implementation of li interval color packaging and download:

Download now (2.345KB)

8, flexible use: according to DIVCSS5 instances, you can extend ul li layout skills to non-li layouts to achieve list class layout background interval colors.

Second, use jq+CSS+DIV layout to realize li layout interval color change.

Jq+CSS+DIV layout to achieve li layout interval color change at the same time when the mouse over the li background color change, features JS implementation, does not need picture material.

In fact, in table interlaced discoloration, an CSS example article has actually done this layout, only to set different interval colors for table tr td and to achieve the effect of changing color over the td background with the mouse.

These are all the contents of this article entitled "what is the method of changing css interlaced colors?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.