How to make li list layout interlaced with different background colors by css
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.
