html5选项卡tag,html5 选项卡

选项卡

*{margin: 0;padding: 0;}

ul li{

padding: 3%;

list-style: none;

33.3%;

float: left;

box-sizing: border-box;

}

ul li img{

100%;

display: block;

}

.pox{

font-size: 30px;

}

.show img{

50%;

padding: 3%;

}

@media only screen and (min-960px){

html{

font-size: 19px;

}

}

@media only screen and (max-959px){

html{

font-size: 15px;

}

ul li{

50%;

}

.pox{

font-size: 20px;

}

}

@media only screen and (max-767px){

html{

font-size: 12px;

}

ul li{

100%;

float: none;

}

.pox{

font-size:12px;

}

}

.dn{

display: none;

}

/*html{

font-size: 20px;

}*/

/*.box{

box-sizing: border-box;

100%;

height: 26.9rem;  乘以根元素10px

background:  url(images/caodi.png) no-repeat center top ;

-webkit-background-size: 100% 100%;

background-size: 100% 100%;

}   */

hello,world!

• 
• 
• 

001

         

002

         

003

         

// 鼠标经过选项卡

$(".TAB li").mousemove(function(){

var $vv=$(this).parent(".TAB").attr("id");

$($vv).hide();

$(this).parent(".TAB").find("li").removeClass("hover");

var xx=$(this).parent(".TAB").find("li").index(this);

$($vv).eq(xx).show();

$(this).addClass("hover");

});

// 鼠标点击选项卡

// $(".TAB_CLIKE li").click(function(){

//             var $vv=$(this).parent(".TAB").attr("id");

//             $($vv).hide();

//             $(this).parent(".TAB").find("li").removeClass("hover");

//             var xx=$(this).parent(".TAB").find("li").index(this);

//             $($vv).eq(xx).show();

//             $(this).addClass("hover");

//         });