在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文实例讲述了css实现兼容火狐、IE的LI奇偶行颜色交替方法。分享给大家供大家参考。具体如下: 这是一款兼容火狐、IE的LI颜色交替的方法,实则是平铺的背景,不过相对使用JS,平铺背景也不失为一种好方法,因为处理一个GIF图像也不是什么难办的事,最其码比使用JS的要兼容性好许多,你可以在不同的浏览器下试一下。 运行效果截图如下: 在线演示地址如下: http://demo.ogeek.net/js/2015/css-firefox-ie-line-color-demo/ 具体代码如下: 复制代码 代码如下:<!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=gb2312" /> <title>CSS实现奇偶数行颜色交替方法</title> <style type="text/css"> <-- * { margin:0; padding:0; } body { background:#FFF; font:12px Geneva, Arial, Helvetica, sans-serif #000; line-height:1; text-align:center; } a:link, a:visited { text-decoration:none; color:#000; } a:hover { text-decoration:underline; color:#39c; } img { border:0; } select { border:0; } ul, li { list-style:none; } h1 { font-size:14px; font-weight:bold; color:#444; } .list { width:320px; margin:0 auto; } .list ul { background:url(images/row_bg.gif); } .list li { height:25px; line-height:25px; text-align:left; padding-left:10px; } --> </style> </head> <body> <div class="list"> <ul> <li>奇数行.......</li> <li>偶数行.......</li> <li>奇数行.......</li> <li>偶数行.......</li> <li>奇数行.......</li> </ul> </div> </body> </html> 希望本文所述对大家的css网页设计有所帮助。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论