为什么我的是这样错开的呢

来源:2-2 导航页面切换(2)

慕粉1254422348

2017-05-17 16:14


http://img.mukewang.com/591c0c000001b07310120669.jpg

body{

font-family: "微软雅黑";

background: #ddd;

font-size: 15px;

font-weight: 400;

color: #333;

overflow:hidden;

-webkit-font-smoothing: antialiased;/*多数用在英文字体*/

}

a{

text-decoration: none;

color: #555;

}

.clr{

width: 0;

height: 0;

overflow: hidden;

clear: both;

padding: 0;

margin: 0;

}

.st-container{

width: 100%;

height: 100%;

position: absolute;

left: 0px;

top: 0px;

font-family: "方正兰亭黑简体","方正兰亭中黑";

}

.st-container>input,

.st-container>a{

width: 20%;

height: 34px;

line-height: 34px;

position: fixed;

bottom: 0;

}

.st-container>input{

opacity: 0;

z-index: 1000;

}

.st-container>a{

z-index: 10;

font-weight: 700;

font-size: 16px;

background: #2fb5dc;

text-align: center;

color: #fff;

text-shadow: 1px 1px 1px rgba(151,24,64,0.2);

}

#st-control-1,#st-control-1+a{

left: 0%;

}

#st-control-2,#st-control-2+a{

left: 20%;

}

#st-control-3,#st-control-3+a{

left: 40%;

}

#st-control-4,#st-control-4+a{

left: 60%;

}

#st-control-5,#st-control-5+a{

left: 80%;

}

.st-container input:checked+a,

.st-container input:checked:hover+a{

background: #2b87a2;

}

.st-container input:checked+a:after{

content: "";

width:0px;

height: 0px;

overflow: hidden;

border: 20px solid transparent;

border-bottom-color: #2b87a2;

position: absolute;

bottom: 100%;

left: 50%;

margin-left:-20px ;

}

.st-container input:hover+a{

background: #329ebd;

}

/*内容*/

.st-scroll,.st-panel{

width: 100%;

height: 100%;

position: relative;

}


写回答 关注

2回答

  • qq_小胖_24
    2019-04-25 02:29:50

    我也是一样的问题。。。

  • 楠公子要上进
    2017-05-19 17:14:02

    不懂你的问题,什么错开了

css3实现网页平滑过渡效果

CSS3 打造页面之间的平滑过渡效果,带来神奇的体验

54370 学习 · 388 问题

查看课程

相似问题