摘要： 简易图片轮播 一、实现思路 准备图片路径数组和索引变量 每2秒执行一次切换函数 切换时：更换图片 + 更新高亮按钮 二、核心变量 javascript let num = 0; // 当前显示第几张（0开始） let srcs = ["img/1.jpg", "img/2.jpg", "img/3. 阅读全文

摘要： 图文卡片布局（产品展示型） 一、HTML结构 html <div class="card"> <!-- 卡片容器 --> <div class="card-img"> <!-- 图片区 --> <img src="./img/product.jpg" alt="产品图" /> </div> <div 阅读全文

摘要： CSS 浮动布局笔记：自动换行机制与父容器高度处理 一、浮动布局的自动换行机制 现象描述 假设父容器 .main 的宽度为 800px，内部有四个子元素 .A、.B、.C、.D，均设置 float: left，每个宽度为 400px。 实际渲染结果：第一行显示 .A 和 .B，第二行显示 .C 和 阅读全文

摘要： 一、浮动布局的自动换行机制 现象 父容器 .main 宽度 800px 四个子元素 .A、.B、.C、.D 均设置 float: left，每个宽度 400px 实际渲染结果：第一行显示 .A 和 .B，第二行显示 .C 和 .D，形成 2×2 网格 原理 浮动元素会依次排列在当前行的可用空间内。 阅读全文

摘要： CSS盒子模型与水平居中布局完全指南 一、 在网页布局中，盒子模型是最基础也最重要的概念。每一个HTML元素都可以看作一个矩形的“盒子”，理解盒子模型的构成与属性设置，是掌握页面布局的关键。 今天我们将通过一个实际的两栏布局示例，来深入理解CSS盒子模型。 二、盒子模型的结构 从外到内，一个盒子由四 阅读全文

摘要： HTML5 常用标签与语义化 一、常用文本标签 html <h1>一级标题</h1> <h2>二级标题</h2> <p>这是一个段落，用于描述内容。</p> <strong>重要文本（加粗）</strong> <em>强调文本（斜体）</em> <span>行内容器，无默认样式</span> <br 阅读全文

摘要： 基础网页项目练习（二）—— 添加导航与列表 一、项目扩展 项目名称：mySite 项目路径：D:\mySite 新增文件： about.html：关于页面 style.css：继续使用原有样式文件 二、主页（index.html）新增内容 页面结构 在原有结构基础上，添加： 导航栏（<nav>），包 阅读全文

摘要： 一，CSS 样式引入的三种方式 外部样式表（推荐！项目里最常用） 写法：在 HTML 的 里用 标签引入单独的 .css 文件 代码示例： html 优点：样式和结构分离，多个页面可以共用同一个 CSS 文件，方便维护 注意： href 路径要写对！比如 css/style.css 表示当前 HTM 阅读全文