【黑马程序员济南】前端与移动开发就业班笔记移动web:day02

点击高亮效果

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
-webkit-tap-highlight-color: transparent;/*清除点击高亮效果*/

在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。

所有盒子以边框开始计算

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
/*设置宽度以边框开始计算*/
-webkit-box-sizing: border-box;
box-sizing: border-box;

在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding或使容器的宽度超出屏幕的宽度产生滚动条。那么我们的解决方案是什么试用css3属性 box-sizing设置所有的盒子重边框开始计算宽度。

Input清除默认的样式

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
/*在移动端怎么清除默认的样式*/
/*在移动端清除浏览器默认样式*/
-webkit-appearance: none;

在移动设备的浏览器当中表单一般会有默认的属性  通过border：none，outline：none是无法完全清楚的，还是会有一些浏览器默认的属性，比如：

内阴影，立体感， -webkit-appearance这个属性指的是设置成 none 可以去除浏览器默认加上的样式

最小宽度和最大宽度的限制

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
max-width: 640px; /* 在行业当中的移动端的设计图一般使用的是640px*/
min-width: 300px;  /*在移动设备当中现在最小的尺寸320px*/

适用：图片比较多的首页，门户，电商等。

作用  保证页面在尺寸比较大的设备当中保证页面的效果也就是清新度

         保证页面在小尺寸的设备当中有较好的布局效果。

Img的下间隙问题

[HTML] 纯文本查看 复制代码

<div>
abcdefghijklmnopqrstuvwxyz
<imgsrc="../images/nv-fy.jpg" alt=""/>
</div>

文字基线默认的baseline 是以X的下边开始的

Img是行内块级元素 它也会有默认的基线对齐。那么和文字一样也会距离底部有一定的间隙。

搜索按钮调用

[HTML] 纯文本查看 复制代码

/**[/align][align=left] * @author 传智播客
 */[/align][align=left]<!--在移动端点击弹出输入法  enter键会显示搜索-->
<form action="#">
    <input type="search"placeholder="提示"/>
</form>

search定义用于输入搜索字符串的文本字段。

在移动端调用输入法的时候会弹出小键盘，键盘一般是enter键，那么在搜索框当中我们要求调用是搜索按钮，那么这样的结构才能调用出来。

结构性伪类选择器

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
.sk_product > li > p:nth-of-type(1){
    color: #d8505c;
}
.sk_product > li > p:nth-of-type(2){
    /*删除线*/
    text-decoration:line-through;
    color: #666;
}

E:first-of-type匹配同类型中的第一个元素E。

E:last-of-type匹配同类型中的最后一个元素E。

E:nth-of-type(n) 匹配同类型中的第n个元素E。

Touch事件

touchstart：当手指触碰屏幕时候触发。

绑定事件的方法：

dom.addEventListener('touchstart',function(e){});

事件返回的e对象包含那些移动端特有的属性：

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

touchmove：当手指在屏幕上滑动时连续触发。

绑定事件的方法：

dom.addEventListener('touchmove',function(e){});

事件返回的e对象包含那些移动端特有的属性：

originalEvent  是jquery 封装的事件。

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

touchend：当手指离开屏幕时触发。

绑定事件的方法：

dom.addEventListener('touchend',function(e){});

事件返回的e对象包含那些移动端特有的属性：

changedTouches 页面上最新更改的所有触摸

touchcancel：系统停止跟踪触摸时候会触发。

这个事件不会经常使用，了解即可。

注意：在touchend事件的时候event只会记录changedtouches

clientX:触摸目标在视口中的X坐标。

clientY:触摸目标在视口中的Y坐标。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

过渡和动画结束事件

transitionEnd   过渡结束后触发。

绑定事件的方法：

dom.addEventListener('webkitTransitionEnd',function(e){ });

dom.addEventListener('transitionEnd',function(e){ });

animationEnd   动画结束后触发。

绑定事件的方法：

dom.addEventListener('webkitAnimationEnd',function(e){ });

dom.addEventListener('animationEnd',function(e){ });

Gesture 事件（不常用）

gesturestart

当一个手指触摸屏幕之后，第二个手指再触摸屏幕时触发。

gesturechange

当上面的事件触发后立即触发。

gestureend

第二根手指离开屏幕时触发，之后将不会再次触发gesturechange。

在event当中会返回另外两个参数

scale 根据两个手指的滑动距离计算的缩放比例 初始1

rotation根据两个手指的滑动距离计算的旋转角度 初始 0

全屏单页面布局

试用百分比的方式：

[CSS] 纯文本查看 复制代码

/**
* @author 传智播客
*/
/*满屏*/
html,body{
    height: 100%;
}

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

【黑马程序员济南】前端与移动开发就业班笔记移动web:day02

点击高亮效果

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
-webkit-tap-highlight-color: transparent;/*清除点击高亮效果*/

在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。

所有盒子以边框开始计算

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
/*设置宽度以边框开始计算*/
-webkit-box-sizing: border-box;
box-sizing: border-box;

在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding或使容器的宽度超出屏幕的宽度产生滚动条。那么我们的解决方案是什么试用css3属性 box-sizing设置所有的盒子重边框开始计算宽度。

Input清除默认的样式

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
/*在移动端怎么清除默认的样式*/
/*在移动端清除浏览器默认样式*/
-webkit-appearance: none;

在移动设备的浏览器当中表单一般会有默认的属性  通过border：none，outline：none是无法完全清楚的，还是会有一些浏览器默认的属性，比如：

内阴影，立体感， -webkit-appearance这个属性指的是设置成 none 可以去除浏览器默认加上的样式

最小宽度和最大宽度的限制

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
max-width: 640px; /* 在行业当中的移动端的设计图一般使用的是640px*/
min-width: 300px;  /*在移动设备当中现在最小的尺寸320px*/

适用：图片比较多的首页，门户，电商等。

作用  保证页面在尺寸比较大的设备当中保证页面的效果也就是清新度

         保证页面在小尺寸的设备当中有较好的布局效果。

Img的下间隙问题

[HTML] 纯文本查看 复制代码

<div>
abcdefghijklmnopqrstuvwxyz
<imgsrc="../images/nv-fy.jpg" alt=""/>
</div>

文字基线默认的baseline 是以X的下边开始的

Img是行内块级元素 它也会有默认的基线对齐。那么和文字一样也会距离底部有一定的间隙。

搜索按钮调用

[HTML] 纯文本查看 复制代码

/**[/align][align=left] * @author 传智播客
 */[/align][align=left]<!--在移动端点击弹出输入法  enter键会显示搜索-->
<form action="#">
    <input type="search"placeholder="提示"/>
</form>

search定义用于输入搜索字符串的文本字段。

在移动端调用输入法的时候会弹出小键盘，键盘一般是enter键，那么在搜索框当中我们要求调用是搜索按钮，那么这样的结构才能调用出来。

结构性伪类选择器

[CSS] 纯文本查看 复制代码

/**
 * @author 传智播客
 */
.sk_product > li > p:nth-of-type(1){
    color: #d8505c;
}
.sk_product > li > p:nth-of-type(2){
    /*删除线*/
    text-decoration:line-through;
    color: #666;
}

E:first-of-type匹配同类型中的第一个元素E。

E:last-of-type匹配同类型中的最后一个元素E。

E:nth-of-type(n) 匹配同类型中的第n个元素E。

Touch事件

touchstart：当手指触碰屏幕时候触发。

绑定事件的方法：

dom.addEventListener('touchstart',function(e){});

事件返回的e对象包含那些移动端特有的属性：

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

touchmove：当手指在屏幕上滑动时连续触发。

绑定事件的方法：

dom.addEventListener('touchmove',function(e){});

事件返回的e对象包含那些移动端特有的属性：

originalEvent  是jquery 封装的事件。

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

touchend：当手指离开屏幕时触发。

绑定事件的方法：

dom.addEventListener('touchend',function(e){});

事件返回的e对象包含那些移动端特有的属性：

changedTouches 页面上最新更改的所有触摸

touchcancel：系统停止跟踪触摸时候会触发。

这个事件不会经常使用，了解即可。

注意：在touchend事件的时候event只会记录changedtouches

clientX:触摸目标在视口中的X坐标。

clientY:触摸目标在视口中的Y坐标。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

过渡和动画结束事件

transitionEnd   过渡结束后触发。

绑定事件的方法：

dom.addEventListener('webkitTransitionEnd',function(e){ });

dom.addEventListener('transitionEnd',function(e){ });

animationEnd   动画结束后触发。

绑定事件的方法：

dom.addEventListener('webkitAnimationEnd',function(e){ });

dom.addEventListener('animationEnd',function(e){ });

Gesture 事件（不常用）

gesturestart

当一个手指触摸屏幕之后，第二个手指再触摸屏幕时触发。

gesturechange

当上面的事件触发后立即触发。

gestureend

第二根手指离开屏幕时触发，之后将不会再次触发gesturechange。

在event当中会返回另外两个参数

scale 根据两个手指的滑动距离计算的缩放比例 初始1

rotation根据两个手指的滑动距离计算的旋转角度 初始 0

全屏单页面布局

试用百分比的方式：

[CSS] 纯文本查看 复制代码

/**
* @author 传智播客
*/
/*满屏*/
html,body{
    height: 100%;
}

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830