一. 浮动与定位
浮动: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 记录了当前活跃状态的索引, 且所有逻辑共有
// 无限录播时考虑索引边界切换的问题