保山市城市建设网站,网店推广要多少钱,手机网站wap,诏安建设局网站平面转换
作用#xff1a;为元素添加动态效果#xff0c;一般与过渡配合使用
概念#xff1a;改变盒子在平面内的形态#xff08;位移、旋转、缩放、倾斜#xff09;
平面转换又叫 2D 转换
平移
属性#xff1a;transform: translate(X轴移动距离#xff0c;Y轴移动…平面转换
作用为元素添加动态效果一般与过渡配合使用
概念改变盒子在平面内的形态位移、旋转、缩放、倾斜
平面转换又叫 2D 转换
平移
属性transform: translate(X轴移动距离Y轴移动距离)
取值
像素单位数值百分比参照盒子自身尺寸计算结果正负均可
技巧
translate() 只写一个值表示沿着 X 轴移动单独设置 X 或 Y 轴移动距离translateX() 或 translateY()
平移实现居中效果 position: absolute;
left: 50%;
top: 50%margin-left: -100px;
margin-top: -50px;width: 200px;
height: 100px;position: absolute;
left: 50%;
top: 50%transform: translate(-50%,-50%);旋转
属性transform: rotate(旋转角度) 角度单位为deg
技巧
取值正负均可取值为正顺时针旋转取值为负逆时针旋转
改变转换原点
默认情况下转换原点是盒子中心点
属性transform-origin: 水平原点位置 垂直原点位置;
取值
方位名词left、top、right、bottom、center像素单位数值百分比
多重转换
技巧先平移再旋转transform: translate() rotate();
多重转换原理以第一种转换方式坐标轴为准转换形态
旋转会改变网页元素的坐标轴向先写旋转则后面的转换效果的轴向以旋转后的轴向为准会影响转换结果
缩放
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);技巧
通常只为 scale() 设置一个值表示 X 轴和 Y 轴等比例缩放取值大于1表示放大取值小于1表示缩小
倾斜
属性transform: skew();
取值角度度数deg
渐变
渐变是多个颜色逐渐变化的效果一般用于设置盒子背景
分类
线性渐变径向渐变
线性渐变
属性
background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,......
);取值 渐变方向可选 to 方位名词角度度数 终点位置可选 百分比
径向渐变
作用给按钮添加高光效果
属性
background-image: radial-gradient(半径 at 圆心位置,颜色1 终点位置,颜色2 终点位置,......
);取值
半径可以是2条则为椭圆圆心位置取值像素单位数值 / 百分比 / 方位名词
空间转换
空间是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间Z 轴位置与视线方向相同。
空间转换也叫 3D转换
属性transform 平移
属性
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();取值正负均可
像素单位数值百分比参照盒子自身尺寸计算结果 默认情况下Z 轴平移没有效果 视距
指定了观察者与 Z0 平面的距离为元素添加透视效果
透视效果近大远小、近实远虚
属性(添加给父级取值范围 800-1200) perspective: 视距; 旋转
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);左手法则根据旋转方向确定取值正负
左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
rotate3d(x, y, z, 角度度数) 用来设置自定义旋转轴的位置及旋转的角度
xyz 取值为0-1之间的数字
立体呈现
作用设置元素的子元素是位于 3D 空间中还是平面中
属性名transform-style
属性值
flat子级处于平面中preserve-3d子级处于 3D 空间
呈现立体图形步骤
父元素添加transform-style: preserve-3d;子级定位调整子盒子的位置位移或旋转 空间内转换元素都有自已独立的坐标轴互不干扰 缩放
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();动画
过渡实现两个状态间的变化过程
动画实现多个状态间的变化过程动画过程可控重复播放、最终画面、是否暂停
实现步骤 定义动画 /*第一种from-to*/
keyframes 动画名称 {
from {}
to {}
}/*第二种百分比*/
keyframes 动画名称 {0% {}10% {}......100% {}
}使用动画 animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;动画名称和动画时长必须赋值 取值不分先后顺序 如果有两个时间值第一个时间表示动画时长第二个时间表示延迟时间
属性作用取值animation-name动画名称animation-duration动画时长animation-delay延迟时间animation-fill-mode动画执行完毕时状态forwards最后一帧状态backwards第一帧状态animation-timing-function速度曲线steps(数字)逐帧动画linear线性渐变animation-iteration-count重复次数infinite为无限循环animation-direction动画执行方向alternate为反方向animation-play-state暂停动画paused为暂停通常配合:hover使用
多组动画
animation:动画1,动画2,...动画N
;移动适配
移动Web基础 切换设备仿真 pc端浏览器按F12后会出现控制台有切换设备仿真选项能够启用类似手机模拟器的形式 尺寸:响应这里能够选择可参考的手机型号进行调试 分辨率开发尺寸可以理解为移动端的逻辑分辨率 缩放不影响布局只是方便查看
屏幕分辨率
制作网页参考也就是逻辑分辨率
不同移动端型号的分辨率不同并且也分物理分辨率和逻辑分辨率
物理分辨率该型号屏幕的实际大小由屏幕的横纵像素点数决定逻辑分辨率可以理解为设计尺寸二者一般都呈比例关系目前来说2:13:1比较常见
视口
手机屏幕尺寸不同网页宽度均为100%
网页的宽度和逻辑分辨率尺寸相同
视口显示HTML网页的区域用来约束HTML尺寸
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!-- 视口标签 --meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
/body
/htmlwidthdevice-width视口宽度 设备宽度initial-scale1.0缩放1倍不缩放
二倍图
概念设计稿里面每个元素的尺寸的倍数
作用防止图片在高分辨率屏幕下模糊失真
可以理解为直接用逻辑分辨率的2倍来作为设计稿尺寸
适配方案
宽度适配宽度自适应 百分比布局Flex布局 等比适配宽高等比缩放 remvw
rem适配方案
rem单位是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem 1HTML字号大小
媒体查询
媒体查询能够检测视口的宽度然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
media (媒体特性) {选择器 {CSS属性}
}示例
media (width:320px) {html {background-color: green;}
}目前rem布局方案中将网页等分成10份 HTML标签的字号为视口宽度的 1/10
rem – flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
body......script src./js/flexible.js/script
/bodyrem单位尺寸 确定基准根字号 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号1/10视口宽度 rem单位的尺寸 rem单位的尺寸 px单位数值 / 基准根字号
简单来说 根据视口宽度为html配好根字号 html{font-size: 16px;
}其他设置就可以根据html配好的根字号使用rem单位 /*div的字号为32px*/
div{font-size: 2rem;
}less
CSS不支持计算写法因此px单位转换到rem单位过程比较麻烦
通过less能够实现
简介
Less是一个CSS预处理器, Less文件后缀是**.less**。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力 浏览器不识别 Less 代码目前阶段网页要引入对应的 CSS 文件 VS Code 插件Easy LESS保存 less文件后自动生成对应的 CSS 文件 less语法
注释和 java 的注释相同
运算加减乘直接书写计算表达式除法需要小括号或.
示例
width: (100 / 4px);
height: 100 ./ 4px;表达式存在多个单位以第一个单位为准 嵌套快速生成后代选择器
.父级选择器 {//父级样式.子级选择器 {//子级样式}
}示例
.father {color: red;.son {width: 100px;}
}变量容器存储数据方便使用和修改
语法
定义变量变量名: 数据;使用变量CSS属性: 变量名;
示例
// 定义变量
myColor: pink;
// 使用变量
.box {color: myColor;
}
a {color: myColor;
}导入导入less公共样式文件
语法导入import 文件路径 如果是less文件可以省略后缀 导出
写法在 less 文件的第一行添加 // out: 存储URL
提示文件夹名称后面添加 /
示例
// out: ./index.css
// out: ./css/禁止导出// out: false
vw
适配方案使用相对单位相对视口尺寸的计算结果 vwviewport width 1vw 1/100视口宽度 vhviewport height 1vh 1/100视口高度
vw布局
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定 vw 尺寸 1/100 视口宽度
vw单位的尺寸 px 单位数值 / ( 1/100 视口宽度 )
vh布局
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定 vh 尺寸 1/100 视口高度
vh单位的尺寸 px 单位数值 / ( 1/100 视口高度 ) 开发中vw和vh不能混用如果混用可能会导致盒子变形 响应式网页
解决方案
媒体查询Bootstrap
媒体查询
media (媒体特性) {选择器 {CSS属性}
}媒体特性
max-width最大宽度即小于该宽度时代码生效
min-width最小宽度即大于该宽度时代码生效
完整写法
media 关键词 媒体类型 and (媒体特性) {CSS代码}关键词 / 逻辑操作符and、only、not
媒体类型是用来区分设备类型的如屏幕设备、打印设备等其中手机、电脑、平板都属于屏幕设备
类型名称值描述屏幕screen带屏幕的设备打印预览print打印预览模式阅读器speech屏幕阅读模式不区分类型all默认值包括以上三种类型
媒体特性主要用来描述媒体类型的具体特征如当前屏幕的宽高、分辨率、横屏或竖屏等。
特性名称属性值视口的宽和高width、height数值视口最大宽或高max-width、max-height数值视口最小宽或高min-width、min-height数值屏幕方向orientationportrait竖屏landscape横屏
外部CSS
link relstylesheet media逻辑符 媒体类型 and媒体特性) hrefxx.cssBootstrap
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架它提供了大量编写好的 CSS 样式允许开发者结合一定 HTML结构及JavaScript快速编写功能完善的网页及常见交互效果
使用步骤 Bootstrap – 下载 下载Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件 引入 Bootstrap CSS 文件 link relstylesheet href./Bootstrap/css/bootstrap.min.css调用类名container响应式布局版心类 div classcontainer测试/div栅格系统
栅格化是指将整个网页的宽度分成12等份每个盒子占用的对应的份数
例如一行排4个盒子则每个盒子占 3份 即可12 / 4 3 常用布局类 col-ClassInfix-每个盒子所占份数 列例如col-xxl-3 row行 全局样式
Button类
btn默认样式btn-success成功btn-warning警告……按钮尺寸btn-lg / btn-sm 表格类
table默认样式table-striped隔行变色table-success表格颜色…… 组件
引入样式表引入 js 文件复制结构修改内容
字体图标 下载 导航 / Extend图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip 复制 fonts 文件夹到项目目录 网页引入 bootstrap-icons.css 文件 调用 CSS 类名图标对应的类名
