01-空间转换空间转换简介 空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。 空间转换也叫 3D转换 属性：transform 平移 1234transform: translate3d(x, y, z);transform: translateX();transform: translateY();transform: translateZ(); 取值与平面转换相同 默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果 视距作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果 透视效果：近大远小、近实远虚 属性：(添加给父级，取值范围 800-1200) 1perspective: 视距; 旋转 Z 轴：rotateZ() X 轴：rotateX() Y 轴：rotateY() 左手法则作用：根据旋转方向确定取值正负 使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向 rotate3d-了解 rotate3d(x, y, ...

使用位移、缩放、旋转、渐变效果 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 ...

写法 含义 匹配对象 示例 .recommend a.modify 选中带有modify类的<a>元素 <a class="modify"> <div class="recommend"><a class="modify"></a></div> .recommend a .modify 选中<a>内部的modify类元素 <a><xxx class="modify"></xxx></a>

一、权重计算规则公式：行内样式 (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 在一 ...