web进阶
day01 字体平面转换
1.字体图标
只一个字体，处理简单的，单一的图片，精灵图则稍微处理复杂的图片
1.1特点
- 灵活性 轻量级 兼容新
- 下载字体包->使用即可
- 对于没有图标将 svg后缀文件 的上传 后下载 网址:https://www.iconfont.cn
1.2使用
- 引入图标的css iconfont.css 文件
- 引入类名即可使用(两个类名) 属性与文字的属性相同
案例:淘宝购物车小案例
2.平面转换
改变盒子的形态（ 缩放 位移 旋转）又称2D转换
2.1 移动：
transform :translate( x , y )
-
取值可以是百分比 也可以是数字 正负两个方向均可 样式的层叠行 按照最后一个生效
-
一个方向的移动：translateX translateY 或者translate 写一个值
-
移动都是以盒子坐上角的点开始算起
案例：双开门图片移动 (伪元素必须设置 content 属性 此案能被看见)
2.2 旋转：
-
旋转必须单配 过渡使用 transition ：all 时间
扫描二维码关注公众号，回复： 14730454 查看本文章
-
transform: rotate(); 旋转的角度是deg 正值顺时针
2.21 旋转原点
转换原点：默认盒子的中心点旋转
转换原点更换：
- tansfrom-origin（x,y） 原点的水平位置 原点的垂直位置
- 取值 left / right / top/ buttom /center 直接写在标签上即可
2.22 多重转换：
transform: translateX() rotate(); 旋转平移同时进行 先位移后旋转
前后有顺序：旋转该改变轴向，位移方向转变 一般旋转放在最后
案例：滚轮胎
2.3 放大：
transform: scale(x,y);
一般写一个属性 等比例放大/缩小 大于1 放大 反之 缩小
放大/缩小 知识倍数 没有单位
案例： 王者荣耀图标的变化 定位的时候（如果使用的是 移动属性 注意 transfrom 的综合属性）
3.背景渐变
background-image: linear-gradient(颜色1，颜色2，yanse3);
半透明的渐变：
background-image: linear-gradient(
transparent, //半透明
rgba(0,0,0,0.3)
);
案例： 产品展示显示阴影 /* hover 属性后边直接写伪元素属性 */
.box:hover::after{ }
4.综合案例
模拟华为 实现图片文字的 联动显示
显示目标:字体图标 渐变背景 图片缩放效果 文字位移
4.1 绝盒中心居中
positio：absolute
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
day02动画3D转换
1.空间转换
改变元素在空间的 位移 旋转 缩放 z轴的方向与视线的方向相同 z轴正值指向自己 负值指向屏幕里边
1.1位移
- transform: translate3d(x,y,z); 综合写法 取值范围0-2
- transform: translateX(100px); 分开属性
- transform: translateY(100px);
- transform: translateZ(100px);
1.2旋转
- transform: rotateZ(360deg); z轴旋转效果与 中心点的旋转效果相同
- transform: rotateX(60deg); 搭配透视属性 类似手掌的前后翻转
- transform: rotateY(60deg); 搭配透视属性 类似开门效果
左手法则:左手握住旋转轴 大拇指的方向正值的方向 手指弯曲方向为正值方向
3d立体显示:
属性: transform-style: preserve-3d; 父级添加后,子集自动开启3d模式， 同时搭配透视效果显示
案例:3d导航
- ul 存在默认的边距
- 用 :first-child实现不同a 标签的颜色
- 开始空间旋转前:整体2d旋转好看位置变化 transform: rotateX(-20deg) rotateY(30deg);
1.3 3d缩放
transform: scale3d(0.6,1.2,2); 取值范围0-2
单独设置 某一个具体的位置属性
1.4透视:
- 原理:透视数值 又称视距(人眼到屏幕的距离) 近大元小
- z轴的不显示,正值盒子向我们走来,负值盒子离我们而去,产生近实远虚效果
- 透视效果: perspective: 经验取值 800-1200 单位像素,添加给父级盒子
2动画(重点)
实现多个状态之间的变化 可以远程控制
实质依旧是大量的图片快速播放 实现连续的播放 动画效果
2.1定义动画:
两个状态定义 动画的开始状态和盒子的默认位置相同,from可以省略
@keyframes 动画名{
from{
}
to{
}
}
多个状态定义 百分比的形式 0-100% 是动画的总时常 中间区分的多个不同状态
@keyframes 动画名字 {
0% {
}
50% {
}
100% {
}
}
2.2使用动画:
谁使用动画,给谁添加, animation:动画名字 , 动画名称
2.3动画符合属性
- animation: name duration timing-function delay iteration-count direction fill-mode;
- animation:动画名 动画时常 速度曲线 延迟时间 重复次数 动画方向 动画执行完毕状态; 取值没有先后
动画属性分开属性:
- animation-name/duration/timing-function/delay/iteration-count/direction/fill-mode;
- animation-fill-mode:执行完毕的状态 默认的开始状态backwards 结束状态forwards 前提是没有infinite
- animation-timing-function: step(n) 动画分为几步完
- animation-iteration-count: infinite 无线循环
- animation-direction: alternate 动画方向反向来回效果
- animation-paly-state:paused 暂停动画 配合hover
2.4 补间动画
逐帧动画:动画之间的间隔过去 steps() 配合精灵图使用,:动画之间的完整过渡
案例 : 实现跑人动画：
a.盒子的大小和精灵图里边小图的大小一致
b. 定义动画(移动的)位置是精灵图大图的宽度
c.使用动画steps(n) n 是小图的个数 注意无线循环
3综合案例:
3.1走马灯:
无缝动画
- 显示区域显示几张图,后续得负值出来几张图 (显示区域无论不能为空)
- ul 盒子宽度的计算 需要计算全部的宽度
- 关于动画移动位置的计算 不需要把后续的几张图算进去
3.2全名大出游:
- 设置背景大图 可以使用 html body 的 高度100% 配合使用background-size:cover
- 背景图居中 center
day03 flex布局
1.移动端特点
1.1基础
PC有版心 移动网页宽度大多数100%
物理分辨率与逻辑分辨率：写代码参考的是逻辑分辨率 iPhone6/7/8 375*667
视口标签：meta 宽度=设备宽度
1.2二倍图：
写代码基于375的逻辑分辨率，结果放在750的物理分辨率中图片模糊，故 设计师给图 为二倍图
需要调节pxcook调节X2 后在375 的分辨率上编写
1.3百分比布局(流式布局)：
宽度自适应 高度固定
2.flex布局(弹性布局)
2.1出现原因
浏览器提倡的结构化布局，布局网页更加简单灵活 避免了浮动脱标的问题
2.2.名词分析
- 弹性容器：最大的父级，添加display：flex，子元素自动挤压或者拉升 （必须是亲爹）
- 弹性盒子：子集里边的小块块
- 主轴：默认水平方向(默认加压) 侧轴：默认垂直方向
2.3.盒子之间距离(※)
主轴对其方式
- justify-content: start/end;/* 默认的左边 右边 */
- justify-content: center;/* 居中 */
- justify-content: space-between; /* 间距在弹性盒子(子级)之间 */
- justify-content: space-evenly;/* 所有地方的间距都相等 */
- justify-content: space-around;* 间距加在子级的两侧 ，视觉效果: 子级之间的距离是父级两头距离的2倍 */
侧轴对齐方式
-
align-items: flex-start/flex-end ; 默认的是顶端
-
align-items: center; * 居中 */
-
align-items: stretch; 拉伸,默认值(子集没有高度，默认拉升)
-
align-self: center; 添加在子集上 可以脱离垂直方向父级的控制，子集单独设置
2.4.弹性盒子的特点
- 如果子集没有高度 弹性与父级的高度一致(垂直方向拉升现象)
- 如果子集没有宽度 内容撑开
2.5.伸缩比
- flex：数值; 占用父级剩余尺寸的份数 注意的是比例问题
2.6.主轴方向
flex-direction: row; 默认主轴方向水平，开启display：flex 元素都是默认水平排列
flex-direction: column; 主轴方向为垂直方向 开启display：flex 元素显示垂直对其
重点
- 更改了主轴的方向后，水平居中 align-items: center; 垂直居中 justify-content: center
- 故弹性盒子使用
- 先确定主轴方向;
- 再选择对应的属性实现主轴或侧轴的对齐方式
2.7.弹性盒子换行
-
flex-nowrap 默认不换行 盒子的宽度受到挤压，全部一行排列
-
flex-wrap 盒子换行
-
align-content： 盒子换行后调整行的对其方式 ， 属性的值与justify-content 属性的值 类似
day04 flex 应用
1.移动端小兔鲜项目
订单order页面
- 分析页面的整体flex布局 底部的固定部分 主题的滑动部分
- 订单价格数据的变化 放在一个标签里边
- 商品的详细信息，数量 价格 规格 等 放在具体的标签里边
- 中间的部分可以是 section 区域 一个页面可以有多个 的 section
2.小兔鲜PC端开发
类似接受二手收项目
- 内容背景的确定 body 的颜色 如果之前代码给body给了色，则后续的代码自己添加
反之给body添加 - 新的属性
mini-height内容撑不开的时候显示自己的高度 内容恶可以撑开则是内容的高度 - 单行文字溢出省略号表示
文字所在的标签添加属性：
text-overflow：ellipsis;
white-space:nowarp;
overflow:hidden;
文字所在的父级添加属性
flex 1 ：弹性盒子的前提下，尺寸可以被内容撑开，不换行的文字可以撑开尺寸
width 0； 必须添加宽度
4. 弹性盒子里边 虽然a是行内标签 但是添加宽高依旧生效
day05 移动适配
- 出现：设备宽度变化的时候，网页元素的宽高同时变化
- 解决方案：rem vw(目前主流)
1、rem：
移动端设备宽度的变化，网页元素宽高等比例缩放
1.1 单位：
相对单位(相对于html的字号)
1rem=1 Html字号
rem单位是相对于html标签字号的计算结果(根标签字号)
1.2 使用步骤：
给html添加字号->宽高属性单位rem
1.3 完成移动适配：
-
手机屏幕大小不同，分辨率不同，需要设置不同的html字号
解决：媒体查询(检测视口的宽度 编写差异化的CSS样式)
@media(媒体特性){
选择器{
css属性
}
} -
给网页添加合适的html字号
rem布局方案中,当设备的宽度是375px的时候，将网页十等分，html的字号为37.5px
@media(width：375px){
html{
font-size:37.5px;
}
}
1.4 rem 适配原理
- 设计稿的单位px，代码的单位rem ，px单位转换rem单位
- rem数值=px数值/(设备视口宽度的十分之一) 或者 rem数值=px数值/基准字号
- width: (68 / 37.5rem); height: (29 / 37.5rem);
1.5 rem-flex 移动适配
- flexble.js 配合rem在不同的设备宽度中，网页元素实现等比例缩放的效果
- 原理：在不同的设备宽度中，设置不同的html根节点 font-size
2.less
是css的预处理器 后缀.less 扩充了css具有一定的逻辑能力与集散能力
less文件保存后 自动生产css文件 浏览器最终映入的是 css文件
2.1 less注释
单行注释 ctl + / 块注释 shift+alt+A
单行注释无法在自动生成的css文件中显示
2.2 less计算
- 除法需要添加小括号 或者 .推荐小括号
- width:（100/37.5rem） width：100./37.5.rem 使用less运算法则完成px 转换 rem 单位
2.3 less嵌套
- 快速生成后代选择器 （方便代码迁移）
- &不生成后代选择器，表示当前选择器，配合伪类或者伪元素使用
.father {
width: 100px;
.son{
height: 40px;
&:hover{
background-color: pink;
}
}
}
- css 自动生成的代码
.father {
width: 100px;
}
.father .son {
height: 40px;
}
.father .son:hover {
background-color: pink;
}
2.4 less变量
- 定义变量：@变量名：值；
- 使用变量: css属性：@变量名
@pinkcolor:pink;
.box {
color: @pinkcolor;
}
.father {
background-color: @pinkcolor;
}
- css中的代码
.box {
color: pink;
}
.father {
background-color: pink;
}
2.5 less导入
- @import ‘文件路径’； 空格 分号 或者 @import url(文件路径);
- 别的less文件可以导入到正在写的less文件里边
2.6 less导出
- 大量到处： 配置easyless插件 out 路径
- 单独导出：less 文件的首航添加
//out: less/daochulecc.css 导出到less文件加 文件名daochulecc.css (文件名可以省略) - 禁止导出： //out: false
3 vw / vh
3.1基础
vw ：viewport-width vh:viewport-height 参考的是视口的宽度
1vw = 1 / 100 视口的宽度 1vh = 1 / 100 视口的高度
实际上手：vw / vh 选择一个即可
举例： width: 50vw; height: 30vw; 视口宽度320 则width 160px heigth 96px
3.1适配原理
- vw 单位尺寸 = px 单位数值 / (1/100 视口的宽度)
- width: (68 / 3.75vw); height: (29 / 3.75vw);
- vh 单位尺寸 = px 单位数值 / (1/100 视口的高度)
- width: (68 / 6.67vh); height: (29 / 6.67vh);
- vw 与 vh 不可以混合使用 依旧可以用less的变量
4案例
4.1 rem案例项目：移动端游乐园
A 导入外部文件 css iconfont titlePic js 基础的less文件，导入到所写的less文件
B 设计稿的px单位 全部改为rem 添加一个变量 @rootSize:37.5 rem
C 图片上需要定位小图标的 给图片设置宽高 方便以后定位
D 小图标是字体图标 设置其大小的 font-size
E 移动端的开发 不存在hover的情况
F 底部的导航栏是固定定位
G 弹性盒子里边的 a 宽高可以显示
4.2 vh/vm 案例项目：哔哩哔哩首页
A 临摹网站 字体图标看不见大小 fz
B css权重问题 修改字体图标的大小 继承的权重最低 直接在类名 .iconfont 修改
C 若是后续存在定位的问题 必须给盒子添加宽高
D css文字属性的继承性
E 注意弹性盒子的换行 而不是复制多个div
F 顶部的固定区域 一直显示在滚动屏幕的上边 添加z-index 与 背景色
G 定位 注意子绝父相 父亲盒子的宽高问题
day06 响应式
响应式布局：一套代码 随着网页宽度、设备宽度的变化网页布局发生变化
1 媒体查询
根据条件的不同，设置不同的属性
媒体特性是一个范围 max-width min-width
1.1注意书写顺序：
- min-width 从小到大的顺序(css 属性具有层叠性) 书写样式 （数轴的方式取交集）
- max-width 从大到小的顺序
1.2媒体特性属性:
- max-width min-width (高概率) max-height min-height
- 屏幕方向： orientation： protrait 竖屏 landscape 横屏
1.3link标签写法：
media没有@符号 ， 注意 引号 小括号 以及书写的前后顺序
1.4css内部书写规范：
@media(媒体特性){
选择器{
样式
}
}
- 举例 当宽度小于等于768xp 的时候，body的背景色 改为pink
@media (max-width: 768px) {
body {
background-color: pink;
}
}
1.5media 完整写法(了解)：
and only
@media 关键词 媒体类型 and（ 媒体特性 ） { css 代码 }
1.6 隐藏
JD电商网站，当视口小于一定的程度，侧边的导航取消
利用 媒体查询max-width dispaly:none
2.Bootstrap框架
Bootstrap框架 快速开发响应式网页布局 内部封装了html css js
下载： 基于生产环境的 diss 基于学习源码 不带diss
2.1 使用方法：
- link 引入样式表(min的响应块体积小) 添加class 类
2.2 栅格系统：响应式网页布局
- 默认将网页的跨度等分为12份，元素在其所占的份数
| 划分 | 响应断点 | 别名 | 前缀类 | 容器宽度 |
|---|---|---|---|---|
| 超小屏幕 | <768px | xs | clo-xs- | 100% |
| 小屏幕 | >=768px | sm | clo-sm- | 750px |
| 中等屏幕 | >=992px | md | clo-md- | 970px |
| 大屏幕 | >=1200px | lg | clo-lg- | 1170px |
- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 至少需要四个div
<div class="col-lg-3 col-md-6">1</div>
<div class="col-lg-3 col-md-6">2</div>
<div class="col-lg-3 col-md-6">3</div>
<div class="col-lg-3 col-md-6">4</div>
2.3 bootstrap 相关类
. container 版心 存在左右15的 padding
. row 抵消container的15padding 值 （row有-15的margin） 写在子级盒子里边
. container_fluid 宽度100% 左右含有15 padding
2.4 全局css样式
- 表格 按钮：进入官网 直接复制类名即可
2.5 组件
- 封装网页的常见的区域 包括字体图标、下拉菜单、导航、警告框、弹出框
2.6 字体图标
- 参考iconfont 的用法
2.7 JS插件
- 引入样式 引入js文件：Jquery.js+Bootstrap.js 注意js的前后顺序
2.8 响应式工具
电商站 PC端与移动端分开
企业站 内容少点 可以使用响应式布局
3.案例项目：腾讯全端
A 注意引入的文件
B 媒体组件设置响应式布局 图片的尺寸跟着父级的尺寸走 先设置图的高度
C 提升自己写的样式的权重 width：100px!important;
D 删除框架里边的代码 辅助检查
E 定制样式 网站定制 下载 解压替换原来的bootstrap 重新引入
F h标签 使用bootstrap框架后失效 直接调用标签的类名即可
G 版心栅格系统
H 栅格盒自身存在padding margin 失效 往后边的内容上添加