20160405

作者: 陈雁雁_____ | 来源:发表于2016-04-05 21:48 被阅读16次

(1)

xx:nth-child(n) 选择器匹配属于其父元素xx的第 n个子元素,不论元素的类型。

n可以是数字、关键词或公式。

常用于间隔的背景颜色,比如:

tr:nth-child(2n) {

background: #eee;

}

p:nth-child(odd)

{

background:#ff0000;

}

p:nth-child(even)

{

background:#0000ff;

}

(2)

使用CSS3实现选项卡切换

①body里创建3个div,css设置各自不同的颜色以及共同位置(重叠)。

②三个div分别有自己的id,再创建3个a标签,href指定锚是刚刚三个div的id

③在css里设置当选中锚的时候采取的动作,这里是采取z-index使其位置居上,每次点击a标签就可以使得该选中div放在最上面

由此实现一个切换的效果

或者直接写:display:block;

要切换动画可以在target中说明:

animation: animation .5s;

具体代码:

html:

css:

.cbox>.citem:target{

z-index:4;

}

相关文章

  • 20160405

    在凌晨的5点多.结束了网络剧毛骗的观看,结局真的是跌宕起伏,扣人心弦。终于看完了这部剧,大学期间的憾事也是少了一件...

  • 20160405

    1:工作学到了什么? 早早地去公司安排工作,单核多线程,同时推动了好多事情发生,指挥了三个人帮我完成一些事情;慢慢...

  • 20160405

    额,等会

  • 20160405

    现在的时间是0点过五分。也就是说我写的是清明节的事了。今天我们一家三口去了深圳野生动物园。到了那里,去到自...

  • 20160405

    (1) xx:nth-child(n) 选择器匹配属于其父元素xx的第 n个子元素,不论元素的类型。 n可以是数字...

  • 20160405  授人以渔

    跟两个小朋友一起讨论了方案,感谢信任,也希望自己能真正帮助到别人。

  • 随想20160405

    今天休班,做公交车回学校的路上,突然想起了GD权志龙。刚好前两天看到一则消息说陈冠希要复出了,下面有评论说如果陈...

  • 20160415第3期 [ 我来装 ] 真实项目开发实战

    20160405 第3期 [ 我来装 ] 真实项目开发实战,要,就来真的,切入口领创 前端真实项目开发 授课,教你...

  • 【写作练习】Timing 20160405

    【写作练习】Timing 201604045 记得有一期奇葩说颜如晶说,她想吃粽子的时候,她妈妈不让她吃,说要等到...

  • 工作log--20160405

    工作新的一周,看了一天Go项目,头都大了,各种跳转,没有注释,我勒个去,我的抓紧学习,向鹏哥学习,那么多书,有我看...

网友评论

      本文标题:20160405

      本文链接:https://www.haomeiwen.com/subject/kpwplttx.html