利用CSS3提供的伪类选择器,特别是子元素选择器nth-child
,作出斑马条纹的表格再也不是难事了,而且利用nth-child(αn+β)
这样的表达式可以实现分组的效果,棒呆!
下载地址
链接: https://pan.baidu.com/s/1i4BcHLj 密码: vehy
一、万博manbext3.0首页登录知识点nth-child
伪类选择器的多种使用
border-radius
在表格上的运用
box-shadow
内阴影的设置
二、主要代码
1、CSS部分代码
.bordered th,.bordered td{
border-right:1px solid #333;
border-bottom:1px solid #333;
}
.bordered th{
box-shadow:0 1px 0 rgba(255,255,255,.8) inset;/*内阴影*/
}
.bordered th:last-child,.bordered td:last-child{
border-right:none;
}
.bordered tr:last-child td{
border-bottom:none;}
th:first-child{
border-radius:10px 0 0 0;}
th:last-child{
border-radius:0 10px 0 0;}
tr:last-child td:first-child{
border-radius:0 0 0 10px;}
tr:last-child td:last-child{
border-radius:0 0 10px 0;}
tr:nth-child(4n+1) td{/*4n+1,表示4个位一组,以第一个开头*/
background-color:#93e8d7;
}
tr:nth-child(4n+2) td{
background-color:#73dfd4;
}
tr:nth-child(4n+3) td{
background-color:#3ed0ce;}
tr:nth-child(4n+4) td{
background-color:#15c4c9;}
tr:first-child th{/*第一行*/
background-color:#00aba9;
color:#000;
}
tr:hover td{
background-color:#f6f793;
color:#000;
cursor:pointer;}
nth-child
伪类选择器的多种使用
border-radius
在表格上的运用
box-shadow
内阴影的设置
1、CSS部分代码
.bordered th,.bordered td{ border-right:1px solid #333; border-bottom:1px solid #333; } .bordered th{ box-shadow:0 1px 0 rgba(255,255,255,.8) inset;/*内阴影*/ } .bordered th:last-child,.bordered td:last-child{ border-right:none; } .bordered tr:last-child td{ border-bottom:none;} th:first-child{ border-radius:10px 0 0 0;} th:last-child{ border-radius:0 10px 0 0;} tr:last-child td:first-child{ border-radius:0 0 0 10px;} tr:last-child td:last-child{ border-radius:0 0 10px 0;} tr:nth-child(4n+1) td{/*4n+1,表示4个位一组,以第一个开头*/ background-color:#93e8d7; } tr:nth-child(4n+2) td{ background-color:#73dfd4; } tr:nth-child(4n+3) td{ background-color:#3ed0ce;} tr:nth-child(4n+4) td{ background-color:#15c4c9;} tr:first-child th{/*第一行*/ background-color:#00aba9; color:#000; } tr:hover td{ background-color:#f6f793; color:#000; cursor:pointer;}
发表评论:
◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。