js html游戏仿写,天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）...
*{
margin:0;
padding:0;
}
body{
font-family: "微軟雅黑";
font-size:16px;
}
ul,ol,li{
list-style:none;
}
b,strong{
font-weight:normal;
}
em,i{
font-style:normal;
}
a,u{
text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
font-size: 16px;
}
input{
outline: none;
}
body{
background: seagreen;
}
.xuanxiangka{
width: 483px;
height: 298px;
background: red;
margin: 50px auto;
border: 1px solid snow;
}
.xuanxiangka .tab-box{
width: 465px;
height: 280px;
position:relative;
cursor: pointer;
background: black;
margin-left: 10px;
margin-top: 10px;
}
.xuanxiangka .tab-box ul{
width: 465px;
height: 223px;float: right;
background: white;
margin-top: 57px;
}
.xuanxiangka .tab-box ul li{
width: 232px;
height: 223px;
display:none;
position: relative;
}
.xuanxiangka .tab-box ul li img{
width: 200px;
height: 200px;
margin-top: 23px;float: right;
margin-right: -200px;
}
.xuanxiangka .tab-box ol{
width: 465px;
height: 57px;
position:absolute;
background:#b7b7b7;
}
.xuanxiangka .tab-box ol li{
width: 231px;
height: 57px;
background:#ccc;float: left;
text-align:center;
line-height: 57px;
display: block;
}
.xuanxiangka .tab-box ol li.current{
background:#00b262;
color: white;
}
.xuanxiangka .tab-box ul li.current{
display:block;
}
.xuanxiangka .tab-box .img1{
position: absolute;
bottom: 50px;
z-index: 999;
width: 291px!important;
height: 87px!important;
}
.xuanxiangka .tab-box .img2{
width: 23px!important;
height: 23px!important;
position: absolute;
top: 73px;
left: 25px;
z-index: 9999;
}
.xuanxiangka .tab-box .span1{
display: block;
width: 100px;
height: 31px;
position: absolute;
line-height: 31px;
top: 92px;
left: 48px;
z-index: 9999;
text-align: center;
color: #00b262;
font-size: 20px;
font-weight: bolder;
}
.xuanxiangka .tab-box .span2{
display: block;
width: 89px;
height: 26px;
font-size: 16px;
line-height: 26px;
text-align: center;
color: black;
position: absolute;
top: 125px;
left: 25px;
z-index: 9999;
}
.xuanxiangka .tab-box .span3{
display: block;
width: 465px;
height: 223px;
background:rgba(255, 255, 255, 0.3);
position: absolute;
top:0;
left:0;
z-index: 99999;
display: none;
}
.xuanxiangka .tab-box:hover .span3{
display: block;
}
總結(jié)
以上是生活随笔為你收集整理的js html游戏仿写,天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 创建hive的AES加密解密函数
- 下一篇： UVA12096 - The SetSt