table元素的td和ul元素li隔行变色的功能实现

利用css控制二者的样式轻松实现隔行换色:

例如:table的css样式控制:

table tr td{

  background-color:颜色1

}

table tr td:nth-child(2n+1){

   background-color:颜色2

}


ul的li样式控制

ul li{

  background-color:颜色1;

}

ul li:nth-child(2n+1){

   background-color:颜色2;

}

关于table的td和ul元素li隔行变色的功能实现的更多相关文章

  1. 【丛林】HTML Table 表格浅谈(边框、隔行变色

    此例子已经包含本文大部分内容,请对照参考.查看代码 > 定义和用法 table标签定义 HTML 表格. 创建表格的四要素:table.tr.th.td <table> 整个表格以& ...

  2. JavaScript实现li隔行变色

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. html中测试div、ul和li、table排列多个块

    前面有三篇博文测试了这三种方式,一.相关博文:LODOP问答部分链接.该文用的是div定位,用的是所有小div相对于大div进行定位,大的div设置relative定位,小的设置absolute相对于 ...

  4. 如何使ul中li元素横向排列且不换行

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...

  5. div、ul、li等无法居中问题,text-align无效 margin auto无效

    很简单.如果是div,直接把div换成: <table align="center">        <tr>            <td> ...

  6. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  7. html中table,tr,td

    table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...

  8. ul、li模仿ios的TableView实现城市选择

    最近项目一个接着一个,之前说的精创环的项目还没做完,今天说先把那个放一下,先做访客系统,销售会见客户之后可以对客户进行一个跟踪记录,原型图也给了,今日头条的频道自定义页面一样. 如果是在IOS上让我来 ...

  9. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

随机推荐

  1. 81For全栈技术网

    你想了解前端吗? 你想了解后端吗? 你想了解设计吗? 81For全栈技术这里包含了互联网所有内容,81For.com是全栈技术网,包括:前端.后端.全栈.jquery.vue.react.router ...

  2. 【CentOS-7+ Ambari 2.7.0 + HDP 3.0+HAWQ2.3.00】遭遇问题及解决记录

    一.zookeeper超出最大连接限制:ambari server检测到critical错误, zookeeper server on ep-bd01:2181 连接被积极拒绝,翻看主机上zookee ...

  3. 蜕变成蝶~Linux设备驱动中的并发控制

    并发和竞争发生在两类体系中: 对称多处理器(SMP)的多个CPU 内核可抢占的单CPU系统 访问共享资源的代码区域称为临界区(critical sections),临界区需要以某种互斥机制加以保护.在 ...

  4. SpringBoot------自动装配Mapper报错

    如图: 解决方法: 转载: https://blog.csdn.net/j754379117/article/details/71639043

  5. git拉取远程分支到本地

    git拉取远程分支到本地 一.查看远程分支 -- 查看远程分支 git branch -r 二.拉取远程分支并创建本地分支 -- 采用此种方法建立的本地分支会和远程分支建立映射关系. git chec ...

  6. Nodejs 使用Protobuf

    参考: Nodejs中使用Protobuf的.proto文件 为了在nodejs服务端使用proto 所以网上找了一些教程,这里实现下. 一 安装protobufjs 在服务端项目文件夹里shift+ ...

  7. ubuntu 14.04 安装python包psycopg2

    http://stackoverflow.com/questions/28253681/you-need-to-install-postgresql-server-dev-x-y-for-buildi ...

  8. nginx配置-为没有后缀的文件(实际上是有html文件)以html形式打开

    location ~ index.php@ { add_header content-type "text/html"; }

  9. css3奇数偶数的伪属性

    <style> /*奇数*/ ul li:nth-child(odd){ background-color: green; } /*偶数*/ ul li:nth-child(even){ ...

  10. Radar Installation---(贪心)

    Radar Installation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 115873   Accepted: 2 ...