网页设计制作CSS实现隔行换色两种方法

2007-12-21 20:59:44  来源:网页教学网 

网页设计制作,CSS实现隔行换色两种方法:

第一种方法:

以下为引用的内容：
<style type="text/css">
UL.myul1 LI{
}
</style>
<ul class="myul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li2">333</li>
<li id="li2">444</li>
<li id="li2">555</li>
<li id="li2">666</li>
</ul>

第二种方法:

以下为引用的内容：

<style type="text/css">
<!--
.li01 { background:#FFF; }
.li02 { background:#000; }
li a{width:100%;display:block;}
li a:hover{background:red;}
-->
</style>

<div id="list01"><ul>
<li class="title"><a href="#">title</a></li> 
<li><a href="#">111</a></li> 
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul></div>

<script Language="Javascript1.2">

objName=document.getElementById("list01").getElementsByTagName("li")

for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</script>

转载于:https://www.cnblogs.com/donght/p/5171566.html

网页设计制作CSS实现隔行换色两种方法相关推荐

  1. java css隔行变色_JS+CSS实现Li列表隔行换色效果的方法

    本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: CSS+Js实现Li列表隔行换色效果 .mytable {border-collapse:colla ...

  2. html怎么边调试边显示出来,网页设计中CSS布局调试的十个有效的方法

    网页设计中CSS布局调试的十个有效的方法 在网站设计中CSS布局是很重要的局部.下面小编给大家分享的是学习网页设计中CSS布局调试的十个有效的方法 ,在这里详细的介绍了学习网页设计中CSS布局调试的十 ...

  3. html如何将图片做成六边形,css画正六边形的两种方法

    说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...

  4. html中怎么写正六边形,如何用css画正六边形？用css画正六边形的两种方法（代码实例）...

    本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...

  5. Layui数据表格隔行变色的两种方法

    开发工具与关键技术:MVC 作者:Mr_恺 撰写时间:2019年7月17日 Layui数据表格隔行变色,第一种的就是layui插件里有一个自带的方法:   even这个属性把它设置为:true,就开启 ...

  6. 怎么把html数据导入excel,将网页表格数据导入到Excel中的两种方法

    将网页表格数据导入到Excel中的第一种方法: 第一步,将包括所需表格的网页打开,并按CTRL+C把网址复制到剪贴板,以备下一步使用. 第二步,打开运行Excel软件,单击菜单栏中的"数据→ ...

  7. Unity 制作小地图（Minimap）系统 两种方法

    Unity 制作小地图系统 两种方法 参考官方教程:Creating A Minimap System 方法1:Github:TanksPluggableAI 方法2:Github:GentleTan ...

  8. HTML/CSS实现毛玻璃特效的两种方法

    我想要设置类似于苹果和windows10的毛玻璃效果,比如这样: 其实就是一圈高斯模糊,我认为底层可以实现的方式有两种:高斯模糊和领域池化. 以下实现视觉上的毛玻璃效果有两种,后者为伪毛玻璃,而且在视 ...

  9. css切割图片是什么,两种方法实现css切割图片，只取图片中一部分

    参考地址:http://www.jb51.net/css/150036.html 场景:如果一个页面有个img小图标,那么访问浏览器的时候会因为加载图片导致浏览速度放慢.这个时候将这么多的小图标放在一 ...

  10. 怎么制作微信表情包？这两种方法，亲测好用

    分享两种微信表情包制作方法,一种是用微信自带的表情包制作工具,另一种是将视频转换成GIF表情包. 一.微信小程序自制 1.首先我们打开微信,点击底部的[发现],进入[小程序]界面,在上方的搜索框里输入 ...

最新文章

  1. lodash源码分析之获取数据类型
  2. 使用反射把用户控件(ASCX)传至网页(ASPX)
  3. centos7 docker
  4. 千锋教育python全集_千锋python+人工智能最新视频教程（大全集）
  5. python课程设计
  6. oracle2db2,从Oracle 到DB2（二）
  7. Entity Framework 实践系列 —— 搞好关系 - 单相思（单向一对一，one-to-one）
  8. [通信] ITU-T G.729 8kb/s CS—ACELP简介
  9. ASP.NET MVC 第四个预览版（第一部分）
  10. STM32简介（系统结构、引脚定义……）
  11. arduino烧录_arduino 烧录 attiny85
  12. 计算机操作系统 共享性,计算机操作系统的功能和分类探析
  13. 个人如何购买腾讯云服务器
  14. pwm调速流程图小车_循迹+pwm调速的小车源程序
  15. 2016搜狗校招编程题
  16. 如何将xlsx表格文件转换成txt文件？
  17. 回归生活：清理微信公众号
  18. html获取QQ头像接口,JS获得QQ号码的昵称,头像,生日的简单实例
  19. 360压缩修改压缩包语言
  20. Android 集成微信支付和支付宝支付工具类

热门文章

  1. OOAD-设计模式-外观模式
  2. gerrit权限控制
  3. C语言行列中大小判断,c语言判断两个矩阵是否相等（行列相同的矩阵）
  4. dpdk优化（转）？？？
  5. Camera persist使用手册之log使用技巧
  6. vmalloc与mmap
  7. rabbitmq使用_RabbitMQ 简介以及使用场景
  8. ImportError: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `CXXABI_1.3.9‘ not found
  9. linux开机启动服务,Linux开机启动服务
  10. java字段映射替换框架一对多_java之mybatis之字段映射及多对一