盒模型与居中技巧

盒模型与居中技巧
• 水平居中：
margin: 0 auto; 要求元素有固定宽度且为块级元素。
• 绝对定位居中：

img_switch_text 设置 position: absolute; bottom: 5px; left: 10px; 相对于父容器 #img_switch定位。

浮动清除
• 使用

清除浮动

布局技术点

1. 两栏/多栏布局雏形
   ◦ .top-bar 中包含 .logo 和 .at1，均未设置宽度，依赖 float 或后续样式排列。
   ◦ .nav ul li 均浮动左排列，形成水平导航栏。

2. 背景分层
   ◦ #content：灰色背景 + 水平平铺背景图。
   ◦ .container：独立的背度固定。

3. 层叠上下文与定位
   ◦ 父级 #img_switch 设置 position: relative;
   ◦ 子级 #img_switch_text 设置 position: absolute; 实现文字/按钮层叠在图片之上。

交互组件雏形（图片切换器）

1. 结构设计
   ◦ 图片区域：（静态写死，未实现动态切换）。
   ◦ 数字导航：
   列表，每个
   • 代表一个切换按钮（1~8）。
     ◦ 当前选中项：第一个
   • 带有 style="background-color:#FF0000" 高亮。
   • 缺少交互逻辑
     ◦ 没有JavaScript代码，因此无法实际切换图片。
     ◦ 数字按钮只有样式，没有绑定事件。
     ◦ 常见改进方向：监听按钮点击 → 修改 的 src 属性；或使用轮播图库（如 Swiper）。
   • 可扩展知识点
     ◦ 如何用原生JS或jQuery实现图片轮播。
     ◦ 自动轮播（setInterval）、无缝滚动、过渡动画。
     ◦ 无障碍设计（aria-label、键盘支持）。