Webpage DesignWe often useCSS (stacked style sheet)ImplementationLine-by-line color changeAccording to your needs, you can use any of the following methods. Of course, pay attention to the specific encoding and requirements that suit you.
1. Use the background image
If the row height is fixed, we recommend that you use the background image with different colors. We also recommend that you fix the Row Height to ensure compatibility with all browsers.
Ii. CSS Expression
Text: color: expression (this. sourceIndex % 2? '# Ff000000':' #000000 ');
Background: background-color: expression (this. sourceIndex % 2? '# Ff000000':' #000000 ');
Note: The browser compatibility of this method is insufficient, and FF3 is not supported.
Iii. Define classes separately
<Ul>
<Li class = "bgcolor">...
<Li>...
<Li class = "bgcolor">...
<Li>...
</Ul>
Actually writing.
4. Use JS
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> www.bkjia.com-four methods to Implement CSS line-by-line color change </title> <link href =" index.css "rel =" stylesheet "type =" text/ css "/>
Run code Copy code Save code Add to favorites
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
