點擊按鈕為什么頁面沒有跳轉(zhuǎn)呢?是什么地方錯誤了?
我是嚴格按照視頻寫的代碼,可是點擊導航按鈕頁面為什么不能跳轉(zhuǎn)呢?求各位大神指點。
<!doctype <!DOCTYPE html>
<html>
<head>
<mata charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>index</title>
<link type="text/css" rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1">
<a href="#st-panel-1">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" ?id="st-control-3">
<a href="#st-panel-3">Tranquillity</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">Posibility</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Passion</a>
</div>
<div class="st-scroll"><!--頁面內(nèi)容-->
<section class="st-panel" id="st-panel-1">
<div class="st-desc" data-icon="H"></div>
<h2>Serendipity</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-desc" data-icon="2"></div>
<h2>Happiness</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-desc" data-icon="B"></div>
<h2>Posibility</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-desc" data-icon="X"></div>
<h2>Posibility</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-desc" data-icon="C"></div>
<h2>Passion</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
</div>
</div>
</body>
</html>
body{
??????????? font-family: Georgia,serif;
??????????? background: #ddd;
??????????? font-weight: 400;
??????????? font-size: 15px;
??????????? 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;
??????????? top: 0;
??????????? left: 0;
??????????? font-family: "Josefin Slab","Myrida Pro",Arial,sans-serif;
}
.st-container>input,
.st-container>a{
??????????? width:20%;
??????????? height:34px;
??????????? line-height: 34px;
??????????? position: fixed;
??????????? bottom: 0;
??????????? cursor: pointer;
}
.st-container>input{
??????????? z-index: 2;
??????????? opacity: 0;
}
.st-container>a{
??????????? z-index:1;
??????????? font-weight: 700;
??????????? font-size: 16px;
??????????? background: #e23ae6;
??????????? 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: #821134;
}
.st-container input:hover+a{
??????????? background:#AD244F;
}
.st-container input:checked+a:after{
??????????? content:"";
??????????? width:0px;
??????????? height:0px;
??????????? overflow: hidden;
??????????? border:20px solid transparent;
??????????? border-bottom-color:#821134;
??????????? position: absolute;
??????????? bottom: 100%;
??????????? left:50%;
??????????? margin-left: -20px;
}
/*內(nèi)容*/
.st-scroll,
.st-panel{
??????????? width: 100%;
??????????? height:100%;
??????????? position: relative;
}
.st-scroll{
??????????? left: 0;
??????????? top: 0;
??????????? transform:translate3d(0,0,0);
??????????? -webkit-transform:translate3d(0,0,0);
??????????? -moz-transform:translate3d(0,0,0);
??????????? -o-transform:translate3d(0,0,0);
??????????? -ms-transform:translate3d(0,0,0);
??????????? -webkit-backface-visibility:hidden;
??????????? transistion:all 0.6s ease-in-out;
??????????? -weibkit-transistion:all 0.6s ease-in-out;
??????????? -ms-transistion:all 0.6s ease-in-out;
??????????? -moz-transistion:all 0.6s ease-in-out;
??????????? -o-transistion:all 0.6s ease-in-out;
}
.st-panel{
??????????? background: #fff;
??????????? overflow: hidden;
}
#st-control-1:checked~.st-scroll{
??????????? transform:translateY(0%);
??????????? -o-transform:translateY(0%);
??????????? -ms-transform:translateY(0%);
??????????? -moz-transform:translateY(0%);
??????????? -webkit-transform:translateY(0%);
}
#st-control-2:checked~.st-scroll{
??????????? transform:translateY(-100%);
??????????? -o-transform:translateY(-100%);
??????????? -ms-transform:translateY(-100%);
??????????? -moz-transform:translateY(-100%);
??????????? -webkit-transform:translateY(-100%);
}
#st-control-3:checked~.st-scroll{
??????????? transform:translateY(-200%);
??????????? -o-transform:translateY(-200%);
??????????? -ms-transform:translateY(-200%);
??????????? -moz-transform:translateY(-200%);
??????????? -webkit-transform:translateY(-200%);
}
#st-control-4:checked~.st-scroll{
??????????? transform:translateY(-300%);
??????????? -o-transform:translateY(-300%);
??????????? -ms-transform:translateY(-300%);
??????????? -moz-transform:translateY(-300%);
??????????? -webkit-transform:translateY(-300%);
}
#st-control-5:checked~.st-scroll{
??????????? transform:translateY(-400%);
??????????? -o-transform:translateY(-400%);
??????????? -ms-transform:translateY(-400%);
??????????? -moz-transform:translateY(-400%);
??????????? -webkit-transform:translateY(-400%);
}
.st-desc{
??????????? width:200px;
??????????? height:200px;
??????????? background: #fa96b5;
??????????? transform:translateY(-50%) rotate(45deg);
??????????? -o-transform:translateY(-50%) rotate(45deg);
??????????? -moz-transform:translateY(-50%) rotate(45deg);
??????????? -ms-transform:translateY(-50%) rotate(45deg);
??????????? -webkit-transform:translateY(-50%) rotate(45deg);
??????????? position: absolute;
??????????? left: 50%;
??????????? top: 0;
??????????? margin-left: -100%;
?
}
2016-01-03
你用了transform,但是沒有用transition。#st-control-n:checked~.st-scroll{ 這些地方應該使用transition }
2016-09-12
外面的transition 里面是transistion? 多了s啊
2016-01-29
錨點的使用不是你這樣的吧 ?建議你去看看錨點的使用方法
代碼寫規(guī)范點?
2016-01-05
我的代碼錯誤太多了,但是還有其他的主要錯誤導致沒有切換效果。。。。
2016-01-05
在你的代碼中有看到“transistion”,不應該是“Transition”嗎?
2016-01-05
不對。。。。以下是我往下寫的代碼,即使有transition也應該有切換的效果,但是沒有,您知道怎么解決嗎?
.st-scroll,
.st-panel{
width:?100%;
height:100%;
position:?relative;
}
.st-scroll{
left:?0;
top:?0;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
transistion:all?0.6s?ease-in-out;
-weibkit-transistion:all?0.6s?ease-in-out;
-ms-transistion:all?0.6s?ease-in-out;
-moz-transistion:all?0.6s?ease-in-out;
-o-transistion:all?0.6s?ease-in-out;
}
.st-panel{
background:?#fff;
overflow:?hidden;
}
#st-control-1:checked~.st-scroll{
transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
-moz-transform:translateY(0%);
-webkit-transform:translateY(0%);
}
#st-control-2:checked~.st-scroll{
transform:translateY(-100%);
-o-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
#st-control-3:checked~.st-scroll{
transform:translateY(-200%);
-o-transform:translateY(-200%);
-ms-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-webkit-transform:translateY(-200%);
}
#st-control-4:checked~.st-scroll{
transform:translateY(-300%);
-o-transform:translateY(-300%);
-ms-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-webkit-transform:translateY(-300%);
}
#st-control-5:checked~.st-scroll{
transform:translateY(-400%);
-o-transform:translateY(-400%);
-ms-transform:translateY(-400%);
-moz-transform:translateY(-400%);
-webkit-transform:translateY(-400%);
}
.st-desc{
width:200px;
height:200px;
background:?#fa96b5;
transform:translateY(-50%)?rotate(45deg);
-o-transform:translateY(-50%)?rotate(45deg);
-moz-transform:translateY(-50%)?rotate(45deg);
-ms-transform:translateY(-50%)?rotate(45deg);
-webkit-transform:translateY(-50%)?rotate(45deg);
position:?absolute;
left:?50%;
top:?0;
margin-left:?-100%;
?
}