使用位移、缩放、旋转、渐变效果
01-平面转换简介作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换也叫 2D 转换，属性是 transform
平移1transform: translate(X轴移动距离, Y轴移动距离);
取值
像素单位数值
百分比（参照盒子自身尺寸计算结果）
正负均可
技巧
translate() 只写一个值，表示沿着 X 轴移动
单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
定位居中
方法一：margin
方法二：平移 → 百分比参照盒子自身尺寸计算结果
案例-双开门
HTML 结构
1234<div class="father"> <div class="left"></div> <div class="right"></div></div>
CSS 样式
12345678910 ...
01-搭建项目目录
xtx-pc
images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
iconfont 文件夹：字体图标素材
css 文件夹：存放 CSS 文件（link 标签引入）
base.css：基础公共样式
common.css：各个网页相同模块的重复样式，例如：头部、底部
index.css：首页 CSS 样式
index.html：首页 HTML 文件
引入样式表1234<link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link rel="st ...
页面-学成在线01-项目目录网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。
首页引入CSS文件
123<!-- 顺序要求：先清除再设置 --><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css">
02-版心居中
12345678.wrapper { margin: 0 auto; width: 1200px;}body { background-color: #f3f5f7;}
03-布局思路
布局思路：先整体再局部，从外到内，从上到下，从左到右
CSS 实现思路
画盒子，调整盒子范围 → 宽高背景色
调整盒子位置 → flex 布局、内外边距
控制图片、文字内容样式
04-header区域-整体布局
H ...
day09-小兔鲜儿01-搭建项目目录
xtx-pc
images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
iconfont 文件夹：字体图标素材
css 文件夹：存放 CSS 文件（link 标签引入）
base.css：基础公共样式
common.css：各个网页相同模块的重复样式，例如：头部、底部
index.css：首页 CSS 样式
index.html：首页 HTML 文件
引入样式表1234<link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link re ...
一、权重计算规则公式：行内样式 (1,0,0,0) > ID 选择器 (0,1,0,0) > 类选择器 (0,0,1,0) > 标签选择器 (0,0,0,1)每一级之间不存在进位，例如 10 个类选择器的权重仍低于 1 个 ID 选择器。
二、示例：不同选择器组合的优先级比较12345678910111213141516171819202122232425262728<style> /* 选择器1：权重 (0,1,0,0) */ #title { color: red; } /* 选择器2：权重 (0,0,2,0) */ .section .heading { color: blue; } /* 选择器3：权重 (0,0,1,1) */ div.content { color: green; } /* 选择器4：权重 (0,0,0,2) */ div p { color: purple; }</style><di ...
定位作用：灵活改变盒子在网页的位置
实现：
定位模式：position
边偏移：设置盒子的位置
left
right
top
bottom
相对定位 relative123456789div { position: relative; bottom: 100px; left: 100px;}div img { width: 200px; height: 200px;}
！修改位置的参照物是自己原来的位置
不脱标，而且占位，而且不改变原来的显示模式
可以看到div的横方向非常大，导致屏幕最下方出现滑动条
绝对定位 absolute使用场景：子级绝对定位，父级相对定位（子绝父相）（子级的位置无论怎么改变都在父级里面，不超出父级范围）
特点：
脱标，不占位
参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
显示模式特点改变：宽高生效（具备了行内块的特点）
12345678910111213141516171819202122232425262728293031323334353637383 ...
标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，例如块元素独占一行，行内元素可以一行显示多个。
浮动（了解，看懂就行）一、浮动属性的基本概念1. 浮动的作用
让块级标签在一行显示，实现灵活的页面布局
常见应用场景：横向导航栏、多列布局、图文混排
2. 浮动属性的语法123selector { float: left | right | none;}
left：元素向左浮动，出现在父级左侧
right：元素向右浮动，出现在父级右侧
none：默认值，元素不浮动
二、浮动属性测试演示1. 案例 1：两个 div 左浮动12<div style="float: left; width: 100px; height: 50px; background: red;">1</div><div style="float: left; width: 100px; height: 80px; background: blue;">2</div>
显示效果：两个 div 在一 ...
结构伪类选择器作用：根据元素的结构关系查找元素（序号查找）
E代表某种选择器
选择器
说明
E:first-child
查找第一个 E 元素
E:last-child
查找最后一个 E 元素
E:nth-child(N)
查找第 N 个 E 元素（第一个元素 N 值为 1）
12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> li:first-child { color ...
复合选择器定义：由两个以上的的基础选择器，通过不同的方式组合而成
作用：更准确，高效的选择目标元素（标签）
后代选择器作用：选中某元素的后代元素
写法：父选择器 子选择器 { css选择器 } ，父子选择器之间用空格隔开
123456789101112131415161718192021222324252627 <style> div span { color: red; } div strong { color: blue; } div div { color: green; } </style></head><body> <div> <span>span11111111111111</span> <span>span2222222222222</span> <span>span333333333333333</span> <strong>stron ...
