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

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

請幫我看下這是什么問題。跟著敲完我的網頁結構怎么亂了?

文字內容跑到上面去了,點擊按鈕圖跑到下面

575fc6c70001526405000244.jpg

575fc6c80001b58605000257.jpg


正在回答

5 回答

你的245和246兩行:

main.className?+=?'main-i_active';

ctrl.className?+=?'ctrl-i_active';

應該改為

main.className?+=?' main-i_active';

ctrl.className?+=?' ctrl-i_active';

就是在main-i_active和ctrl-i_active前面加個空格

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

我也遇到了樓主的問題,謝謝那位解答的同學


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

我也遇到了樓主的問題,謝謝那位解答的同學

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

我也遇到了同樣的問題,謝謝那位解答的同學。謝謝了

0 回復 有任何疑惑可以回復我~
<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="utf-8">
????????<style?type="text/css">
?????????*{margin:0;?padding:0;}
?????????body{
?????????padding:50px?0;
?????????background-color:#fff;
?????????font-size:14px;
?????????font-family:'微軟雅黑';
?????????color:#555;
?????????-webkit-font-smoothing:?antialiased;
?????????}

?????????.slider{
?????????width:?100%;
?????????height:?400px;
?????????position:?relative;
?????????}

?????????/*?幻燈片區(qū)域?*/
?????????.slider?.main{
?????????overflow:?hidden;
?????????}

?????????/*?每個幻燈片的樣式?*/
?????????.slider?.main?.main-i,
?????????.slider?.main,
?????????.slider{
?????????width:?100%;
?????????height:?400px;
?????????position:?relative;
?????????}
?????????.slider?.main?.main-i?img{
?????????width:?100%;
?????????position:?absolute;
?????????left:?0;
?????????top:?50%;
?????????z-index:?1;
?????????}
?????????.slider?.main?.main-i?.caption{
?????????position:?absolute;
?????????right:?50%;
?????????top:?30%;
?????????z-index:?9;
?????????}
?????????.slider?.main?.main-i?.caption?h2{
?????????font-size:?40px;
?????????line-height:?50px;
?????????color:?#b5b5b5;
?????????text-align:?right;
?????????}
?????????.slider?.main?.main-i?.caption?h3{
?????????font-size:?70px;
?????????line-height:?70px;
?????????color:?#000000;
?????????text-align:?right;
?????????}

?????????/*?控制按鈕區(qū)域?*/
?????????.slider?.ctrl{
?????????width:?100%;
?????????height:?13px;
?????????line-height:?13px;
?????????text-align:?center;
?????????position:?absolute;
?????????left:?0;
?????????bottom:?-13px;
?????????z-index:?1;
?????????}

?????????.slider?.ctrl?.ctrl-i{
?????????display:?inline-block;
?????????width:?150px;
?????????height:?13px;
?????????background-color:?#666;
?????????box-shadow:?0?2px?2px?rgba(0,?0,?0,?.3);
?????????position:?relative;
?????????margin-left:?1px;
?????????z-index:?1;
?????????}
?????????.slider?.ctrl?.ctrl-i?img{
?????????width:?100%;
?????????position:?absolute;
?????????left:?0;
?????????bottom:?50px;
?????????z-index:?1;
?????????opacity:?0;
?????????-webkit-transition:all?.2s;
?????????}

?????????/*?hover到控制按鈕?*/
?????????.slider?.ctrl?.ctrl-i:hover{
?????????background-color:?#f0f0f0;
?????????}

?????????.slider?.ctrl?.ctrl-i:hover?img{
?????????bottom:?13px;
????????-webkit-box-reflect:below?0px?-webkit-gradient(
????????linear,
????????left?top,
????????left?bottom,
????????from(?transparent),
????????color-stop(50%,?transparent),
????????to(?rgba(255,255,255,.3)?)
????????);
????????opacity:?1;
?????????}

?????????/*?avtive?當前展現(xiàn)的狀態(tài)?*/
?????????.slider?.ctrl?.ctrl-i_active:hover,
?????????.slider?.ctrl?.ctrl-i_active{
?????????background-color:?#000;
?????????}
?????????.slider?.ctrl?.ctrl-i_active:hover?img{
?????????opacity:?0;
?????????}

/*?幻燈片切換的樣式?*/
?????????.slider?.main?.main-i{
?????????opacity:?0;
?????????position:?absolute;
?????????right:?50%;
?????????top:?0;
?????????-webkit-transition:all?.5s;
?????????}
?????????.slider?.main?.main-i?h2{
?????????margin-right:?45px;
?????????}
?????????.slider?.main?.main-i?h3{
?????????margin-right:?-45px;
?????????}
?????????.slider?.main?.main-i?h2,
?????????.slider?.main?.main-i?h3{
opacity:?0;
?????????-webkit-transition:all?1s?.8s;
?????????}
?????????.slider?.main?.main-i_active{
?????????right:?0;
?????????opacity:?1;
?????????}
?????????
?????????.slider?.main?.main-i_active?h2,
?????????.slider?.main?.main-i_active?h3{
?????????margin-right:?0px;
?????????opacity:?1;
?????????}

?????????.slider?.main?.main-i?.caption{
??????margin-right:?13%;
????}
????????</style>

????</head>
????<body>
????<div>
????<!--?0.?修改?VIEW?->Template(關鍵字替換),增加Template?id-->
?????<div?id="template_main">
?????<div?id="main_{{index}}">
?????<div>
?????<h2>{{h2}}</h2>
?????<h3>{{h3}}</h3>
?????</div>
?????<img?src="imgs/{{index}}.jpg"??class="picture">
?????</div>
?????</div>
?????<div?id="template_ctrl">
?????<a?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});"><img?src="imgs/{{index}}.jpg"?/></a>
?????</div>


????<script?type="text/javascript">

????//1.數(shù)據(jù)定義(實際生產環(huán)境中,應由后臺給出)
???????var?data=[
????????{img:1,h1:'Creative',h2:'DUET'},
????????{img:2,h1:'Friendly',h2:'DEVIL'},
????????{img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
????????{img:4,h1:'Insecure',h2:'HUSSLER'},
????????{img:5,h1:'Loving',h2:'REBEL'},
????????{img:6,h1:'Passionate',h2:'SEEKER'},
????????{img:7,h1:'Crazy',h2:'FRIEND'}
????????]

????????//2.定義一個通用函數(shù)
????????var?g?=?function(id){
?????????if(id.substr(0,1)=='.'){
?????????return?document.getElementsByClassName(id.substr(1));
?????????}
?????????return?document.getElementById(id);
????????}

????????//3.添加幻燈片的操作(所有幻燈片&對應的按鈕)
function?addSliders(){
????????//3.1?獲取模板
????????var?tpl_main?=?g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
????????var?tpl_ctrl?=?g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');

????????//3.2?定義最終輸出?HTML?的變量
????????var?out_main?=?[];
????????var?out_ctrl?=?[];

????????//3.3?遍歷所有數(shù)據(jù),構建最終輸出的?HTML
????????for(?i?in?data?){
????????var?_html_main?=?tpl_main
????????.replace(/{{index}}/g,data[i].img)
????????.replace(/{{h2}}/g,data[i].h1)
????????.replace(/{{h3}}/g,data[i].h2)
????????//.replace(/{{css}}/g,['','main-i_right'][i%2])
????????;

????????var?_html_ctrl?=?tpl_ctrl
????????.replace(/{{index}}/g,data[i].img);

????????out_main.push(_html_main);
????????out_ctrl.push(_html_ctrl);
????????}

????????//3.4??把?HTML?回寫到對應的DOM里面
????????g('template_main').innerHTML?=?out_main.join('');
????????g('template_ctrl').innerHTML?=?out_ctrl.join('');


???????}

???????//5.?幻燈片切換
???????function?switchSlider(n){
???????//5.1?獲得要展現(xiàn)的幻燈片操作按鈕?DOM
???????var?main?=?g('main_'+n);
???????var?ctrl?=?g('ctrl_'+n);

???????//5.2?獲得所有的幻燈片以及控制按鈕
???????var?clear_main?=?g('.main-i');
???????var?clear_ctrl?=?g('.ctrl-i');

???????//5.3?清除他們的?active?的樣式
???????for(var?i=0;i<clear_ctrl.length;i++){
???????clear_main[i].className?=?clear_main[i].className.replace('main-i_active','');
???????clear_ctrl[i].className?=?clear_ctrl[i].className.replace('ctrl-i_active','');
???????}

???????//5.4?為當前控制按鈕和幻燈片附加樣式
???????main.className?+=?'main-i_active';
???????ctrl.className?+=?'ctrl-i_active';
???????}

????????//4.定義何時處理幻燈片輸出
????????window.onload?=?function(){
?????????addSliders();
?????????switchSlider(1);
????????}
?????</script>
?????</div>

????</body>
</html>


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

舉報

0/150
提交
取消

請幫我看下這是什么問題。跟著敲完我的網頁結構怎么亂了?

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

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

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號