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

In this article Xiaobian for you to introduce in detail "css how to achieve li list layout interlaced background color is different", the content is detailed, the steps are clear, the details are handled properly, I hope this "css how to achieve li list layout interlaced background color different" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Background picture material completes li list background isolation distance color

This DIV+CSS case compares the introduction door path, simplifies both sides, saves code, and briefly completes the background color change effect of moving the mouse over the li.

Dominate the door below:

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

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

2. Introduce CSS5 initialization template

Enter the download CSS5 initialization template

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

3. HTML corresponds to the source code

CSS5 Welcome you to meet CSS5 Welcome to visit Thinkcss Welcome to meet you

The above is the organizational form of ul li, see the following CSS code writing and text.

4. Corresponding CSS code

Ul.licss {margin:0 auto; background:url (ul-bg.gif); width:400px; text-align:left} / * background can be tiled in full screen without setting other equipment parameters * / ul.licss li {width:100%; text-indent:10px; height:34px Line-height:34px} / * is highly important and does not necessarily have anything to do with the layout image * / ul.licss li:hover {background:#EBEBEB} / * in order to change color for dynamic backup, set hover pseudo-class to li * /

Here set a class for ul. Comment: the ul li structure will be used in many places in the actual structure, so the instance here is named class separately in order to make it easier to use ul elsewhere.

CSS expansion: if you want to complete the mouse over the li color change, you need to configure CSS ul.licss li:hover {set equipment set color}.

Read here, the "css how to achieve li list layout interlaced background color different" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow 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.