咳咳咳,我就不说些没用的了,直接进入正题。下面是这几天的笔记,顺便勉励自己:总结后多练习,理解才是王道。嗯嗯,下面开始了疯狂的粘贴!↓↓↓↓↓↓↓↓↓↓↓
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);
------------区分------------
①子元素排列方向和对齐方式
②是给父元素添加样式,还是给子元素添加样式
|
|