网页制作补课课堂笔记（含核心代码+知识点）

一、课程主题

搭建亿贝企业官网，综合使用 HTML 结构、CSS 样式、JavaScript 轮播特效，掌握文件规范、图片路径、代码排错技巧。

二、项目文件结构（必记）

标准目录（顺序/位置不能乱）
项目文件夹
├─ 亿贝.html 主页面（HTML + 内嵌JS）
├─ css
│ └─ style.css 样式文件
└─ img 所有图片素材存放文件夹
说明：本次将 JS 代码内嵌在 HTML 底部，不再单独创建 js 文件夹。

三、核心知识点 + 对应代码

（一）HTML 基础结构 & 图片路径

1. 规则

2. HTML 引入图片路径：img/图片名.后缀

3. 必须和本地图片文件名、后缀完全一致（区分大小写、jpg/png 不能混用）

4. 常用图片标签代码示例

（二）CSS 样式 + 背景图路径（重点难点）

1. 路径规则

CSS 文件在 css 文件夹内，调用图片必须先返回上一级目录：../img/图片名.后缀

2. 核心样式代码
   /* 通用清除样式 */

• {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  }
  .clear {
  clear: both; /* 清除浮动，解决布局错乱 */
  }

/* 轮播图容器 */

img_switch {

width: 1000px;
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* 轮播图透明度切换 /
.banner-img {
width: 100%;
height: 100%;
position: absolute;
opacity: 0; / 默认隐藏 /
transition: opacity 0.5s;
}
.banner-img.show {
opacity: 1; / 显示当前图片 */
}

/* 分割线背景图（CSS路径写法） /
.shuiping {
/ ../ 回到根目录 → 再进入img文件夹 */
background: url(../img/bg6.jpg) repeat-x;
height: 2px;
}

/* 列表前置小图标 */
.menu1 li {
background: url(../img/bg.jpg) no-repeat left center;
padding-left: 15px;
}
（三）JavaScript 轮播功能（本次重点，修复前无法轮播）

1. 问题原因

代码执行早于页面加载，导致获取不到图片元素，轮播失效。
解决方案：把 JS 代码放在 window.onload 中，等待页面全部加载完毕再执行。

2. 完整轮播代码（内嵌在 HTML 底部）

四、实操问题汇总 + 排错方法

1. 页面整体空白

• 原因：文件夹结构错误、CSS 引入路径错误、标签不完整

• 解决：严格按照标准目录摆放文件，检查 路径

2. 部分图片不显示（最高发错误）

• 原因：代码内图片名、后缀 和 本地文件不一致

• 解决：逐行核对 src 里的文件名，大小写、jpg/png 严格匹配

3. 轮播图不动、无法自动切换

• 原因：JS 没有写 window.onload，页面未加载完就运行代码

• 解决：所有 JS 逻辑全部包裹在 window.onload = function(){} 内部

4. 修改代码后页面无变化

• 原因：浏览器缓存

• 解决：使用快捷键 Ctrl + Shift + R 强制刷新，或重启浏览器