1.浮动与定位结合使用

浮动与相对定位

//1.两者均参与布局//2.主浮动布局，相对布局辅助完成布局微调//3.相对定位布局微调不同于盒模型布局微调，相对定位布局不影响盒子原有位置，就会影响兄弟盒子布局

浮动与绝对定位

// 1.只保留绝对定位布局// 2.脱离文档流的盒子宽可以交于内部撑开

2.小米更新数据案例

默认活跃状态

1.将初始的li设置一个active类名（拥有该类名就拥有活跃状态表现的属性）】

更改活跃状态

let active_index = 0; // 活跃状态的索引for(let I = 0; I < lis.length;i++){ lis[I].onmouseover = function(){ // 清除之前活跃的 list[active_index].className = ""; // 设置自身为活跃 this.className = "active"; // 更新活跃索引 active_index = I; }}

作用域（不同的js逻辑代码块）

// 不要去使用全局变量，不同的js逻辑代码块如果重复命名，要么报重名错误，要么数据覆盖出现变量污染// 每一个js逻辑代码块可以通过匿名函数的自调用完成局部作用域(function){ let a=10;}()(function)(){ let a= 20;})()

根据数据与页面结构，动态渲染数据

<ul class=‘main‘> <li> <a href="jacascript:void(0)"> <h2>小米音响</> <img src="https://li.mifile.cn/a4/cf6660a3-d424-4248-889f-0eedle99a342" alt=""> <p>这是小米音响，稍微解释一下</p> </a> </li> ...</ul>

let data = [ [ { title: "热门1", img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg", info: "这是热门" }, ...还有三个{} ], ...还有三个[] ];

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; }}

3.小米轮播图分析

// 下一张right_btn.onclick = function(){ // 清除之前活跃的图片与tag img_lis[active_index].className = ""; tag_lis[active_index].className = ""; // 索引切换（更新活跃索引） // 安全性：最后一张的下一张应该his第一张 if (active_index == 4) active_index = -1; active_index++; // 设置将要活跃的图片和tag img_lis[active_index].className = "active"; tag_lis[active_index].className = "active";};// active_index 记录了当前活跃状态的索引，且所有逻辑共有// 无限录播是考虑边界切换的问题