/*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面向对象实现