/*tab选项卡的切换css*/ a { text-decoration:none; display:block; width:33.33333333%; height:40px; line-height:40px; background-color:rgb(153,79,134); float:left; color:aliceblue; text-align:center; } .tab { box-shadow:0 0 10px 10px; } .tab-title { box-shadow:0 0 0 1px; } .tab-content { position:relative; width:100%; height:200px; border-top:1px solid #ddd } .tabcon { width:100%; height:100%; position:absolute; left:0; top:0; display:none; } .displayshow { display:block; } /* 清除浮动 */ .clearfix:after,.clearfix:before { display:table; content:'' } .clearfix:after { clear:both; } .clearfix { *zoom:1; } .BorderBottom { background-color:olivedrab; } /*login弹出框css */ .login { width:400px; height:400px; box-shadow:0 0 15px #000; position:absolute; left:50%; top:-400px; opacity:0; margin-left:-200px; border-radius:10px; padding:20px; box-sizing:border-box; background-color:#eee; z-index:1000; text-align:center; } .login p { height:30px; line-height:30px; } .login p input { padding-left:5px; box-sizing:border-box } .login p span:first-child { width:125px; height:100%; float:left; text-align:right; } .login p span:last-child { width:100%; height:100%; display:block } #login { border:none; border:3px solid rgb(26,80,150); background-color:rgb(26,80,150); border-radius:3px; color:azure; width:60%; margin-top:50px; } #login:hover { background-color:rgb(40,104,187); cursor:pointer; } .mask { width:100%; height:100vh; background-color:#000; display:none; position:fixed; left:0; top:0; z-index:999; opacity:.5; }
两个常用的功能:
第一个是login弹出框
login分别用原生js以及jquery分别实现
第二个是tab选项卡的切换
tab选项卡用原生js面向对象实现