8.6 一周学习总结

2017-08-06 20:40 之晴阅读(145) 评论(0) 收藏举报

一、CSS3动画使用：

1、声明一个关键帧（动画）：@keyframes name{
from{}
to{}
}
阶段的写法:①直接使用from-to的写法
②0%-100%，但开头和结尾必须是0%和100%

2、在CSS选择器中，使用animation调用声明好的动画：
animation-name:动画名称，声明的关键帧名字
animation-duration：动画持续时间
animation-timing-function：动画速度曲线，常选ease
animation-delay：动画开始的时间，延迟时间
animation-iteration-count：动画播放次数，默认为1，infinite：无限次循环播放.
animation-direction：动画在下一个是否逆向播放，默认为normal，表示不进行逆向播放；
alternate表示下一次将逆向播放(100%~0%)
animation-fill-mode：表示动画结束后停留在何种状态，要使用该属性，动画执行次数必定是有限次，
forwards:停留在结束状态
backwarks:停留在初始状态，默认效果

animation-name和Animation-duration必须设置，其他选填
animation可设置多个动画，多个动画之间用逗号分隔，animation：frames1 1s,frames2 2s...

二、display

display:设置元素以何种状态显示，可选值：
none：隐藏元素
block：显示为块级元素
inline：显示为行级元素
inline-block：显示为内联块级元素。本身将是一个行级元素，但是拥有块级元素的所有属性，例宽度、高度、margin、padding等。
常见的inline-block级别的标签：<img />、 <input>、<textarea></textarea>、<td></td>

隐藏一个元素的方式：
1、宽度或高度设为0px，配合overflow：hidden
2、display：none，显示display：block；
3、opacticy:0; 设为全透明，但元素空间还在
4、visibility:hidden;隐藏元素，元素空间依然占据，与opacticy：0;效果很像，显示visibility隐藏的元素，visibility:visible;

三、CSS3属性

1、 CSS3新增属性前缀：

Chrome、Safari：-webkit- 谷歌、苹果
Opera:-o- 欧朋
Firefox:-moz- 火狐
IE：-ms-

2、CSS3长度单位:
①px：像素，长度固定，表是占分辨率的几个像素点
②%：表示相对于默认值的百分比，浏览器默认16px
③em：与元素字号挂钩
④rem：与根元素的字号挂钩，与<html>标签的font-size挂钩，如果不设置，则默认字号为16px

四、CSS3背景属性：

1、background-clip: 设置背景图或背景色的裁切显示区域

border-box:从边框外缘开始显示
padding-box:从边框内缘开始显示
content-box:从文字内容区域开始显示

不再显示区域的背景图或背景色，会被裁切掉不显示，背景图与背景色一同裁掉，只负责裁切出显示区域，并不关心背景图定位在哪

2、background-origin：设置背景图左上角从哪里开始定位
border-box:背景图左上角在边框外缘
padding-box:背景图左上角在边框内缘
content-box:背景图左上角在文字内容区

不会改变背景图显示区域大小，只是决定背景图的左上角从哪里开始定位

3、background-attachment:背景图的附着方式
scoll:默认值，背景图跟随区域滚动
fixed：背景图充满整个区域，并且背景图固定，不随滚动条滚动

4、background缩写形式： background-color background-image background-repeat background-attachment background-position

五、transition:过渡属性，不可写在hover、active等事件中，接受四个属性值

1、设置哪个CSS属性参与过渡，可以指定all或none
2、过渡时间长短，通常0.3s、0.5s
3、过渡样式效果，通常选ease
4、过渡延时几秒后开始，可以省略不写

可以同时定义多个过渡效果，用逗号隔开,例如: transition: width .5s ease,height 1.5s ease;

六、transform:定义变换属性，常用变换函数

1、translate(200px 300px);2D平移，第一个参数为X轴平移距离，第二个为Y轴平移距离，若不写第二个参数，则默认为0
2、scale(1.1),缩放，第二个不写默认等于第一个
3、rorate(90deg);绕着中心点转,默认绕z轴转，还可以绕X轴rorateX()、Y轴转rorateY()
4、transform-origin:定义变换起点，常用于旋转变换，可选值：left、center、right，bottom、center、top，也可直接指定X、Y轴坐标点，第一个数为X轴

绕右下角转90度 :
transform:rorate(90deg);
transform-origin:right bottom;

5、skew(20deg,20deg);斜切，第一个数对应X轴扭曲，第二个数对应Y轴扭曲

缩写：transform： skew(20deg) scale(1.1) translate(200px) 函数之间用空格分离

七、ViewPort基本知识

1、设置布局ViewPort的各种信息：
①width=device-width；设置viewpoint视口宽度等于设备宽度
②initial-scale=1；网页默认缩放比为1(网页在手持设备上，不会进行默认缩放)
③minimum-scale=1 网页最小缩放比为1
④maximum-scale=1 网页最大缩放比为1
⑤user-scalable=no 禁止用户手动缩放网页的 (IOS10+ 的设备失效)

在手机站以及响应式网站的制作中，网页必须添加下述viewpoint的设置语句

2、手机端打电话 <a href="tel://13181621008">打电话给13181621008</a>

手机端发短信 <a href="sms://13181621008">发短信给13181621008</a>

3、禁止设备将手机号、邮箱进行识别，取消点击拨打电话等事件
<meta name="format-detection" content="telephone=no,email=no"/>

4、iOS 添加到主屏幕时，WebAPP的标题
<meta name="apple-mobile-web-app-title" content="杰小瑞的APP">

5、IOS添加到主屏幕时，启用WebAPP的全屏模式，删除顶端地址栏和底部工具栏

6、IOS 添加到主屏幕时，WebApp的顶部状态栏颜色：
black：黑色
white：白色
black-translucent: 半透明。 (当设置为半透明时，网页将充满整个屏幕，顶部透明的状态栏将盖住网页最上方一小条)
<meta name="apple-mobile-web-app-status-bar-style" content="black">

7、IOS添加到主屏幕时，WebAPP的图标
<link rel="apple-touch-icon-precomposed" href="https://m.360buyimg.com/mobilecms/s80x80_jfs/t5965/339/3633548361/13799/cd4d0416/5954cf81N3294a71c.png" />

8、设置浏览器，使用最新的IE或Chrome去编译；
>>> 这句设置语句，不是手机端专用，一般PC网页均需要设置。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

八、手机端字体样式

1、一般手机端不支持微软雅黑字体。
2、中文字体一般不设置，使用系统默认即可。
3、英文字体一般设置为font-family: helvetica;

九、
1、设置用户不能选中文本

①手机端不能长按选择；
②PC端不能用鼠标选择；
-webkit-user-select: none;
-moz-user-select: none;

2、去除表单的默认外观，手机、PC均可使用

input{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
color:red;
}

3、设置placeholder的属性

input::-webkit-input-placeholder {
color: red;
}
input:focus::-webkit-input-placeholder {
color: blue;
}
input:-ms-input-placeholder { // IE10+
color: red;
}
input:-moz-placeholder { // Firefox4-18
color: red;
}
input:focus::-moz-placeholder { // Firefox19+
color: red;
}

4、禁止超链接和图片，长按时弹出菜单
img,a{
-webkit-appearance:none;
}

刷新页面返回顶部

之晴

8.6 一周学习总结

About