黑马程序员技术交流社区
标题:
前端开发就业班学习小结
[打印本页]
作者:
进gege
时间:
2019-4-10 21:18
标题:
前端开发就业班学习小结
咳咳咳，我就不说些没用的了，直接进入正题。下面是这几天的笔记，顺便勉励自己：总结后多练习，理解才是王道。嗯嗯，下面开始了疯狂的粘贴！↓↓↓↓↓↓↓↓↓↓↓
day01----2D转换==============================================================电脑 PC端页面布局（html+css）
移动端布局（html5+css3）
1.新增语义化标签：<hearder>头<nav>导航<article>内容<section>块<aside>侧边栏<footer>尾部（IE9需要转换为块级元素）
2.新增多媒体标签
<audio>音频标签：<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
1】controls 显示控件
2】autoplay 自动播放（谷歌禁用）
3】loop播放完毕后循环播放
4】不同浏览器支持不同的音频格式，解决办法如下：
<audio>
<source src="sonw.mp3" type="audio/mpeg">
<source src="sonw.ogg" type="audio/ogg">
您的浏览器不支持audio播放
</audio>
<video>视频播放：<video src="" controls="controls" autoplay="autoplay" loop="loop" poster =“media/pig.jpg”></video>
1】controls 显示控件
2】autoplay 自动播放（谷歌禁用，解决办法：添加禁音属性muted）
3】loop播放完毕后循环播放
4】poster 加载时显示的等待图片
4】不同浏览器支持不同的视频格式，解决办法如下：
<video>
<source src="sonw.mp4" type="video/mp4">
<source src="sonw.ogg" type="video/ogg">
您的浏览器不支持video播放
</video>
3.新增表单
新增输入类型type：数字number、手机号tel、搜索search等
新增表单属性：required不能为空、placeholder提示文本（占位符）、autofcous自动获取焦点等、autocomplete显示已填写选项（on、off，一般关闭，须有name值，须成功提交）、multiple（可多选，上传文件时）
4.css3新增属性选择器（disabled属性： 按钮不可点击）
1】属性选择器，权重10
2】标签名[属性名] {}；属性名-属性的名字【不是值】
3】标签名[属性名=“值”]
4】标签名[属性名^="开头"]
5】标签名[属性名$="结尾"]
6】标签名[属性名*="包含"]
5.css3结构伪类选择器（从父元素中选择子元素，父元素 与 ：之间必须加空格）
1】E :first-child{};获取第一个标签
2】E :last-child{};获取最后一个标签
3】E :nth-child(n);获取第n个标签
E :nth-child(even);偶数 2n
E :nth-child(odd);奇数 2n+1
n+5从第5个开始获取
-n+5获取前5个
4】E F:first-child {}; 选择E下面的F元素 与 E的第一个子元素的交集。
5】E F:first-of-type{}; 选择E下面的第一个F元素。
同理还有 last-of-type、nth-of-type。
6.伪元素选择器 (E::before {content="";})
::before在内容里面【前】插入
::after在内容里面【后】插入
content属性不能省略
7.2D转换 transform
translate 移动
1】语法：合写-transform:translate(x,y);分写-translateX:(x);translateY(y);
2】x，y的值可以是百分比，以盒子自身的宽高来移动
3】translate对行内元素无效
4】不影响其他元素的位置
day02----动画================================================================
【2D转换】
1、二维旋转 transform: rotate（45deg）
1】deg度，正值时顺时针旋转，负值时逆时针旋转；
2】默认旋转中心点为盒子中心点（相当于transform-origin：50% 50%；）
1）设置旋转中心点：transform-origin：X Y；
2）可跟方位名词：transform-origin：left bottom；
2、二维缩放 transform: scale（x，y）;
1】X，Y为数字，不跟单位，2就是2倍；0.5就是缩小50%；
2】X为宽，Y为高；等比缩放时，可只填写一个数值；
3】特点：缩放不影响其他盒子，以默认中心点进行缩放，可设置中心点。
3、二维转换综合写法 transform: translate() rotate() scale();
1】位移要放最前面，位移、旋转、缩放；
【动画】
1、制作动画的步骤
1】定义动画 （关键词from等同于0%，to等同于100%）
@keyframes 动画名 {
0% {
}
100% {
}
}
2】调用动画
animation-name: 动画名;
animation-duration: 持续时间;
2、动画序列
1】除0%与100%外，还可以添加多个状态（如25%，50%，75%等等）
3、动画常用属性
1】@keyframes 规定动画
2】animation 属性简写
3】animation-name 调用动画 （必须）
4】animation-duration 动画完成时间 （必须）
5】animation-timing-function 运动曲线
6】animation-delay 规定动画何时开始
7】animation-iteration-count 完成次数，默认是1，还有infinite（无限）
8】animation-direction 下一周期逆播放，默认是normal，可设置alternate（逆播放）
9】animation-play-state 默认是running（运行），可设置；aused（暂停）
10】animation-fill-mode 动画结束后forwards（保持原位置）backwards（回到起始位置）
4、动画属性简写 animation：名称 持续时间 运动曲线 延迟时间 播放次数 倒车 一去不返
animation：myfirst 5s linear 2s infinite alternate；
【注意】
1】简写中不包含animation-play-state
2】animation-play-state：puased；经常与鼠标经过配合使用
3】想要动画走回来，而不是直接跳回来：animation-direcion：alternate；
4】动画结束后，停在结束位置：animation-fill-mode：forwards；
5】opacity 透明度
5、速度曲线的步长属性animation-timing-function：steps（10）；
6、同一个元素加多个动画，用逗号“,”隔开；
day03----3D转换==============================================================
【3D转换】
1、三维坐标系
1】X轴，水平方向，右正，左负；
2】Y轴，垂直方向，下正，上负；
3】Z轴，垂直屏幕，外正，内负；
2、3D位移
1】X,Y,Z可分写，如：transform: translateX(100px)；
2】第二种写法：transform: translateX(100px) translateY(100px) translateZ(100px)；
3】简写：transform: translate3d(x,y,z);
【注意】其中d为小写，并且xyz不能省略，没有就写0
3、透视perspective
1】写到被观察元素的父级元素上（不一定是父亲）
perspective: 1000px; 1000px为视距，近大远小;
2】值的单位为px；
3】有透视才能开启3D空间
4、3D旋转 rotate3d
1】语法：
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotate3d(x,y,z,deg);--了解
如：transform:rotate3d(1,1,0,180deg);对角旋转
2】左手准则，大拇指指向该轴的正方向，其余手指弯曲的方向为旋转正方向；
5、3D呈现 transform-style
1】子元素默认不开启3D立体空间，
transform-style:flat;默认；
transform-style:preserve-3d; 开启3D立体环境；
2】该属性加给父盒子；
6、浏览器私有前缀
1】-moz- 火狐
2】-ms- IE
3】-webkit- safari、chrome
4】-o- Opera
提倡写法：
-webkit-border-radius: 30px 10px;
-moz-border-radius: 30px 10px;
-ms-border-radius: 30px 10px;
// border-radius 一定要放在最后
border-radius: 30px 10px;
day04----流式布局=============================================================
1、视口（了解）
1】布局视口
2】视觉视口
3】理想视口
2、视口标签（理解含义）
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
3、物理像素：分辨率
1】物理像素比
4、二倍图
1】制作图片时制作倍图，显示的时候缩小显示
2】背景图缩放
background-size: width height;
1）只写宽度，等比缩放；可写百分比-相对父盒子
2）cover 等比缩放，完全覆盖（可能有部分显示不全）
3）contain 等比缩放，宽/高铺满盒子将不再拉伸（可能有部分空白区域）
5、技术选型
1】单独制作移动端
2】做响应式页面
6、移动端技术解决方案
1】移动端初始化CSS（normalize.css）
2】兼容性问题 -webkit-
3】清除手机浏览器默认特殊样式
------------------------------------------------------------------------------------------------
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
* {-webkit-tap-highlight-color: transparent;}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {-webkit-appearance: none;}
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
------------------------------------------------------------------------------------------------
4】使用CSS3盒模型
7、CSS3盒模型（box-sizing: border-box;）
1】内边距，边框不影响盒子大小。
2】PC端一般用传统盒模型（box-sizing: content-box;） 移动端用CSS3盒模型；
8、布局方式
1】流式布局（百分比布局）
2】flex布局
3】rem布局
4】bootstarp布局
9、流式布局
1】布局盒子的宽度设置为百分比；
2】设置最大与最小值，保护内容
①宽度最大/最小值max-width/min-width；
②高度最大/最小值max-height/min-height；
10、二倍精灵图
1】在fireworks 里把图缩小一半；
2】在代码里设置背景图片并把背景图片缩小一半；
day05----flex布局=============================================================
1、flex布局原理 display: flex;
通过给父盒子（容器）添加flex属性，来控制子盒子（项目）的位置和排列方式
2、父项常见属性
1】flex-direction: 设置主轴的方向（排列方向）
①flex-direction: row 默认X轴方向为主轴(行），row-reverse翻转（了解）
②flex-direction: column 设置Y轴方向为主轴（列），column-reverse翻转（了解）
2】justify-content: 设置子元素排列方式（对齐：左对齐，右对齐，居中对齐，均匀分布，两边贴边再中间均匀分布）
① flex-start；默认，左对齐 ②flex-end; 右对齐；③center居中对齐；④space-around平均分配；⑤space-between两边对齐后，平均分配；
3】flex-wrap:设置子元素是否换行
①nowrap默认不换行②wrap; 换行
4】align-items:设置【单行】子元素侧轴对齐方式
①flex-start②flex-end③center④stretch（拉伸）
5】align-content:设置【多行】子元素侧轴对齐方式
①flex-start②flex-end③center④space-around⑤space-between⑥stretch（高度平分父元素高度）
6】简写flex-flow: 主轴方向 是否换行;
如：flex-flow: column wrap;
3、子项常见属性（子项大小）
1】flex: 份数；
分配【剩余空间】的份数，如：flex：1；总份数为所有元素flex值之和，如果没有设置flex，默认是0；
2】align-self: 控制自己在侧轴上的排列对齐方式；
①flex-start②flex-end③center
3】order：数值；
默认是0，可设负值，越小越靠前
4、弹性盒子布局步骤：
1】给父盒子添加display: flex;
2】确定主轴方向（排列方向）flex-direction:row/column;
3】确定子元素对齐方式
①主轴方向对齐justify-content
②侧轴方向对齐align-items（单行）align-content（多行）
4】确定子元素的大小flex:数值;（加给子元素本身，份数为所有兄弟子元素flex值的总和）
------------拓展------------
①文字阴影：text-shadow;
②背景渐变：background: -webkit-linear-gradient(方位名词，颜色1，颜色2);
------------区分------------
①子元素排列方向和对齐方式
②是给父元素添加样式，还是给子元素添加样式
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2