精华内容
下载资源
问答
  • @echo off taskkill /f /im explorer.exe CD /d %userprofile%\AppData\Local DEL IconCache.db /a ...桌面新建文本,完整复制代码后粘贴进去保存,然以后修改后缀未xx.bat 最后确定并点击运行即可。 ...
    @echo off 
    taskkill /f /im explorer.exe
    CD /d %userprofile%\AppData\Local
    DEL IconCache.db /a
    start explorer.exe
    echo 执行完成;

    桌面新建文本,完整复制代码后粘贴进去保存,然以后修改后缀未xx.bat 最后确定并点击运行即可。

    展开全文
  • Webstorm图标突然空白,不显示图标 解决方式 执行一个.bat文件 具体操作:可以在桌面新建一个.txt文件,然后更改后缀名为.bat文件,右键点击该文件,以管理员的身份运行即可 taskkill /im explorer.exe /f cd /d...

    问题

    Webstorm的图标突然变空白,不显示图标

    解决方式

    执行一个.bat文件
    具体操作:可以在桌面新建一个.txt文件,然后更改后缀名为.bat文件,右键点击该文件,以管理员的身份运行即可

    taskkill /im explorer.exe /f
    cd /d %userprofile%\appdata\local
    del iconcache.db /a
    start explorer.exe
    exit
    
    展开全文
  • 快捷键和webstorm使用技巧 4 第一章 8 知识体系介绍 8 (一)HTML标签-Day1 8 img标签 8 input标签 8 < a href>标签 9 列表标签 9 表单标签(常用于登录注册) 10 样式/节(用的最多的标签之一 60%-70%) 10 ...

    基于《撩课-玩转H5大前端》 3
    快捷键和webstorm使用技巧 4
    第一章 8
    知识体系介绍 8
    (一)HTML标签-Day1 8
    img标签 8
    input标签 8
    < a href>标签 9
    列表标签 9
    表单标签(常用于登录注册) 10
    样式/节(用的最多的标签之一 60%-70%) 10
    HTML5新增的标签 10
    标签之间的关系 11
    站点图标/网站缩略logo标志转换网站 11
    导入站点图标 11
    Meta标签的属性补充 11
    河马牙医网页开发过程 12
    第二章 13
    (二)CSS样式-Day2 13
    CSS选择器 13
    标签类型划分 18
    (1)块级标签: 18
    (2)内联(行内)标签: 18
    (3)块级-内联(行内)标签 18
    (4)块元素与内联元素相互转换 18
    块属性 19
    盒子模型: 19
    padding: 20
    浮动 21
    标签居中 22
    vertical-align属性: 22
    (三)CSS常用属性-Day3 23
    可继承属性和不可继承属性 23
    visibility 23
    cursor[ˈkɜːrsər](ker sir):设定要显示的光标类型 23
    字体 23
    字体粗细 24
    字体风格(是否倾斜) 24
    设置首行缩进 24
    转换字母大小写 24
    list-style(列表属性) 24
    (overflow(控制内容溢出的情况) 25
    line-height 25
    box-sizing 25
    a标签的空隙问题 25
    行高和行间距 25
    (四)页面布局-Day4 27
    定位 27
    层级z-index 28
    圆角border-radius 28
    背景 28
    背景图片平铺(重复) 29
    背景图片位置 29
    背景图片尺寸 29
    背景图片是否随页面滚动background-attachment 30
    动画 31
    Mac桌面开发 31
    (五)Day5 32
    整体写页面的思路: 32
    雪碧图(精灵图)-CSS Sprites 32
    高度塌陷-处理使用float时出现的问题 32
    高度重叠: 34
    序号选择器 35
    匹配所有以指定内容开头的选择器。 36
    匹配所有的含有指定内容,但是内容位置任意的选择器。 36
    第三章 37
    rem的综合使用-可以在不同尺寸屏幕上向用户显示更合适的布局 37
    (七)Day7 37
    字体图标-可以像字体一样使用图标 37
    伸缩布局-完全应用于移动端-电脑端也可以用,但主要用其他布局方式 39
    主轴和侧轴 39
    flex-direction:指定主轴的方向 39
    justify-content:主轴上子项的对齐方式 40
    align-items:指定侧轴上子项的对齐方式 40
    小米官网首页开发 40

    基于《撩课-玩转H5大前端》
    0.2019-8-18 我现在的主要问题是不熟悉找标签和调用标签选择器,老是搞混标签,或者根本找不到想要的
    1.相对看书和网站学习,看网课的优点是学习有侧重点,当然这跟授课人的水平高度相关
    2.老师开发过程的技巧:先在标签中填充背景色,然后设置标签位置,最后将内容填入标签
    3.做页面的基本原则:先大后小,先外后里

    快捷键和webstorm使用技巧
    1.快速获得指定数量的标签:例如6个section标签输入 ,再按tab
    2.多点编辑:①Ctrl+C复制需要在其他标签里粘贴的内容,②alt+左键,一个个选中需要粘贴内容的标签,例如下图中右侧有白线的就是需要编辑的标签
    ③按空格后跳出图中内容,按粘贴ctrl+V即可
    3.快速填充单词或词组:只用打两个字母然后回车,就能自动填充完成的属性或者方法。
    例如 →回车→ 或者 →回车→ 边框宽度默认是1px,实线,颜色是#000
    4.取消链接下划线:
    4.1给链接或者文字添加下划线
    上划线
    删除线
    5.百分百单位:
    6. 简写背景的多个属性
    7. 去除所有链接的下划线:

    9.css样式开头设置margin:0和padding:0的快速方法。
    输入 ,然后按tab
    10.p标签中显示一个空格: 
    11.dl dt dd li的联系和区别:首先

    12.快速创建子目录:只要在命名的时候加一个斜杠就行
    13.去除,在点击按钮和输入框时出现的外边框,使更加好看:
    outline:none;

    第一章
    知识体系介绍
    (1)浏览器最重要的的核心是“浏览器内核”,也叫渲染引擎。
    (2)网页主要由三部分组成:
    (3)HTML是用来描述网页的标签语言
    (4)头部:文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等
    (5) 定义文档的标题,它是 head 部分中唯一必需的元素。<br/> (6)元标签:用来描述HTML网页文档的属性,以及设置网页关键字和描述。例如设置编码格式<br/> (7)常见标签的分类.<br/> (8)是网页关键字描述<br/> (9)编码格式/字符集的作用:<br/> (一)HTML标签-Day1<br/> img标签<br/> (1)<img=”” alt=”” title=””>插入图片标签 alt是图片描述,title是鼠标悬停时显示的内容<br/> (2)设置图片属性时常用的属性:宽度width 高度height align排列图像位置.<br/> (3)设置宽度和高度有两种方式:①像素点px,②百分比<br/> (4)设置图像大小时,自动跳出提示的值是图片原有的大小<br/> (5)属性border是图片的边框大小<br/> input标签<br/> (1)输入框标签<br/> (2)value属性是输入框中默认有的文字 <br/> (3)placeholder属性是输入提示 区别在于value可以删,但是placeholder不能删<br/> (4)input标签:<br/> (5)密码显示:<br/> (6)日期选择:<br/> (7)上传文件按钮:<br/> (8)调色板:<br/> (9)单选框:<br/> (10)复选框: <br/> (11)单选框: <br/> < a href>标签<br/> (11)将图片作为超链接:其实就是将图片放在链接<a>标签中间<br/> (2) 空链接,点击之后还在当前页<br/> (3)<br/> (4)锚点定位:在段落前面的id=””加入自定义的锚点,例如id=”早年经历”,然后在href的内容中添加#早年经历,就实现了锚点定位。<br/> 列表标签<br/> (1)无序列表(最常用)</a><ul> </ul> 有序列表<ol> </ol><br/> 表单标签(常用于登录注册)<br/> (1)可以实现填完信息后跳转到指定页面<br/> 样式/节(用的最多的标签之一 60%-70%)<br/> (1)<br/> (2)</meta></meta></meta>

    (2)插入音频:
    (3)插入视频:
    标签之间的关系
    分为两大部分:head和body
    关系有
    1、例如head是meta和title的父元素,则h1和p是body的子元素
    2、兄弟元素是平级的。

    站点图标/网站缩略logo标志转换网站
    http://www.faviconico.org/
    拿别人网站缩略图的方法:在网址的后缀加/favicon.ico 例如百度https://www.baidu.com/favicon.ico
    导入站点图标
    把ico格式的图标放在根目录下,再引用即可,
    Meta标签的属性补充

    webkit的渲染更快 河马牙医网页开发过程 1.头部,2.中部多个文档中的节section,3.尾部 ①将整个页面分成三大部分处理,分别写出对应的代码

    ②头、中、尾部填充颜色,以及设置与图片相同的高度
    ③填充内容(分为头部和尾部的功能栏,以及中部的直接插入图片)
    直接插入图片会出现图片的宽度和网页的最大宽度不一致,所以需要设置宽度比例为100% ,而设置完宽度比例后,可以把图片的具体高度删除,因为高度会按照宽度的比例自动调整
    ④处理每张图片的不必要间距
    使用CSS设置图片格式为顶部对齐

    第二章
    (二)CSS样式-Day2
    主要使用的是
    页内样式:作用于全局
    行内样式:优先级大于页内样式
    外部样式:独立的CSS文件,不管哪个文件,需要里面的样式就可以直接引用
    样式的优先级:代码从上往下执行,前面的被后面的覆盖,所以下面的代码优先级更高。但是行内代码优先级最高。
    CSS选择器
    (1)通用选择器:选择页面中所有元素。语法:*{}
    (2)标签选择器:对一个指定类型的所有标签进行样式修改。语法:
    例如p标签:p{} div标签:div{}
    (2.1)通用选择器的优先级最低,在最底层。
    (3)类选择器:可以对不同类型、相同类名class的标签进行修改。语法:.类名{}
    (3.1)多个类选择器可以同时作用于同一条语句。例如类选择器test和test2同时起作用
    (4)id选择器:可以为标有特定id的HTML元素指定特定的样式。语法:以#来定义。
    例如:
    (4.1)id选择器只能用于一个标签
    (4.2)id选择器用于最外层的布局结构,然后里面用类选择器class或者标签选择器div
    (5)复合选择器:不同类型标签里用同一个类选择器或id选择器时,需要对指定的标签进行修改,则需要用到复合选择器。
    语法:div标签中名为main的id选择器
    div标签中名为test1的类选择器
    (6)群组选择器:多个选择器同时应用指定的样式。
    语法:用逗号分开每个选择器
    (7)后代选择器:只要是该标签的后代,不管是直接后代 还是间接后代,都能起作用。 对名为main的id选择器中的所有p标签改为红色字体
    (7.1)直接后代选择器:只会对标签的直接后代起作用。
    语法:将名为main的id选择器的直接后代p的字体改为红色
    (8)兄弟选择器
    语法:查找后面一个兄弟元素:p标签必须要紧挨着div标签,才算是div的兄弟标签,才修改样式的语句才能起作用
    查找后面所有兄弟元素:div后面的所有p标签都可以同时被修改
    (9)属性选择器:可以挑选带有特殊属性标签(用复合选择器也同样能实现)
    对所有div中的带有name属性的语句设置红色字体
    因为name的值有所不同,所以是设置name值为liiaoke的语句背景颜色
    多属性: 用多个中括号
    (10)伪类和伪元素:
    伪类以单冒号: 开头
    :hover选择被鼠标悬浮着的元素。当鼠标放在被:hover标记的标签上时,执行:hover中的内容。
    例如
    当鼠标移到class为test1的p标签上时,将整个段落的高度自动变为600px,背景颜色变天蓝色
    :focus选择拥有键盘输入焦点的元素(用于输入框,文本显示框无效)。鼠标点击输入框时,自动将输入框的宽度和高度变为设定的大小
    伪元素以双冒号::开头
    ::first-letter
    ::first-line
    ::after
    ::before
    (11)否定伪类:选择不是其他标签的某个标签。
    (12)选择器的优先级: (12.1)什么叫权值相同,后定义的优先?
    Test1和test2是相同的权值,但test2是后定义的更优先,所以显示test2的内容(也可以理解为后面定义的覆盖了前面定义的)

    (12.2)important的使用:当某个样式非常重要,并且不能被其他样式覆盖时,则要使用important 例如p标签很重要,则使用!impsortant
    (13)内联:把样式写在标签内部。例如p标签里的style就是内联。

    标签类型划分
    (1)块级标签:单独占一行,就像一个段落,可以随时设置宽度和高度。

    (2)内联(行内)标签:不会独占一行,就像一个单词,一直往后排
    (2.1)内联(行内)标签的高/宽度、内/外边距无法改变
    (3)块级-内联(行内)标签
    结合了前两者的优点,既能设置高/宽度,也能在同一行显示
    (4)块元素与内联元素相互转换
    (4.1)将块级标签转换为行内标签
    原来的块级标签的高和宽的设置会被取消
    转换前
    转换后
    (4.2)将行内标签转换为块级标签
    因为是块级标签,所有可以设置标签的高宽等参数
    转换前:
    转换后:
    (4.3)将标签变为行内-块级标签
    块属性
    盒子模型:在网页中,一切皆盒子
    网页上每一个标签都是一个盒子。

    content:内容。盒子里装的东西。
    padding:盒子的内边距,盒子的边框与盒子内部元素的距离。相当于泡沫,起缓冲作用。

    border:边框。相当于纸盒本身。
    单独设置一边的边框。语法:border-位置:
    例如上边框
    边框圆角:30个像素点的圆角
    设置为圆:
    设置左上方和右上方为圆角
    margin:盒子的外边距,盒子与盒子之间的距离。
    (1.2)width和height指的是content内容的宽度和高度
    浮动
    (1)要对两个或以上块级标签设置高度和宽度,并且要独占一行,就需要使用浮动。
    (2)搭配margin使用,控制浮动标签的边距。

    标签居中
    水平居中(更常用)
    块级标签水平居中:只需要在该子标签中加上这一行。
    行内标签和行内-块级标签水平居中:只需在父标签中加上这一行
    span的父标签是div,所以在#box{}中加入即可。
    垂直居中:
    定位原则:“子绝父相”绝对定位和相对定位
    vertical-align属性:通过调整基线实现置图片和文字的对齐方式

    (三)CSS常用属性-Day3
    可继承属性和不可继承属性

    visibility

    visibility属性的值hidden与display属性的值none
    相同点:都可以隐藏标签。
    不同点:hidden会把原有的空间保留,而none则是完全“消除”标签。
    cursor[ˈkɜːrsər](ker sir):设定要显示的光标类型
    鼠标移到该标签后,会变化为指定光标。
    鼠标显示为等待中:
    字体
    电脑里没有前面的字体,就默认使用后面位置的字体
    字体粗细

    字体风格(是否倾斜)

    设置首行缩进
    转换字母大小写
    list-style(列表属性)
    设置列表的显示为小写字母还是罗马字母或者其他的格式
    (overflow(控制内容溢出的情况)
    横向和纵向滚动条:
    只有纵向的滚动条:

    line-height
    box-sizing
    添加内边距padding和边框border是默认从内容content内往外扩,也就是
    如果需要从内容里往内扩,则需要添加语句
    为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
    a标签的空隙问题
    在父标签设置font-size为0
    然后在a标签设置大小不为0的字体
    行高和行间距
    行高line-height是可以自己设置的,而行间距是(行高-文字高度)/2

    ①是行高 ②是行间距

    (四)页面布局-Day4
    定位
    可以将页面中的元素,摆放到页面的任意位置。
    (1)相对定位relative:相对自己,以自身为参照物
    (1.1)相对定位的元素会提升一个层级,导致覆盖其他的内容。但不会像float一样脱离文档流。
    (1.2)不会改变元素的性质,块级/行内标签的性质不变
    例如开启了相对定位的box2覆盖了box3
    (2)绝对定位absolute:相对于父标签
    (2.1)父标签有直接父标签和间接父标签之分。
    (2.2)绝对定位的元素是相对于距离他最近的开启了定位的祖先元素 进行定位。
    该标签会一直往上找到距离最近的进行定位的父标签。
    如果所有祖先元素未开启定位,才是相对于浏览器窗口进行定位。
    (2.3)绝对定位会改变元素性质。内联变块,块的高度和宽度都被内容撑开,不会独占一行
    (2.4)绝对定位的元素会完全脱离文档流。
    (3)固定定位fixed:相对于整个窗口/浏览器
    (3.1)特殊的绝对定位。大部分特点和绝对定位相同,不同的是固定定位的元素永远相对于浏览器窗口进行定位,并且不会随滚动条滚动。
    层级z-index
    (1)使用层级的前提是开启定位

    圆角border-radius
    可以设置指定方位的圆角弧度:
    宽度和高度相同时,显示为圆。宽度高度不同时,为椭圆。
    背景
    (1.1)设置背景颜色的四种方式:
    rgba()可以设置透明度(取值为0-1)
    (1.2)单独设置颜色透明度的方法:(取值是0-1)
    (1.3)设置背景图片:url放本地图片的路径

    背景图片平铺(重复)
    (1.1)设置背景图片平铺方向

    (1.2)取消背景图片平铺(重复):
    背景图片位置
    (1.1)背景图片大于标签,则显示背景图片的左上角
    (1.2)background-position:两个参数分别为x和y轴偏移量
    (1.3)可以通过调整图片位置,只显示部分图片,从而实现“裁剪”的功能。
    背景图片尺寸
    (1.1)通过设置背景图片的尺寸设置背景图片在不平铺(重复)时,占满整个标签。
    完全占满整个标签

    精细设置图片尺寸: 宽是400px,高是200px
    (1.2)cover和contain的区别:
    相同:①都是将图片以相同横纵比缩放以适应整个容器的宽高
    ②因为是按图片原来的横纵比拉伸的,所以图片不会失真
    不同之处在于:
    在no-repeat情况下,如果容器宽高比与图片宽高比不同
    cover:图片宽高比不变、铺满整个容器的宽高,而图片多出来的部分则会被截掉
    contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域
    PS:其实,从英文的意思来说:cover意味着“遮罩、遮盖”—此处理解为“塞满”较恰当,contain意为“包含”–也就是:图片虽然缩放了,但是整个图是被“包含”在你里面的,你必须把我显示完整、不能裁剪我一丝一毫 。

    背景图片是否随页面滚动background-attachment

    动画
    (1.1)确定动画的类型调用:hover伪类,当鼠标移到标签上时,图片放大到原来的1.5倍
    (1.2)设置动画的方向:从底部往中间运动

    (1.3)设置动画过渡的时间和效果: 0.25秒完成动画,线性变化

    Mac桌面开发
    底部图标栏背景设置为灰色0.5透明度

    (五)Day5
    整体写页面的思路:以经典页面布局为例。
    1、首先搭建整体结构:分三大块,用对应的文字和颜色标记
    2、按照从上到下,从左到右的顺序分别处理每一块的内容
    3、去除背景颜色
    雪碧图(精灵图)-CSS Sprites
    (1.1)获取大图片中的小图片
    将多个小图标以.png的格式引用到页面上,使用雪碧图相当于只要引入最后的大图即可。
    节省了内容和宽带,提升性能。
    (1.2)借助软件firework
    示例:截取小图片后,需要设置div的宽度为15px,高度17px
    background-position:-48px -198px 注意x和y都要取负值

    高度塌陷-处理使用float时出现的问题
    父标签高度自适应,子标签float浮动后,造成父标签高度为0,称为高度塌陷。
    父标签属性:
    子标签把父标签的高度撑了起来:

    子标签右浮:造成父标签高度为0,高度塌陷

    解决方法:
    方法一:开启父标签的BFC。
    在父标签设置overflow的值为hidden
    BFC:块级格式化环境

    开启BFC后
    方法二(用得最少):在塌陷元素的最后添加空白div,然后对该div进行清除浮动

    缺点是会增加多余的div,造成代码冗余
    方法三(最常用):使用after伪元素。原理和方法二一样,只是不用添加多余div标签。

    高度重叠:
    本来黄色和紫色盒子的上面的边应该分开,但是却发生了重叠。

    解决方法:
    方法一:添加table标签。
    缺点是造成代码冗余。

    方法二:使用伪元素。例如#box4

    clearfix改进:
    table不是固定的,根据实际情况要进行更改
    序号选择器
    不区分类型
    :first-child
    选中同级别中第一个标签
    :last-child
    选中同级别中最后一个标签
    :nth-last-child(n)
    选中同级别中倒数第n个标签
    :nth-child(n)
    选中同级别中第n个标签
    :only-child
    选中同级别中唯一子元素标签
    区分类型
    :first-of-type
    选中同级别中同类型第一个标签
    :last-of-type
    选中同级别中同类型最后一个标签
    :nth-of-type(n)
    选中同级别中同类型第n个标签
    :nth-last-of-type(n)
    选中同级别中同类型倒数第n个标签
    :only-of-type
    选中同级别中唯一同类型子元素标签
    奇偶选择
    :nth-child(odd)
    选中级别中所有奇数
    :nth-child(even)
    选中同级别中所有的偶数
    :nth-child(xn+y)
    x,y是用户自定义的 n为计数器,从0开始递增选择, 到元素的总个数停止

    匹配所有以指定内容开头的选择器。例如匹配所有以icon-开头的class类选择器
    匹配所有的含有指定内容,但是内容位置任意的选择器。例如匹配所有内容中含有icon-的选择器。只要选择器中含有icon-,就能被匹配到。

    第三章
    rem的综合使用-可以在不同尺寸屏幕上向用户显示更合适的布局
    (1)默认字体高度为16px
    (2)1rem=16px
    (3)可以自定义rem 的大小。例如实际开发中设置所有标签和字体的font-size为10px,则此时1rem=10px,便于计算
    (4)单独设置字体大小时,要在body中设置。例如1rem=10px时,要设置字体为1.2rem,则要先设置html然后设置body
    (七)Day7
    字体图标-可以像字体一样使用图标
    优点:
    矢量图库:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
    图标转换:https://icomoon.io/
    ①在矢量图标网站下载svg图片
    ②将svg图放入指定文件夹(例如img文件夹)
    ③进入iconmoon网站:
    ④导入本地的字体图标
    ⑤选择要转换的图标(例如下面是全选)
    ⑥点击右下角的创建
    ⑦在左上角进行对应的属性设置
    ⑧点击右下角下载压缩包即可
    ⑨将压缩包中的style.css和font文件夹复制到webstorm
    ⑩引用图标:使用类选择器,然后复制点之后,冒号之前的内容即可引用。(例如下图的icon-icon_即为e900对应的图标-e900的内容在图标转换网站可以看到 )
    伸缩布局-完全应用于移动端-电脑端也可以用,但主要用其他布局方式

    常用属性
    主轴和侧轴
    主轴:默认是水平方向,从左往右
    侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下
    flex-direction:指定主轴 的方向
    justify-content:主轴上子项的对齐方式

    align-items:指定侧轴上子项的对齐方式

    flex-wrap:指定子项是否换行

    小米官网首页开发

    展开全文
  • 移动端基础及响应式布局

    千次阅读 2017-11-24 19:02:23
    在苹果手机的Safari浏览器中访问一个页面,用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上(就像安装一个APP,在主屏幕上就会有一个操作的图标),这样下一次可以直接点击图标打开页面。...
    目录

    1.移动端概述和hybird模式
    2.响应式布局基础
    3.响应式布局之流式布局
    4.做移动端项目之前的准备
    5.响应式布局demo
    6.rem响应式布局
    7.swiper的使用和轮播图
    8.综合案例-微信场景应用

    1.移动端概述和hybird模式

    移动端:运行在移动设备上的产品
    产品大部分都只需要适配ios和安卓系统即可
    响应式布局:在不同的设备上都能给予客户最好的操作体验
    移动端产品分为APP手机应用和H5
    目前市面上流行的APP产品大部分都是原生APP开发者做的,ios:object-c,安卓:java-native,目前市场正在趋于使用js来开发原生APP:React Native、phoneGap…
    H5:HTML页面,都是运行在浏览器中的(PC端浏览器、移动端浏览器),在ios和安卓平台上浏览器大部分是webkit内核的,所以移动端做H5页面不用像PC端一样处理兼容

    总结:
    1.做HTMl页面,需要在PC端和移动端访问
    2.PC端和移动端用的是不同的项目,例如:京东、淘宝、QQ…PC端的项目不需要做响应式
    3.在移动端开发出来的HTML页面运行的环境:移动端的浏览器、原生APP(Native APP)的webView中:hyBrid模式。例如在微信中打开一个H5页面,其实就是运行在微信的webView中的

    hyBrid模式(混合模式移动应用)

    把开发的H5页面嵌入到Native APP中的webView中运行(所谓的webView简单理解为一个浏览器,也是webkit内核的)

    2.响应式布局基础

    搭建一个H5页面,需要在head中添加一个meta标签:
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    webstorm中:meta:vp 加tab键可以自动生成

    js动态设置:

    var oMeta = document.createElement("meta");
    oMeta.name = "viewport";
    oMeta.content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0";
    document.head.appendChild(oMeta);

    viewport:视口
    width=device-width:设置视口的宽度等于设备的宽度,如果不设置的话,默认宽度为980像素。通俗的说,就是告诉当前的浏览器按照多大的宽度来渲染页面,即展示当前这个页面的区域有多宽(浏览器宽度)

    user-scalable=no:禁止用户手动缩放

    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0:设置屏幕默认/最大/最小的缩放比例

    高清屏:
    苹果手机是二倍高清屏的,也就是我们在手机上看到的那张100*100的图片,其实苹果手机是按照200*200的尺寸进行渲染的,这样的话,如果真实图片本身才100*100,最后呈现出来的就是被拉伸后变模糊的效果。故:苹果手机上需要的图片都需要比看到的尺寸大一倍才可以

    DPI适配思想:在做页面的时候,最好每一张素材图片都准备2~3套,比如:logo.png是100*100,logo@2x.png是200*200,logo@3x.png是300*300

    媒体查询 @media

    媒体设备:all所有设备 screen所有屏幕设备(PC+移动端) print打印机设备…
    媒体条件:指定在什么样的条件下指定对应样式
    例如:
    @media all and (max-width:319px){}宽度小于320px
    @media all and (min-width:320px) and (max-width:359px){}在320~360之间
    @media all and (-webkit-device-pixel-ratio:2){}二倍屏

    3.响应式布局之流式布局

    响应式布局的解决方法:

    在真实项目中,设计师的设计稿一般是:640*1136 或 640*960 或 750*1334

    流式布局法:

    1. 容器或者盒子的宽度一般都不是固定的值,而是使用百分比,相对于视口区域的百分比
    2. 其余的样式:字体、高度、margin、padding等等都按照设计稿上标注尺寸的一半来设置
    3. 对于有些屏幕尺寸下,设置的固定值不是特别好看的话,使用@media进行微调整

    苹果手机的尺寸:
    5s及以下都是320px、6是375px、6p是414px
    常用的安卓机尺寸:320px、360px、480px、540px、 720px…

    特殊情况:设计稿是640px,素材图也是640px,这样的话在iPhone6/6p展示的时候,图片不够大,对于这种情况需要向设计师单独要一张更大的图,比如:1280px的尺寸

    @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 321px) {
        .box {
            background: url("banner@big.png");
        }
    }
    
    @media all and (min-width: 641px) {
        .box {
            background: url("banner@big.png");
        }
    }
    4.做移动端项目之前的准备

    常用的META标签(移动端)

    忽略数字自动识别为电话号码:
    <meta name="format-detection" content="telephone=no"/>

    把页面增加到桌面主屏幕:
    在苹果手机的Safari浏览器中访问一个页面,用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上(就像安装一个APP,在主屏幕上就会有一个操作的图标),这样下一次可以直接点击图标打开页面。(只对IOS有效)

    WebApp全屏模式:
    <meta name="apple-mobile-web-app-capable" content="yes"/>

    设置状态栏颜色:
    只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的,即白色,网页从状态栏以下开始显示) | black(状态栏将为黑色,网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明,网页将充满整个屏幕,状态栏会盖在网页之上)。
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

    添加到主屏后的图标:
    <link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>
    IOS系统中对ICON有一套规范,就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”,是IOS设备中统一为所有桌面元素增加的,所以不作为图标单独处理的样式。rel=”apple-touch-icon-precomposed”是设定按照设计稿原图的图标显示,rel=”apple-touch-icon”是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。

    添加到主屏后的标题:
    <meta name="apple-mobile-web-app-title" content="标题"/>

    添加智能App广告条 Smart App Banner(不常用):
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>

    QQ浏览器(X5内核)独有的META:
    <meta name="x5-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="x5-fullscreen" content="true"/> //->设置全屏

    UC浏览器独有的META:
    <meta name="screen-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="full-screen" content="true"/> //->设置全屏 <meta name="viewport" content="uc-fitscreen=no|yes"/> //->缩放不出现滚动条 <meta name="nightmode" content="enable|disable"/> //->夜间模式

    强制图片显示:UC浏览器为了节省流量,为用户提供了无图模式,但是如果页面的图片是必不可少的,如验证码的,需要强制浏览器显示图片,可以设置imagemode。通过META设置图片加载方式会作用于整个页面,如果希望对单个图片进行设置,那么可以使用这个<img src="" show="force"/>

    <meta name="imagemode" content="force"/>

    使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。

    <meta name="browsermode" content="application"/>

    详细可参考:
    http://www.zhufengpeixun.com/qianduanjishuziliao/mobileDevelopment/2016-07-02/480.html

    常用的META标签:
    http://www.zhufengpeixun.com/qianduanjishuziliao/mobileDevelopment/2016-06-29/457.html

    5.响应式布局demo

    这里写图片描述

    HTML代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta name="format-detection" content="telephone=no"/>
        <link rel="stylesheet" charset="UTF-8" href="reset.css" type="text/css">
        <link rel="stylesheet" charset="UTF-8" href="index.css" type="text/css">
        <!--[if lt IE 9]>
        <script charset="UTF-8" type="text/javascript" src="HTML5.min.js"></script>
        <![endif]-->
    </head>
    <body>
    
    <header class="header">
        <div class="con">
            <h1 class="logo">
                <a href="#"><img src="img/logo.png"/></a>
                猎豹安全浏览器
            </h1>
            <nav class="nav">
                <ul>
                    <li class="bg">
                        <a href="#">首页<i></i></a>
                    </li>
                    <li>
                        <a href="#">下载<i></i></a>
                    </li>
                    <li>
                        <a href="#">论坛<i></i></a>
                    </li>
                    <li>
                        <a href="#">International<i></i></a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="headerBg"></div>
    
    <!--banner-->
    <section class="banner">
    
    </section>
    <script type="text/javascript"></script>
    </body>
    </html>

    css代码:

    html, body {
        width: 100%;
        overflow-x: hidden;
    }
    
    a {
        color: #000;
    }
    
    a:hover, a:active {
        color: #000;
    }
    
    .con {
        width: 960px;
        margin: 0 auto;
    }
    
    /*header*/
    .header, .headerBg {
        height: 89px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        z-index: 10;
    }
    
    .header {
        border-bottom: 1px solid #999;
    }
    
    .headerBg {
        opacity: 0.1;
        filter: alpha(opacity=10);
        background: #000;
        z-index: 9;
    }
    
    .header .logo {
        float: left;
        width: 270px;
        height: 51px;
        margin-top: 19px;
        font-size: 0;
    }
    
    .header .logo img {
        width: 100%;
        height: 100%;
    }
    
    .header .nav {
        float: right;
    }
    
    .header .nav li {
        position: relative;
        float: left;
    }
    
    .header .nav li a {
        display: block;
        text-decoration: none;
        padding: 0 30px;
        height: 89px;
        line-height: 89px;
        color: #f4f4f4;
        font-size: 18px;
    }
    
    .header .nav li.bg a {
        color: #fff;
    }
    
    .header .nav li a i {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 50%;
        width: 0; /*目标值为100%*/
        margin-left: 0; /*目标值为-50%*/
        height: 89px;
        background: #000;
        opacity: 0.1;
        filter: alpha(opacity=10);
    }
    
    .header .nav li a:hover i {
        width: 100%;
        margin-left: -50%;
        /*过渡动画 PC端写5套,移动端只留第一和最后一个,顺序不能变*/
        -webkit-transition: all .1s linear 0s;
        -moz-transition: all .1s linear 0s;
        -o-transition: all .1s linear 0s;
        -ms-transition: all .1s linear 0s;
        transition: all .1s linear 0s;
    }
    
    /*banner*/
    .banner {
        width: 100%;
        height: 490px;
        background: #ff6900;
    }
    
    /*响应式*/
    @media all and (max-width: 760px) {
        .con {
            width: 100%;
        }
    
        .header .nav {
            display: none;
        }
    
        .header, .headerBg {
            height: 46px;
        }
    
        .header .logo {
            height: 28px;
            width: 148px;
            margin-top: 9px;
            margin-left: 10px;
        }
    
        .header .nav {
            float: right;
        }
    }
    6.rem响应式布局

    做的H5页面只在移动端访问,可以用rem,因为rem不兼容低版本的浏览器

    rem是指当前页面中元素的REM单位的样式值都是针对于HTML元素的fontSize的值进行动态计算

    例如:
    让当前方块在页面中垂直、水平居中:
    这里写图片描述

    传统方式:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta name="format-detection" content="telephone=no"/>
        <link rel="stylesheet" charset="UTF-8" href="reset.css" type="text/css">
        <link rel="stylesheet" charset="UTF-8" href="index.css" type="text/css">
        <!--[if lt IE 9]>
        <script charset="UTF-8" type="text/javascript" src="HTML5.min.js"></script>
        <![endif]-->
        <style type="text/css">
            html {
                font-size: 100px;
            }
    
            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
    
            }
    
            .box {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
    
                width: 200px;
                height: 200px;
                background: #f7e1b5;
            }
        </style>
    </head>
    <body>
    <div class="box"></div>
    <script type="text/javascript"></script>
    </body>
    </html>

    使用rem布局:

    .box {
        ...
        width: 2rem;
        height: 2rem;
        ...
    }

    第一步:从UI设计师拿到设计稿(psd格式的设计稿) 640*1136

    第二步:在样式中给HTML设置一个fontSize的值,一般都设置一个方便后面计算的值,如:100px,之所以用100px,主要是浏览器最小的字体都是12px,用10px比例计算的结果和真实的UI设计稿会存在那么一点偏差

    html {
        font-size: 100px; /*相当于1REM = 100px*/
    }

    第三步:写页面,写样式,完全按照设计稿的尺寸来写样式,此时不用管任何事情,设计稿的宽度、高度、字体大小、margin、padding的值是多少,就写多少
    但是在写样式的时候,需要把得到的像素值除以100,计算出对应的REM的值,设定的也都是REM的值,值得注意的是:真实项目中外层盒子的宽度还是不写固定值,沿用流式布局法的思想

    第四步:根据当前屏幕的宽度和设计稿的宽度来计算HTML的fontSize的值
    如:

    设备尺寸比例fontSizerem
    设计稿640600*300fontSize=100px6rem*3rem
    手机320300*150fontSize=50px3rem*1.5rem
    手机375fontSize=375/640*100=58.59375px
    <script type="text/javascript">
        //根据当前屏幕的宽度和设计稿宽度的比例,动态计算当前宽度下的fontSize值应该是多少,如果fontSize的值改变了,之前设定的所有rem单位的值会自动跟着放大和缩小
        ~function () {
            var desW = 640,
                winW = document.documentElement.clientWidth,
                ratio = winW / desW;
            document.documentElement.style.fontSize = ratio * 100 + "px";
        }();
    </script>

    如果页面太大,当页面比设计稿还要大的时候,可以尺寸不变,两边留白,居中显示,如京东:
    将页面中的所有内容用section标签包起来:
    <section id="main">...</section>

    <script type="text/javascript">
        //根据当前屏幕的宽度和设计稿宽度的比例,动态计算当前宽度下的fontSize值应该是多少,如果fontSize的值改变了,之前设定的所有rem单位的值会自动跟着放大和缩小
        ~function () {
            var desW = 640,
                winW = document.documentElement.clientWidth,
                ratio = winW / desW,
                oMain = document.getElementById("main");
            if (winW > desW) {
                oMain.style.width = desW + "px";
                oMain.style.margin = "0 auto";
                return;
            }
            document.documentElement.style.fontSize = ratio * 100 + "px";
        }();
    </script>

    有时候需要检测一下当前的浏览器是PC端还是移动端,如果当前浏览器是PC端,但是访问的页面是移动端的页面,我们让其跳转到PC端的页面;如果当前的浏览器是移动端的,但访问的是PC端的页面,让其跳转到移动端的页面:
    跳转:window.location.href = 'xxx'
    检测PC还是移动端:

    if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){  
        if(window.location.href.indexOf("?mobile")<0){  
            try{  
                if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){  
                    window.location.href="手机页面";  
                }else if(/iPad/i.test(navigator.userAgent)){  
                    window.location.href="平板页面";  
                }else{  
                    window.location.href="其他移动端页面"  
                }  
            }catch(e){}  
        }  
    }  
    7.swiper的使用和轮播图

    swiper官网:http://www.swiper.com.cn/

    注意:当开启swiper的loop模式下,它的原理是:如果是三张轮播区域,会把第一张放末尾,最后一个放开头,最后变成五个,所以索引也会改变
    刚开始初始化成功的时候,默认会存在一个从索引0切换到索引1的过程
    如:
    当前的活动块个数:n=5
    索引为0时,page是n-2,即page3
    索引为1时,page1
    索引为2时,page2
    索引为3时,page3
    索引为4即n-1时,page1

    8.综合案例-微信场景应用

    效果图:
    这里写图片描述

    这里写图片描述

    用到的插件:swiper、fastClick(解决移动端click事件的300ms延迟)、animate动画库

    HTML代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>移动端场景应用</title>
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="css/reset.css" charset="utf-8">
        <link rel="stylesheet" href="css/swiper.min.css" charset="utf-8">
        <link rel="stylesheet" href="css/index.css" charset="utf-8">
    </head>
    <body>
    
    
    <section class="main" id="main">
        <!--CONTAINER-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!--slide1-->
                <div class="swiper-slide page1" id="page1">
                    <img src="img/page1-text2.png"/>
                    <img src="img/page1-text3.png"/>
                    <img src="img/page1-text4.png"/>
                    <img src="img/page1-text5.png"/>
                </div>
                <!--slide2-->
                <div class="swiper-slide page2" id="page2">
                    <img src="img/page2-text1.png"/>
                    <img src="img/page2-text2.png"/>
                    <img src="img/page2-text3.png"/>
                    <img src="img/page2-text4.png"/>
                </div>
            </div>
        </div>
    
        <!--ARROW-->
        <div class="arrow"></div>
    
        <!--music-->
        <div class="music" id="musicMenu">
            <audio src="audio/Wired.mp3" preload="none" loop id="musicAudio"></audio>
        </div>
    </section>
    
    
    <script charset="UTF-8" type="text/javascript" src="js/swiper.min.js"></script>
    <script charset="UTF-8" type="text/javascript" src="js/index.js"></script>
    <script charset="UTF-8" type="text/javascript" src="js/fastClick.js"></script>
    </body>
    </html>

    css代码如下:

    html, body, .main, .swiper-container, .swiper-slide {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    html {
        font-size: 100px;
        /*设计稿:640*960*/
    }
    
    /*page1*/
    .page1 {
        position: relative;
        background: url("../img/bg1.jpg") no-repeat;
        background-size: cover;
    }
    
    .page1 img {
        position: absolute;
        opacity: 0;
    }
    
    .page1 img:nth-child(1) {
        width: 5.5rem;
        height: 5.12rem;
        bottom: .8rem;
        left: .5rem;
    }
    
    .page1 img:nth-child(2) {
        width: 3.7rem;
        height: 6rem;
        top: .28rem;
        right: 0;
    }
    
    .page1 img:nth-child(3) {
        width: .96rem;
        height: 2.32rem;
        top: 2.8rem;
        left: 2rem;
    }
    
    .page1 img:nth-child(4) {
        width: 7.86rem;
        height: 5.88rem;
        bottom: 0;
        left: -1.6rem;
    }
    
    /*实现切换完成后页面中的元素再开始运动的思想:开始的时候当前这个区域没有对应的id,当切换到这个区域的时候,为其增加id,在css中把所有的动画效果都放在指定的id下,这样的话只需要让区域有id,里面的子元素就有动画了*/
    #page1 img:nth-child(3) {
        -webkit-animation: bounceInLeft 1s linear 0s 1 both;
        animation: bounceInLeft 1s linear 0s 1 both;
    }
    
    #page1 img:nth-child(2) {
        -webkit-animation: bounceInRight 1s linear .3s 1 both;
        animation: bounceInRight 1s linear .3s 1 both;
    }
    
    #page1 img:nth-child(1) {
        -webkit-animation: bounceInUp 1s linear .6s 1 both;
        animation: bounceInUp 1s linear .6s 1 both;
    }
    
    #page1 img:nth-child(4) {
        -webkit-animation: bounceInUp 1s linear .9s 1 both;
        animation: bounceInUp 1s linear .9s 1 both;
    }
    
    /*page2*/
    
    .page2 {
        position: relative;
        background: url("../img/bg2.jpg") no-repeat;
        background-size: cover;
    }
    
    .page2 img {
        position: absolute;
        width: .61rem;
        height: 6.38rem;
        top: 2.5rem;
        opacity: 0;
    }
    
    .page2 img:nth-child(1) {
        width: 3.4rem;
        height: 1.74rem;
        top: 0;
        left: 0;
    }
    
    .page2 img:nth-child(2) {
        left: 1.48rem;
    }
    
    .page2 img:nth-child(3) {
        left: 3.2rem;
    }
    
    .page2 img:nth-child(4) {
        left: 4.7rem;
    }
    
    #page2 img:nth-child(1) {
        -webkit-animation: bounceInLeft 1s linear 0s 1 both;
        animation: bounceInLeft 1s linear 0s 1 both;
    }
    
    #page2 img:nth-child(2) {
        -webkit-animation: zoomIn 1s linear .3s 1 both;
        animation: zoomIn 1s linear .3s 1 both;
    }
    
    #page2 img:nth-child(3) {
        -webkit-animation: zoomIn 1s linear .6s 1 both;
        animation: zoomIn 1s linear .6s 1 both;
    }
    
    #page2 img:nth-child(4) {
        -webkit-animation: zoomIn 1s linear .9s 1 both;
        animation: zoomIn 1s linear .9s 1 both;
    }
    
    /*css3 动画*/
    @keyframes bounceInLeft {
        from, 60%, 75%, 90%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
    
        0% {
            opacity: 0;
            transform: translate3d(-3000px, 0, 0);
        }
    
        60% {
            opacity: 1;
            transform: translate3d(25px, 0, 0);
        }
    
        75% {
            transform: translate3d(-10px, 0, 0);
        }
    
        90% {
            transform: translate3d(5px, 0, 0);
        }
    
        to {
            transform: none;
            opacity: 1;
        }
    }
    
    @keyframes bounceInRight {
        from, 60%, 75%, 90%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
    
        from {
            opacity: 0;
            transform: translate3d(3000px, 0, 0);
        }
    
        60% {
            opacity: 1;
            transform: translate3d(-25px, 0, 0);
        }
    
        75% {
            transform: translate3d(10px, 0, 0);
        }
    
        90% {
            transform: translate3d(-5px, 0, 0);
        }
    
        to {
            transform: none;
            opacity: 1;
        }
    }
    
    @keyframes bounceInUp {
        from, 60%, 75%, 90%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
    
        from {
            opacity: 0;
            transform: translate3d(0, 3000px, 0);
        }
    
        60% {
            opacity: 1;
            transform: translate3d(0, -20px, 0);
        }
    
        75% {
            transform: translate3d(0, 10px, 0);
        }
    
        90% {
            transform: translate3d(0, -5px, 0);
        }
    
        to {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
    
    @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale3d(.3, .3, .3);
        }
    
        50% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        }
    }
    
    @keyframes bounce {
        from, 20%, 53%, 80%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transform: translate3d(0, 0, 0);
        }
    
        40%, 43% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -15px, 0);
        }
    
        70% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -10px, 0);
        }
    
        90% {
            transform: translate3d(0, -4px, 0);
        }
    }
    
    /*arrow*/
    .arrow {
        width: .48rem;
        height: .36rem;
        position: absolute;
        bottom: .2rem;
        left: 50%;
        margin-left: -.24rem;
        z-index: 10;
        background: url("../img/web-swipe-tip.png") no-repeat;
        background-size: cover;
        -webkit-animation: bounce 1s linear 0s infinite both;
        animation: bounce 1s linear 0s infinite both;
    }
    
    /*music*/
    .music {
        display: none;
        width: .5rem;
        height: .6rem;
        position: absolute;
        top: .3rem;
        right: .2rem;
        background: url("../audio/Figure_rythmique_croche_hampe_haut.svg") no-repeat;
        background-size: 100% 100%;
        z-index: 10;
    }
    
    .music audio {
        display: none;
    }
    
    .music.move {
        -webkit-animation: bounce 1s linear 0s infinite both;
        animation: bounce 1s linear 0s infinite both;
    }

    js代码如下:

    FastClick.attach(document.body);
    
    ~function () {
        var desW = 640,
            winW = document.documentElement.clientWidth,
            ratio = winW / desW,
            oMain = document.getElementById("main");
        if (winW > desW) {
            oMain.style.width = desW + "px";
            oMain.style.margin = "0 auto";
            return;
        }
        document.documentElement.style.fontSize = ratio * 100 + "px";
    }();
    
    /* init swiper */
    new Swiper('.swiper-container', {
        direction: 'vertical',
        loop: true,
        on: {
            //当切换结束后,给当前展示的区域添加对应的id,由此实现对应的动画效果
            slideChangeTransitionEnd: function () {
                var slideAry = this.slides, //有多少个活动块
                    curIn = this.activeIndex, //当前这个区域的索引,从1开始
                    total = slideAry.length;
    
    
                //计算id是page几
                var targetId = "page";
                switch (curIn) {
                    case 0 :
                        targetId += total - 2;
                        break;
                    case total - 1 :
                        targetId += 1;
                        break;
                    default:
                        targetId += curIn;
                }
    
                //给当前的活动块设置id,把其余的移除
                [].forEach.call(slideAry, function (item, index) {
                    if (curIn == index) {
                        item.id = targetId;
                        return;
                    }
                    item.id = null;
                });
    
            }
        }
    });
    
    //music
    ~function () {
        var musicMenu = document.getElementById("musicMenu"),
            musicAudio = document.getElementById("musicAudio");
    
        musicMenu.addEventListener("click", function () {
            if (musicAudio.paused) {
                musicMenu.className = "meau move";
                return;
            }
            musicAudio.pause();
            musicMenu.className = "music";
        })
    
        function contralMusic() {
            musicAudio.volume = 0.5;
            musicAudio.play();
            musicAudio.addEventListener("canplay", function () {
                musicMenu.style.display = "block";
                musicMenu.className = "music move";
            }, false);
        }
    
        window.setTimeout(contralMusic, 1000);
    }();
    展开全文
  • 移动端开发注意事项

    2019-03-15 22:29:39
    1、桌面图标设置: 两者的区别如下: 第一种会有一个光感,第二种是设计原图显示! 2、启动画面的设置: 当然,可以指定不同尺寸。 四、其他浏览器私有meta属性【除非特需,一般不推荐使用】 1...
  • Ubuntu 12.04 安装之后的各种问题

    千次阅读 2015-09-02 11:59:24
    这里只解决了侧边树形控件失去焦点后,选中的节点变白的问题!!!至于提示框背景色太黑,可以自行百度,答案很多! 18、Linux中mysql对表名大小写敏感!使其不区分大小写的解决办法如下  需要改 ...
  • 转载自Kevin-Tong

    千次阅读 2018-12-22 15:29:45
    -- flowchart 箭头图标 勿删 --> ;">,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg> 最新mac系统千万不要用brew安装,推荐使用官方...
  • IDEA教程

    千次阅读 2017-09-25 22:37:50
    上图标记 1 表示在桌面上创建一个快捷图标,建议勾选上,方便我们在安装后定位 IntelliJ IDEA 安装目录。 上图标记 2 表示关联 Java 和 Groovy 文件,建议都不要勾选,正常我们会在 Windows 的文件系统上打开这类...
  • 转载自袁杰、

    千次阅读 2018-12-22 15:25:58
    -- flowchart 箭头图标 勿删 --> ;">,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg> <p><em>背景:</strong></em> 之前我们...
  • RNN介绍,较易懂

    万次阅读 多人点赞 2017-11-20 16:58:39
     等人对该问题进行了深入的研究,他们发现一些使训练 RNN 得非常困难的相当根本的原因。 然而,幸运的是,LSTM 并没有这个问题! LSTM 网络 Long Short Term 网络—— 一般就叫做 LSTM ...
  • 大前端工具集

    千次阅读 2019-02-01 18:37:16
    出品 hamburgers - 简单的动画库,让 Click(or Tap) 得美妙 cssmatic - 一个帮忙调试CSS效果的工具 浏览端 JS requirejs - JS模块化是构建复杂项目的第一步 中文学习文档奉上:RequireJS 中文网 three.js - ...
  • <img src="https://github.com/iHTCboy/iGallery/raw/master/BlogImages/2018/07/20180715-macOS-WebStorm.png" width="200" height:auto alt="20180715-macOS-WebStorm.png"/> WebStorm WebStorm 是jetbrains...
  • Mac实用软件及功能吐血总结

    万次阅读 多人点赞 2018-03-26 11:13:39
    多条剪辑片段可如磁铁般吸合在一起,Timeline 内多余的黑色间隙也随之消失,让组合镜头得轻而易举。同样,剪辑片段能够自动让位,以避免剪辑冲突和同步问题,让你能专注于故事创作。借助互动式动态效果,你可在...
  • java 开发工具及其他使用工具介绍

    千次阅读 2017-09-05 10:10:57
    Patterno 是一款创建各种背景图片的软件,可以帮助你创建用于网页、微薄等网页背景用途 当然也可以用于电脑桌面背景 。 iDraw Image Design iDraw 旨在用强大的绘画工具,它能给你提供最简便的绘画体验。你...
  • IntelliJ IDEA 使用教程

    千次阅读 2017-11-23 10:43:05
    11.各类文件类型图标讲解 12.索引的讲解 13.编译方式讲解 14.项目相关概念讲解 15.Hello World 的 Java 项目创建和项目配置文件讲解 16.版本控制讲解 17.实时代码模板讲解 18.文件代码模板讲解 19....
  • Mac实用软件及功能总结

    万次阅读 2014-09-17 09:36:53
    Patterno 是一款创建各种背景图片的软件,可以帮助你创建用于网页、微薄等网页背景用途 当然也可以用于电脑桌面背景 。 iDraw Image Design iDraw 旨在用强大的绘画工具,它能给你提供最简便的绘画体验...
  • 文章目录(三周年)

    千次阅读 2020-05-15 12:00:00
    声,混响,语音合成 TTS,Swift5,基于 AVAudioEngine 等 667 10.12 知乎高赞:有一亿人民币是一种什么样的体验? 666 10.11 Android 布局优化,看这 3 点就够了! 665 10.10 透过现象看本质:常见的前端架构风格...
  • 传智播客前端3期

    2017-03-12 19:40:53
    目录 ├─基础班 │ ├─基础班视频 ( 3期 ) │ │ └─基础班视频 ( 3期 ) │ │ ├─01-html基础-第1天-2015年11月25日-{html标题} │ │ │ │ 1-教学资料.rar │ │ │ │ 2-其他资料.rar ...│ │ │ │
  • 通过引擎编辑器资源管理窗口,可以对资源进行文件名修改、改变目录、删除文件,添加文件可以从桌面或操作系统的文件管理器将文件拖入引擎资源管理器中。 拖动图片到资源管理器 还有一种情况是在操作系统的文件管理器...
  • 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML ...1.1.3 web标准 1.2 开发中常见概念解释 1.2.1前端 1.2.2后台 1.2.3 浏览器 1.3 纯文本和超文本的使用 1.4 开发工具的使用 ...1.5.5浏

空空如也

空空如也

1 2
收藏数 24
精华内容 9
关键字:

webstorm桌面图标变白