jayl12

摘要： 浮动，定位，表单，弹性盒子 一、浮动布局（Float） 1. 核心属性 css float: left; /* 左浮动 */ float: right; /* 右浮动 */ float: none; /* 默认，不浮动 */ 2. 作用与特点 让块级元素横向排列（脱离文档流） 常用于图文环绕、多栏布 阅读全文

摘要： 弹性盒子 一、什么是弹性盒子？ 弹性盒子（Flexbox）是 CSS3 中一种一维布局模型，用于在容器内灵活排列子元素。 核心思想：给父容器设置 display: flex，子元素自动成为“弹性项目”，可以轻松实现水平/垂直居中、等分布局、自适应排列等。 二、为什么用 Flexbox？ 传统布局（浮 阅读全文

摘要： Flexbox对齐、表格表单与圆形制作 一、Flexbox 对齐方式 1. 主轴对齐（justify-content）—— 5种 值 效果 flex-start 起点对齐（左对齐） flex-end 终点对齐（右对齐） center 居中对齐 space-between 两端对齐，项目间间距相等 s 阅读全文

摘要： 图文卡片布局 一、HTML结构 html <div class="box1"> <!-- 卡片容器 --> <div class="img1"> <!-- 图片区 --> <img src="./img/icon3.jpg" alt="" /> </div> <div class="txt"> <! 阅读全文

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

摘要： CSS 2D 位移（translate） 一、基本语法 css transform: translate(x, y); 参数 说明 x 水平方向位移距离（正值向右，负值向左） y 垂直方向位移距离（正值向下，负值向上） 单位支持：px、%、em、vh/vw 等。 二、三种常用写法 写法 示例 说明 阅读全文

摘要： 课堂笔记：相对/绝对/固定定位与锚点跳转 一、相对定位与绝对定位的联动（子绝父相） 示例代码结构 css .parent { position: relative; /* 父级：相对定位 */ } .son { position: absolute; /* 子级：绝对定位 */ left: -110 阅读全文

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

摘要： 课堂笔记 多行文本溢出显示省略号（基于 -webkit-line-clamp） 属性/规则 值/说明 作用 display: -webkit-box 旧版弹性盒模型 为多行文本截断提供布局基础（兼容 WebKit 内核浏览器） -webkit-box-orient: vertical 垂直排列 内部 阅读全文

摘要： 课堂笔记：CSS 文本样式、自定义字体与溢出处理综合示例 一、全局布局与容器样式（div） css div { font-size: 16px; /* 默认字号16像素 */ font-family: "微软雅黑"; /* 默认字体：微软雅黑 */ text-indent: 2em; /* 首行缩进 阅读全文