【前端学习笔记】移动web-黑马程序员学习笔记
移动web-黑马程序员学习笔记
- 1 字体图标
- 2 平面转换
- 2.1 绝对定位元素居中:
- 2.2 双开门效果
- 2.3 旋转效果
- 2.4* 转换原点
- 2.5 多重转换效果
- 2.6 缩放
- 3* 渐变
- 4 空间转换(3D转换)
- 4.1 空间位移
- 4.2 透视效果
- 4.3 空间旋转
- 4.4 立体呈现
- 4.5 缩放
- 5 动画
- 5.1 精灵动画
- 5.2 无缝动画:走马灯
- 6 移动端特点
- 7 百分比布局
- 8 Flex
- 8.1 Flex布局:
- 8.2 侧轴
- 8.3 伸缩比
- 8.4 改变元素排列方向
- 8.5 弹性盒子换行
- 9 移动适配
- rem
- 9.1 添加媒体查询
- 9.2 flexible.js
- 9.3 Less语法
- 1.注释
- 2.计算
- 3.嵌套
- 4.变量
- 5.导入
- 6.导出
- vw/vh(用法更简洁)
- 10 响应式布局
- 10.1 媒体查询
- 1. 媒体特性常用写法:
- 2. 书写顺序
- 3. link属性
- 4. 隐藏
- 10.2 BootStrap
- 一些设计过程中的常用知识点
1 字体图标
作用:使用字体图标技巧实现网页中简洁的图标效果
展示的是图标,本质上是字体,处理简单的颜色单一的图片。
每个网站的标题栏图标:网站网址+/favicon.ico
素材库: Iconfont:https://www.iconfont.cn/
使用字体图标 - 类名
- 引入字体图标样式表
<link rel="stylesheet" href="./iconfont/iconfont.css">
- 调用图标对应的类名,必须调用2个类名
<body><i class="iconfont icon-favorites-fill"></i>
</body>
如果想要的图标没有,可以问设计师要svg格式的图,上传后再下载即可。
2 平面转换
作用:使用transform属性实现元素的位移、旋转、缩放等效果
.father:hover .son {transform: translate(100px, 50px);/* 百分比: 盒子自身尺寸的百分比 */transform: translate(100%, 50%);/* 只给出一个值表示x轴移动距离 */transform: translate(100px);transform: translateY(100px);
}
2.1 绝对定位元素居中:
步骤:
- 设置父级和子级宽高,设置子绝父相;
- 设置子级位置
left:50%;top:50%;
,子级左上角在父级中心点。 - 微调位置,使子级中心点在父级中心:
transform: translate(-50%, -50%);
.father {position: relative;width: 500px;height: 300px;border: 1px solid #000;
}.son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 203px;height: 100px;background-color: pink;
}
2.2 双开门效果
向左侧移动盒子自身宽度大小
向右侧移动盒子自身宽度大小
<head><style>* {margin: 0;padding: 0;}/*背景盒子设置,采用背景图*/ .box {width: 1366px;height: 600px;margin: 0 auto;background: url('./images/bg.jpg');/* 关键细节1:超出父级的隐藏 */overflow: hidden;}.box::before,.box::after {float: left;content: '';width: 50%;height: 600px;background-image: url(./images/fm.jpg);/*关键细节2:设置转换时间*/transition: all .5s;}.box::after {/*关键细节3:要背景的右半部分*/background-position: right 0;}/* 鼠标移入的时候的位置改变的效果 */.box:hover::before {transform: translate(-100%);}.box:hover::after {transform: translateX(100%);}</style>
</head>
<body><div class="box"></div>
</body>
2.3 旋转效果
必须有过渡属性,旋转才能生效
img {width: 250px;/* 旋转效果必须设置过渡 */transition: all 2s;
}
img:hover {/* transform: rotate(角度); *//* 顺 */transform: rotate(360deg);/* 逆 */transform: rotate(-360deg);
}
2.4* 转换原点
作用:使用transform-origin属性改变转换原点
默认旋转圆点是盒子中心点,旋转后会改变坐标轴向,修改效果设置在标签上,hover时设置旋转效果
transform-origin: 原点水平位置 原点垂直位置;
/*transform-origin: left、top、right bottom center;*/
transform-origin: left bottom;
2.5 多重转换效果
边走边转,顺序不能反
transform: translate(600px) rotate(360deg);
2.6 缩放
使用scale改变元素尺寸
使用时要注意transform设置定位和缩放会存在层叠特性,导致部分设置不生效
/*transform: scale(x轴缩放倍数, y轴缩放倍数);*/
/*transform: scale(缩放倍数)*/
/* scale值大于1表示放大, scale值小于1表示缩小*/
transform: scale(1.2);
3* 渐变
设置背景透明度渐变的步骤:
1.用伪元素书写盒子控制位置,设置渐变效果并设置过渡属性和opacity:0;
2.用hover显示,设置opacity:1
/*background-image: linear-gradient(color1,color2,color3);*/
background-image: linear-gradient(pink,green,blue);
/*常用为透明度变化*/
background-image: linear-gradient(transparent,rgba(0,0,0, .6));
设置图片大小渐变的步骤:
1.给图片设置过渡属性transition:all 0.5s
,给hover设置放大属性transform:scale(1.2)
2.给父元素设置overflow:hidden
,使图片超出的部分隐藏
设置文字移动渐变步骤:
hover设置txt的位置移动transform:translate()
4 空间转换(3D转换)
作用:使用transform属性实现元素在空间内的位移、旋转、缩放等效果
Z轴的变化需要设置透视效果才能看到
4.1 空间位移
加在hover上
.box:hover {/* transform: translate3d(50px, 100px, 200px); */transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);
}
4.2 透视效果
作用:产生近大远小,近清晰,远模糊的效果
标签加在父级上,取值为800-1200之间的数值
数值给的小代表距离屏幕近,给的大代表距离屏幕非常远
body {perspective: 1000px;/* perspective: 200px; *//* perspective: 10000px; */}
4.3 空间旋转
都加在hover上
绕中心旋转,可以用以下命令:
transform:rotateZ(值)
或者transform: rotate(360deg);
绕x轴旋转:
transform: rotateX(60deg);
transform: rotateY(60deg);
左手法则:判断旋转方向,左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向
4.4 立体呈现
构建立体图形,给盒子设置该属性
transform-style: preserve-3d;
4.5 缩放
空间缩放
transform: scale3d(0.5,1.1,2);
5 动画
- 声明动画
/*animation: 动画名称 动画时间*/
animation: change 1s;
- 定义动画
/*变化两步*/
@keyframes change {from {width: 200px;}to {width: 600px;}
}
/*多个动画过程*/
/* 百分比指的是动画总时长的占比 */
@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}
}
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
速度曲线:steps(3)分三阶段执行
重复次数:infinite(无限循环)/3
动画方向:alternate为反向
执行完毕时的状态:forwards最后一帧状态/backwards第一帧状态
animation-name: 动画名称;
animation-duration: 动画时间;
animation-delay: 延迟时间;
animation-fill-mode: 动画执行完毕时状态;
animation-timing-function: 速度曲线;
animation-iteration-count: 重复次数;
animation-direction: 动画执行方向;
animation-play-state: 暂停动画;
5.1 精灵动画
使用steps实现逐帧动画,制作步骤
- 准备显示区域,设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图
.box {/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */width: 140px;height: 140px;border: 1px solid #000;background-image: url(./images/bg.png);
}
- 定义动画
改变背景图的位置,移动的距离就是精灵图的宽度
@keyframes move {from {background-position: 0 0;}to {/* 1680: 精灵图的宽度 */background-position: -1680px 0;}}
- 使用动画
添加速度曲线steps(N),N与精灵图上小图个数相同,添加无限重复效果
.box {animation: move 1s steps(12) infinite;
}
- 想让小人跑远一些,在精灵动画的同时添加盒子位移动画
forwards:停留在最终状态
.box {animation: run 1s forwards;
}
@keyframes run {/* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 *//* from {transform: translateX(0);} */to {transform: translateX(800px);}
}
5.2 无缝动画:走马灯
- 所有动画放在一行,显示区域可以放几张图,最后就多加上几张图,ul宽度设置所有的图宽度
- 定义动画
@keyframes move
,给ul设置动画animation:move 5s infinite linear
6 移动端特点
pc端和移动端网页区别:pc端有版心,版心居中
移动端:网页充满屏幕
分辨率:
物理分辨率出厂就被固定,不可被改变。
逻辑分辨率:软件决定的,可以改变,写代码参考的分辨率
视口:使用meta标签设置视口宽度,制作适配不同设备宽度的网页
- 手机屏幕尺寸都不同,网页宽度为100%
- 网页的宽度和逻辑分辨率尺寸相同
- 默认情况下,网页宽度和逻辑分辨率不同,默认网页宽度为980px,移动端都是375px
<meta name="viewport" content="width=device-width, initial-scale=1.0">
二倍图:一般给的都是二倍图,将设计图改为2x,再测量进行开发
7 百分比布局
百分比布局也叫流式布局,实现效果为宽度自适应,高度固定
.toolbar {/* 百分比布局 流式布局 */width: 100%;height: 50px;}.toolbar li img {height: 100%;}.toolbar li {float: left;width: 20%;height: 50px;}
8 Flex
子级浮动脱标,父级必须设置宽度,采用flex可以不设置浮动,也不会脱标
给父级设置display: flex;
.box {display: flex;/* height: 200px; */border: 1px solid #000;
}
Flex布局是一种浏览器提倡的布局模型,可以避免浮动脱标的问题,布局网页更简单灵活,非常适合结构化布局。
但是Flex布局仅适用于高 版本浏览器,可以查询caniuse.com
搜索兼容性
8.1 Flex布局:
- 弹性容器
- 弹性盒子
- 主轴:默认主轴在水平,弹性盒子都是沿着主轴排列
/* 居中 */
justify-content: center;
/* 间距在弹性盒子(子级)之间 */
justify-content: space-between;
/* 所有地方的间距都相等 */
justify-content: space-evenly;
/* 间距加在子级的两侧 */
/* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;
8.2 侧轴
使用align-items
调节元素在侧轴的对齐方式,添加到弹性容器上。
当盒子没给高,按内容大小撑开高度,
给了宽高,则对应给定的宽高
/* 居中 */
align-items: center;
/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度,高度为父级的100%) */
align-items: stretch;
/* 单独设置某个弹性盒子的侧轴对齐方式 */
.box div:nth-child(2) {align-self: center;
}
8.3 伸缩比
单独设置在某一个子盒子上,去掉剩下和盒子宽度剩下的宽度独占份数
flex:1;
8.4 改变元素排列方向
主轴默认是水平方向, 侧轴默认是垂直方向
/*修改主轴方向*/
flex-direction:column;
/*视觉效果:实现盒子水平居中*/
align-items:center;
8.5 弹性盒子换行
当一行显示不完时,flex可以自动将子级压缩成一行
实现换行:flex-wrap:wrap
/* 和主轴对齐方式一样 */
align-content: center;
align-content: space-around;
align-content: space-between;
9 移动适配
- rem:目前多数企业在用的解决方案
- vw/vh:未来的解决方案
目标:使用rem单位设置i网页元素的尺寸,屏幕尺寸不同,最终呈现出来的大小也不同
1rem = 1HTML字号大小
rem
9.1 添加媒体查询
1. 手机屏幕大小不同,分辨率不同, 如何设置不同的HTML标签字号?
可以检测视口的宽度,编写差异化的css样式,当某个条件成立, 执行对应的CSS样式。
<style>/* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */@media (width:375px) {html {font-size: 40px;}}@media (width:320px) {html {font-size: 30px;}}
</style>
2. 设备宽度不同,HTML标签字号设置多少合适?
目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10
3. 如何确定rem数值?
- 根据视口宽度,设置不同的HTML标签字号
查看设计稿宽度–确定参考设备宽度(视口宽度)–确定基准根字号(1/10视口宽度) - rem单位的尺寸
rem单位尺寸=px单位尺寸/基准根字号(取小数点后三位)
9.2 flexible.js
使用flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果
优点:rem需要多个视口,移动端尺寸较多,每一个都需要设置太麻烦
写在body最下边。
<body><script src="../js/flexible.js"></script>
</body>
9.3 Less语法
使用less运算完成px到rem单位的转换
less是一个CSS预处理器,后缀为.less,网页引入对应的css文件。
1.注释
单行注释://
块注释:/**/
2.计算
.less
.box {width: 100 + 10px;width: 100 - 20px;width: 100 * 2px;// 除法,两种表示方法// 68 > remwidth: (68 / 37.5rem);//推荐用法height: 29 ./ 37.5rem;
}
对应的.css:
.box {width: 110px;width: 80px;width: 200px;width: 1.81333333rem;height: 0.77333333rem;
}
3.嵌套
.less
.father {width: 100px;.son {color: pink;// & 表示当前选择器&:hover {color: green;}}&:hover {color: orange;}
}
对应的.css:
.father {width: 100px;
}
.father .son {color: pink;
}
.father .son:hover {color: green;
}
.father:hover {color: orange;
}
4.变量
能够使用Less变量设置属性值。
.less
//1.定义变量
@colora:pink;
.box {color:@colora;
}
.aa {background-color:@colora;
}
对应的.css:
.box {color: pink;
}
.aa {color: pink;
}
5.导入
.less内容:
@import 'less路径';
6.导出
less导出CSS文件
**方法1:**配置EasyLess插件, 实现所有Less有相同的导出路径
在less.compile当中添加导出路径:
"out": "../css/";
**方法2:**控制当前Less文件导出路径
/*导出到qqq文件夹,改名字为daqiu.css*/
// out: ./qqq/daqiu.css
/*导出到abc文件夹,不改名字*/
// out: ./abc/
不想导出:
// out: false
vw/vh(用法更简洁)
- vw=1/100视口宽度
- vh=1/100视口高度
不允许两者混用,只能用单次。
10 响应式布局
10.1 媒体查询
目标:能够根据设备宽度的变化,设置差异化样式
1. 媒体特性常用写法:
/* 视口宽度小于等于768px, 网页背景色是粉色 */
@media (max-width: 768px) {body {background-color: pink;}
}
/* 视口宽度大于等于1200px, 网页背景色是skyblue */
@media (min-width: 1200px) {body {background-color: skyblue;}
}
2. 书写顺序
能够根据设备宽度的变化,设置差异化样式
- min-width(从小到大)
- max-width(从大到小)
/*视口宽度 >= 768px,网页背景色是 粉色视口宽度 >= 992px,网页背景色是 绿色视口宽度 >= 1200px,网页背景色是 skyblue
*/
@media (min-width: 768px) {body {background-color: pink;}
}
@media (min-width: 992px) {body {background-color: green;}
}
@media (min-width: 1200px) {body {background-color: skyblue;}
}
3. link属性
外链式css属性:media里一定要加小括号
<!-- 视口宽度 >= 992px,网页背景色为粉色 -->
<!-- 视口宽度 >= 1200px,网页背景色为绿色 -->
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
4. 隐藏
当视口宽度发生变化时,显示的内容发生改变,部分内容隐藏
<head><style>/* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */@media (max-width: 768px) {.left {display: none;}}</style>
</head>
<body><div class="box"><div class="left">bbbbbb</div><div class="main">aaaaa</div></div>
</body>
10.2 BootStrap
UI框架:将常见效果进行统一封装后形成的一套代码, 例如:BootStrap,使用 BootStrap框架快速开发响应式网页。
BootStrap3默认将网页分成12等份
栅格系统布局:
在BootStrap.com
里找到合适的样式,支持定制,下载导入,再将对应的盒子添加对应效果的类即可。
一些设计过程中的常用知识点
- 行内标签(a,span,i,伪元素)设置宽高不生效,需要调整显示类型或者加定位,定位可以让盒子具备行内块属性,宽高生效;调整显示类型为块级(单独占一行)或者行内(标签在一行排列,但是换行使会存在一个小间距,比较麻烦),可以采用flex定位,加宽高可以生效。
- 想让某元素隐藏,设置:
opacity: 0;
或者display:none;
background-size:cover
:设置背景的时候,图片等比例缩放,图片可以完全覆盖整个盒子,可能会导致图片显示不全;
background-size:contain
:设置背景,图片等比例缩放,当宽度或者高度和盒子尺寸相等,图片就不再缩放。- 需要替换的数据必须单独放一个标签(例如移动布局中产品信息,价格等信息);可以点击跳转的标签,都先给一个a标签再嵌套;图上压的字通常需要用子绝父相来定位(给图像设置相对定位,文字设置绝对定位);一般字体图标用
i
标签加类名显示,字体图标旁边的字用span
,整体用p
标签包裹,
<p><span>文字</span><i class="iconfont 类名"></i>
</p>
- 单个文字或盒子以及图片设置居中效果:
垂直居中:line-height: 行高; 水平居中:text-align:center
- 做选项卡的时候,tab: 菜单的个数要和内容的个数相等的
- header加固定定位会脱标,要在下边显示内容,可以设置一个padding
- 弹性盒子换行:
flex-wrap: wrap;
- 企业网页版或者网页较少可以修改为响应式布局,其余一律改不了。
- 单行文字溢出时显示省略号:给文字设置
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
再给文字父级设置:
flex:1;
width:0;
给弹性盒子宽度设置为0.则多出的文字就不会撑开盒子。
【前端学习笔记】移动web-黑马程序员学习笔记相关推荐
- 【C++学习汇总】【黑马程序员】
[C++学习汇总] 1 黑马程序员 2 深蓝学院 3 自发式收集学习 1 黑马程序员 [C++][第一篇][黑马 p84 - p105 ][引用][重载][类和对象-struct.class] [C+ ...
- [黑马程序员C++笔记]P72-P83通讯录管理系统
目录 系统需求 1.菜单功能 2.退出功能 3.添加联系人 (1)设计联系人结构体 (2) 设计通讯录结构体 (3)main函数中创建通讯录 (4)封装添加联系人函数 (5 ...
- [黑马程序员C++笔记]P72-P83通讯录管理系统总体概览
系统需求 通讯录是一个可以记录亲人.好友信息的工具. 本教程主要利用C++来实现一个通讯录管理系统 系统中需要实现的功能如下: 添加联系人:向通讯录中添加新人,信息包括(姓名.性别.年龄.联系电话.家 ...
- 黑马程序员jvm笔记总集
黑马程序员jvm笔记(一)–程序计数器 虚拟机栈 堆 黑马程序员jvm笔记(二)–方法区 串池 直接内存 黑马程序员jvm笔记(三)–垃圾回收部分心得 黑马程序员jvm笔记(四)–字节码部分心得 黑马 ...
- SpringCloud学习笔记,课程源自黑马程序员,笔记持续更新中...
@SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式: 学习内容 1.服务拆分-服务远程调用: 2.搭建eureka服务: 2.1.eureka服务注册-client 2 ...
- 如何系统学习一门编程语言? | 黑马程序员
一.从认识编程语言开始: 语言有很多种,包括汉语.英语.法语.韩语等,尽管输出的形式不同,但可以达到同样的目的.同样,我们也可以通过「语言」来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言 ...
- [黑马程序员C++笔记]P99-P104类和对象-封装
视频地址:黑马程序员匠心之作|C++教程从0到1入门编程,学习编程不再难_哔哩哔哩_bilibili 目录 P99类和对象-封装-属性和行为作为整体 P100类和对象-封装-案例-设计学生类 P101 ...
- 黑马程序员C++笔记
C++ 课程链接: 黑马程序员匠心之作|C++教程从0到1入门编程,学习编程不再难_哔哩哔哩_bilibili 一.C++基础语法 1.变量和常量数据 1.1第一个C++程序 编写一个C++程序总共分 ...
- 黑马程序员_MongoDB笔记
根据黑马程序员的课程资料整理所得,仅用于学习使用,如有侵权,请联系删除 1.MongoDB简单介绍 1.1 MongoDB应用场景 应对三高需求 High performance - 对数据库高并发读 ...
- 黑马程序员SSM_MybatisPlus笔记(自用)
MP_1_MybatisPlus简介 1.入门案例 MybatisPlus(简称MP)是基于MyBatis框架基础上开发的增强型工具,旨在简化开发.提供效率. 开发方式:基于SpringBoot使用M ...
最新文章
- 虚拟化之安装Xen实例
- 【GAN优化】解决模式崩溃的两条思路:改进优化和网络架构
- 数据仓库如何实现湖仓一体数据分析?
- SQLServer用存储过程实现插入更新数据
- Python 面向对象 实例方法 属性 (上)
- OSI七层模型都是什么?
- 收藏 | PyTorch实现各种注意力机制
- Wireshark实战分析值DNS协议(二)
- Zipkin-1.19.0学习系列2:Nodejs范例(Client Send,Client Receive))
- linux平台h5手游源码下载,十年经典大天使之剑H5手游源码手工端+内充+搭建教程...
- 大学计算机专业用ipad pro够用吗,苹果iPad Pro上很合适学生党的几个专业App
- windows注册表启动项
- LOVE2D android竖屏的问题
- 【统计学】统计学专业术语
- a到z的ascii码值是多少_c语言 ASCLL码中 A~Z和a~z是多少
- python设置变量age和tall的值、编写一个_Python变量学习
- 2023年,最新最权威的上海Java培训机构排行榜出炉!
- 基于51单片机定时器计数+74HC595移位寄存器+8位数码管时钟
- 世界上应用最广泛的算法之一的卡尔曼滤波算法原理-从放弃到精通-无人机/机器人应用
- 【微信开发】---- 公众号支付
热门文章
- vue调用摄像头拍照
- 频谱仪使用方法图解_【康复技术】肌内效贴布使用方法,肌内效贴布贴法图解...
- html布局之 图标文字混排
- js 腾讯地图 逆地址解析
- 苹果手机和android的对比度,扫盲:安卓手机2000万像素为啥不如苹果手机800万像素?...
- 语音对讲软件_转发信息效率太低?还不赶紧使用微信语音转播软件?
- wordpress网站分类列表页、详情页、单页、模板
- python太极拳论词云图
- 【拿来就用】20款婚礼婚庆网站模板, 轻松打造幸福满满的网站设计
- PHP中实现页面跳转的方式(php跳转,js跳转,html跳转)