一.   浮動與定位

浮動:float: left | right

定位:position:relative | absolute | fixed

1.浮動與相對定位結合使用

/*盒子採用的是浮動佈局為主, 相對定位可以輔助其子級絕對定位佈局, 也可以在浮動佈局基礎上微調 */

採用相對定位佈局, 在浮動佈局基礎上微調, 不影響兄弟盒子的佈局

採用盒模型佈局, 在浮動佈局基礎上微調, 影響兄弟盒子的佈局

2.浮動與絕對定位結合使用

盒子採用絕對定位佈局, 浮動佈局失效

為什麼: 因為兩者都是脫離文件流, 絕對定位為完全脫離文件流

脫離文件流: 盒子的寬度可以由內容撐開

二.   Js  更改活躍狀態

let active_index = 0;  // 活躍狀態的索引

for (let i = 0; i < lis.length; i++) {

    lis[i].onmouseover = function () {

        // 清除之前活躍的

        lis[active_index].className = "";

        // 設定自身為活躍

        this.className = "active";

        // 更新活躍索引

        active_index = i;

    }

} 

作用域的問題:

// 不要去使用全域性變數, 不同的js邏輯程式碼塊如果重複命名, 要麼報重新命名錯誤, 要麼資料覆蓋出現變數汙染

// 每一個js邏輯程式碼塊可以通過匿名函式的自呼叫完成區域性作用域

(function(){

    let a = 10;

})()

(function(){

    let a = 20;

})() 

頁面的結構問題(結構的搭建很重要)

let main_lis = document.querySelectorAll('.main li');

// 分析資料結構與頁面結構,將指定資料渲染到指定位置

function updateData(index) {

    let dataArr = data[index];

    for (let i = 0; i < dataArr.length; i++) {

        let h2 = main_lis[i].querySelector('h2');

        h2.innerText = dataArr[i].title;

        let img = main_lis[i].querySelector('img');

        img.setAttribute('src', dataArr[i].img_url);

        let p = main_lis[i].querySelector('p');

        p.innerText = dataArr[i].info;

    }

}

三.   輪播圖

// 下一張

right_btn.onclick = function () {

    // 清除之前活躍的圖片和tag

    img_lis[active_index].className = "";

    tag_lis[active_index].className = "";

    // 索引切換(更新活躍索引)

    // 安全性: 最後一張的下一張應該是第一張

    if (active_index == 4) active_index = -1;

    active_index++;

    // 設定將要活躍的圖片和tag

    img_lis[active_index].className = "active";

    tag_lis[active_index].className = "active";

};

// active_index 記錄了當前活躍狀態的索引, 且所有邏輯共有

// 無限錄播時考慮索引邊界切換的問題