第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

點擊按鈕為什么頁面沒有跳轉(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%;

?

}


正在回答

6 回答

你用了transform,但是沒有用transition。#st-control-n:checked~.st-scroll{ 這些地方應該使用transition }

0 回復 有任何疑惑可以回復我~

外面的transition 里面是transistion? 多了s啊

0 回復 有任何疑惑可以回復我~

錨點的使用不是你這樣的吧 ?建議你去看看錨點的使用方法

代碼寫規(guī)范點?

0 回復 有任何疑惑可以回復我~

我的代碼錯誤太多了,但是還有其他的主要錯誤導致沒有切換效果。。。。

0 回復 有任何疑惑可以回復我~

在你的代碼中有看到“transistion”,不應該是“Transition”嗎?

0 回復 有任何疑惑可以回復我~

不對。。。。以下是我往下寫的代碼,即使有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%;

?

}


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

點擊按鈕為什么頁面沒有跳轉(zhuǎn)呢?是什么地方錯誤了?

我要回答 關注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號