移动Web学习笔记
第一天：
1.字体图形：
- 使用字体图形技巧实现网页中简洁的图标效果
- 字体图形展示的是图标，本质是字体
- 处理简单的、颜色单一的图片
1.1-字体图标的优点：
- 灵活性：灵活的修改样式
- 轻量级：体积小，渲染快，降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便
- 下载字体包
- 使用字体图标
1.1.1-案例：淘宝购物车
<title>购物车</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
a {
color: #333;
}
.nav {
width: 200px;
margin: 50px auto;
font-size: 12px;
}
.orange {
color: #f40;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">
<span class="iconfont icon-cart-Empty-fill orange"></span>
<span>购物车</span>
<span class="iconfont icon-arrow-down"></span>
</a>
</li>
</ul>
</div>
</body>
2.平面转换：
- 使用transform属性实现元素的位移、旋转、缩放等效果
- 改变盒子在平面内的形态（位移、旋转、缩放）
- 2D转换
2.1-位移：
- 使用translate实现元素位移效果
-
语法：
- transform:translate（水平移动距离，垂直移动距离）;
-
取值：
- 像素单位数值
- 百分比（参照物为盒子自身尺寸）
- X轴正向为右，Y轴正向为下
-
技巧：
- translate()如果只给出一个值，表示X轴方向移动距离
- 单独设置某个方向的移动距离：translateX()和translateY()
2.1.1：位移-绝对定位居中
-
核心代码：
positition:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -
原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离
2.2-旋转：
使用rotate实现元素旋转效果
2.2.1-语法：
- transform:rotate（角度）;
- 注意：角度单位是deg
- 技巧：取值正负均可
- 取值为正，顺时针旋转
- 取值为负，逆时针旋转
2.3-转换原点：
2.3.1-概念：transform-origin属性改变转换原点
2.3.2-语法：
- 默认圆点是盒子中心点
- transform-origin：原点水平位置 原点垂直位置
2.3.3-取值：
- 方位名词（left、top、right、bottom、center）
- 像素单位取值
- 百分比（参照盒子自身尺寸计算）
2.4-多重转换：transform复合属性实现多形态转换
2.4.1-注意：
- 旋转会改变网页元素的坐标轴向
- 先写旋转，后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
2.5-缩放：
2.5.1-语法
transform：scale（X轴缩放倍数，Y轴缩放倍数）;
2.5.2-技巧
一般情况下，只为scale设置一个值，表示X轴和Y轴等比例缩放
- transform：scale（缩放倍数）；
- scale值大于1表示放大，scale值小于1表示缩小
3.渐变:
3.1-概念：background-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
3.2-语法：
background-image:linear-gradient(
transparent,
rgba(0,0,0,.5)
)
第二天：
1.空间转换
1.1-transform属性
实现元素在空间内的位移、旋转、缩放等
- 空间：坐标轴定义，x、y和z三条坐标轴构成一个立体空间
- Z轴位置与视线方向相同
- 空间转换也叫3D转换
- 属性：transform
1.1.1-语法：
- transform：translate3d（x,y,z）
- transform:translateX(值)
- transform:translateY(值)
- transform:translateZ(值)
1.1.2-取值（正负均可）:
- 像素单位数值
- 百分比
1.2-perspective属性（添加给父级），透视效果
-
perspective：值;
-
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
1.3-rotate属性：实现元素空间旋转效果
1.3.1-语法：
- transform：rotateZ（值）
- transform：rotateX（值）
- transform：rotateY（值）
1.3.2-空间旋转：
- rotate3d（x，y，z ，角度度数）：用来设置自定义旋转轴的位置和旋转角度
- x，y，z 取值为0~1之间的数字
1.3.3-立体呈现：
1.3.3.1-立体案例：
<title>3D导航</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navs {
width: 300px;
height: 40px;
margin: 50px auto;
}
.navs li {
position: relative;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
transform-style: preserve-3d;
transition: all .8s;
/* 旋转: 让大家在写代码的过程中看到立体盒子 */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
.navs li a {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
.navs li a:first-child {
background-color: green;
transform: translateZ(20px);
}
.navs li a:last-child {
background-color: orange;
transform: rotateX(90deg) translateZ(20px);
}
.navs li:hover {
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="navs">
<ul>
<li>
<a href="#">首页</a>
<a href="#">Index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">Login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">Register</a>
</li>
</ul>
</div>
</body>
1.3.4-空间缩放：
- 语法
- transform：scaleX（倍数）；
- transform：scaleY（倍数）；
- transform：scaleZ（倍数）；
- transform：scale3d（x,y,z）；
2.动画
2.1-animation
- 过渡——实现2个状态间的变化过程
- 动画效果：实现多个状态间的变化过程，动画过程可控
- （重复播放、最终画面、是否暂停）
2.2-动画实现步骤——添加动画效果
animation：紧跟着动画名称+动画时长
2.3-动画属性：
| 属性 | 作用 | 取值 |
|---|---|---|
| animation：name | 动画名称 | |
| animation：duration | 动画时长 | |
| animation：delay | 延迟时间 | |
| animation：fill-mode | 动画执行完毕时状态 | forwards：最后一帧状态/backwards： |
| animation：timing-function | 速度曲线 | steps（数字）：逐帧动画 |
| animation：iteration-count | 重复次数 | infinite为无限循环 |
| animation：direction | 动画执行方向 | alternate为反向 |
| animation：play-state | 暂停动画 | paused为暂停，通常配合：hover使用 |
2.3.1-逐帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
position: absolute;
left: 0;
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite,
translate 3s linear forwards;
}
@keyframes run {
100% {
background-position: -1680px 0;
}
}
@keyframes translate {
100% {
left: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
第三天：
- 移动端特点
- 百分比布局
- Flex布局
1.移动端特点
1.1-移动端和Pc网页不同点
1.2-谷歌模拟器
- 浏览器F12调试窗口开启
1.3-分辨率
- 硬件分辨率（出厂设置）
- 缩放调节的分辨率（软件设置）
- 制作网页参考逻辑分辨率
1.4-视口
显示Html网页的区域，用来约束Html尺寸（！自动生成）
- meta标签设置视口宽度，制作不同设备宽度的网页
- 手机屏幕尺寸不同，网页宽度为100%
- 网页的宽度和逻辑分辨率尺寸相同
2.百分比布局
- 百分比布局——流式布局
- 效果：宽度自适应，高度固定
3.二倍图（面试）
- 使用Pxcook测量二倍图中元素的尺寸
- 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿
- 二倍图设计稿尺寸：750px
4.Flex布局（非常重要）
4.1-概念：Flex布局/弹性布局：
- 一种浏览器提倡的布局模型
- 布局网页更简单、更灵活
- 避免浮动脱标的问题
4.2-目的：灵活、快速的开发网页
4.2.1-作用：
- 避免浮动布局中脱离文档流现象发生
- Flex布局非常适合结构化布局
4.2.2-设置方式：
- 父元素添加display:flex，子元素可以自动的挤压或拉伸
4.2.3-组成部分：
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴/交叉轴
4.2.4-display：flex显示状态
- 子级一行排列/水平排列
- 水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列
4.3-主轴对齐方式
-
justify-content调节元素在主轴的对齐方式
-
flex-start:默认值，起点开始依次排序
-
flex-end:终点开始依次排序
-
center：沿主轴居中排序
弹性盒子沿主轴均匀排序：
-
space-around：空白间距均匀在弹性盒子两侧
-
space-between：空白间距均分在相邻盒子之间
-
space-evenly：弹性盒子与容器之间间距相等
-
4.4-侧轴对齐方式
-
align-items：stretch
——默认值：弹性盒子沿着主轴线被拉伸至铺满容器（子级无高度）
-
align-items：center
——沿侧轴居中排列
4.5-改变主轴方向：flex-direction
- column 水平——垂直
- row 垂直——水平
.box {
display: flex;
flex-direction: column;
/* 改变主轴方向 从水平改为垂直 */
justify-content: space-around;
height: 600px;
border: 1px solid #333;
}
.box div {
height: 100px;
width: 100px;
background-color: skyblue;
}
.box div:nth-child(2) {
align-self: center;
}
4.6-伸缩比
-
使用flex属性修改弹性盒子伸缩比
- 属性——flex：值
- 取值分类——数值（整数）
-
只占用父盒子剩余尺寸
-
1——50px
-
2——3份
-
3——1份
.box {
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div {
height: 200px;
margin: 0 20px;
background-color: pink;
}
.box div:nth-child(1) {
width: 50px;
}
.box div:nth-child(2) {
/* 占用父级剩余尺寸的份数 */
flex: 3;
}
.box div:nth-child(3) {
flex: 1;
}
4.7-补充
- flex布局下，行内元素可以设置宽高，在flex布局下的行内元素内的行内元素也可以设置宽高且生效
1211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
