打印

各位前端高手来看一看用Li怎样实现这样效果，急！

magbox [楼主]

初级会员

帖子: 65
体力: 159
威望: 0
离线: 2 天

专长 网页设计,UI,产品设计

1^# 大中小发表于 2008-8-21 09:51

就是这种效果它是用两种不同颜色但这两种颜色要是循环的，我知道用表格很简单，但是CSS里面的LI这个不知道怎样去做了，我看了别的网站里面是用一张背景图片做，但是我想用纯粹的CSS去做那样更加完美，谢谢！

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

FFEEDD

褪色

高级会员

帖子: 385
体力: 675
威望: 0
当前: 上海徐汇

专长 网页设计,前端制作,ASP

2^# 大中小发表于 2008-8-21 09:54

<!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>CSS隔行换色的方法</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function bgChange(){
 if(!document.getElementsByTagName) return false;
 var tables = document.getElementsByTagName("table");
 for(var i=0; i<tables.length; i++){
 var odd = false;
 trs = tables[i].getElementsByTagName("tr");
 for(var j=0; j<trs.length; j++){
 if(odd==true){
 trs[j].style.background = "#ccc";
 odd = false;
 }else{
 odd = true;
 }
 }
 }
}
window.onload = bgChange;
</script>
</head>
<body >
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
 <tr>
 <td>测试文字</td>
 <td>测试文字</td>
 <td>测试文字</td>
 </tr>
</table>
<script type='text/javascript'>
//<![CDATA[
if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="Run in 184 ms, 9 Queries.";
//]]>
</script></body>
</html>

提示：您可以先修改部分代码再运行

淫得一手好湿,吹的一口好萧!

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

wolfxyx

徐魔风

中级会员

帖子: 714
体力: 317
威望: 0
当前: 上海黄浦

专长 前端制作,JS,AS

3^# 大中小发表于 2008-8-21 10:01

改自楼上

提示：您可以先修改部分代码再运行

世界是美好的，其实

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

hansir

時光

银牌会员

帖子: 2170
体力: 1609
威望: 3
当前: 北京西城区

专长 前端制作,JS,PHP

4^# 大中小发表于 2008-8-21 16:03

改自楼上

提示：您可以先修改部分代码再运行

博客：http://www.hansir.cn

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

hansir

時光

银牌会员

帖子: 2170
体力: 1609
威望: 3
当前: 北京西城区

专长 前端制作,JS,PHP

5^# 大中小发表于 2008-8-21 16:06

或者用图做背景也行(li里不能换行,否则就川帮了)
图儿上有足够宽的两个横条儿(单个横条儿高度和li一样)
然后放到ul里Y轴平铺...

博客：http://www.hansir.cn

TOP

hansir

時光

银牌会员

帖子: 2170
体力: 1609
威望: 3
当前: 北京西城区

专长 前端制作,JS,PHP

6^# 大中小发表于 2008-8-21 16:08

竖条儿也行,但要有足够的高度~ X轴平铺...

博客：http://www.hansir.cn

TOP

shaohua162001

荷西

高级会员

帖子: 1310
体力: 819
威望: 1
当前: 北京海淀区

专长 UI,前端制作

7^# 大中小发表于 2008-8-21 16:11

回复 4# hansir 的帖子

4楼的i+=2 太绝了

舍得是一种境界

TOP

FFEEDD

褪色

高级会员

帖子: 385
体力: 675
威望: 0
当前: 上海徐汇

专长 网页设计,前端制作,ASP

8^# 大中小发表于 2008-8-21 16:13

4#强~~~

淫得一手好湿,吹的一口好萧!

TOP

llk39

中级会员

帖子: 119
体力: 253
威望: 0
当前: 江苏苏州
离线: 1 天

9^# 大中小发表于 2008-8-21 16:40

4楼的朋友真是强悍

江蓝抽奖

TOP

zhangsn

中级会员

帖子: 119
体力: 227
威望: 0
离线: 1 天

10^# 大中小发表于 2008-8-21 17:33

不错的！

QQ派www.qqpai.cn

TOP

lzlf007

新手上路

帖子: 7
体力: 12
威望: 0
当前: 辽宁鞍山
离线: 1 天

11^# 大中小发表于 2008-8-21 20:33

TOP

xfcmamb

初级会员

帖子: 80
体力: 177
威望: 0
当前: 江西赣州
离线: 15 天

12^# 大中小发表于 2008-8-21 20:50

4楼的思路确实很强。。。

TOP

dcxj163

初级会员

帖子: 30
体力: 62
威望: 0
当前: 江苏南京
离线: 11 天

13^# 大中小发表于 2008-8-21 21:54

引用:

原帖由 llk39 于 2008-8-21 16:40 发表
4楼的朋友真是强悍

算法强悍！！

TOP

marvellous

金翅擘海

荣誉管理团队

帖子: 11836
体力: 26946
威望: 141
当前: 北京朝阳区

14^# 大中小发表于 2008-8-21 22:40

<!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>无标题文档</title>
</head><body>
<style>
.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;}
.mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}
.mytable ul li.t1 {background-color:#EFFEDD;}/* 第一行的背景色 */
.mytable ul li.t2{background-color:#ffffff;}/* 第二行的背景色 */
.mytable ul li.t3 {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new.gif) #D2FCA0 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}/* 鼠标经过时的背景色 */
</style>
<body style=margin:0;> 
<div align="center">
<div class=mytable id=tab>
<ul>
 <li>
老哥一席话道破玄机

</li>
<li><a href="#">
爱因斯坦的相对论说超越光速，极有可能穿梭于时间和空间之中！

</a></li>
<li><a href="#">
爱因斯坦还说，光速是宇宙中速度的极限！

</a></li>
<li><a href="#">
他们如何创造一个第三维，来适应一个三个维度的世界呢？

</a></li>
<li><a href="#">
人类生活在四维的时空中，其他维度中是否有类似生命的宇宙形态呢？

</a></li>
<li><a href="#">
从哲学上说时间是不可能倒流的

</a></li>
<li><a href="#">
请大家尊重和保护奥运知识产权。

</a></li>
<li><a href="#">
终于到了人人平等的时候啦。

</a></li>
<li><a href="#">
终于不用再为房子发愁了。

</a></li>
</ul></div><script type="text/javascript">

</script>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

loveday2007

初级会员

帖子: 40
体力: 55
威望: 0
当前: 北京朝阳区
离线: 2 天

专长 网页设计,平面,前端制作

15^# 大中小发表于 2008-8-22 15:30

4楼只用5行代码....

TOP

menhin

中级会员

帖子: 174
体力: 299
威望: 0

16^# 大中小发表于 2008-8-22 15:45

#4 强!

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 740
体力: 629
威望: 0
当前: 北京海淀区

专长 前端制作

17^# 大中小发表于 2008-8-22 15:48

如果是固定列数的话
我宁愿
<li class="one"></li>
<li class="two"></li>

这就是签名吗

TOP

suntear

中级会员

帖子: 178
体力: 205
威望: 0
当前: 河南郑州
离线: 1 天

专长 网页设计,前端制作,UE

18^# 大中小发表于 2008-9-27 09:48

如果在js和背景图片上做个选择的话我宁愿用背景图片

suntear

TOP

sfai

新手上路

帖子: 17
体力: 32
威望: 0
当前: 北京海淀区
离线: 69 天

19^# 大中小发表于 2008-9-27 11:33

提示：您可以先修改部分代码再运行

改自4楼.一看就知道有风险..

TOP

sfai

新手上路

帖子: 17
体力: 32
威望: 0
当前: 北京海淀区
离线: 69 天

20^# 大中小发表于 2008-9-27 11:35

还有楼主,想有纯CSS完成你的需求职能用背景图片来完成.鉴定完毕

TOP

gllcqq

新手上路

帖子: 4
体力: 0
威望: 0
当前: 广东广州

21^# 大中小发表于 2008-10-17 10:55

为什么不用
<dl>
<dt></dt>
<dd></dd>
</dl>
做呢？

TOP

yy8597

初级会员

帖子: 26
体力: 55
威望: 0
离线: 26 天

22^# 大中小发表于 2008-10-17 11:08

像版主一样用2个class不就好了，不用JS

TOP

qqhu

创想设计

中级会员

帖子: 366
体力: 478
威望: 0
当前: 北京海淀区
离线: 39 天

专长 网页设计,策划

23^# 大中小发表于 2008-10-17 11:37

呵呵，用两个Class方便

笨鸟先飞素材网

TOP