摘要:
基本介绍 1、利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。 基本使用 当屏幕小于768px就会隐藏列表
阅读全文
posted @ 2018-01-15 15:21
var_obj
阅读(177)
推荐(0)
摘要:
基本简介 1、Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列 2、栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局 3、“行(row)”必须包含在 .container (固定宽度)
阅读全文
posted @ 2018-01-15 15:14
var_obj
阅读(691)
推荐(0)
摘要:
基本概念 1、bootstrap就是在媒体查询技术出现以后才开始出现的 2、此技术使响应式开发变得十分轻松,最大特点就是栅格系统(什么设备上如何显示)以及响应式工具(是否可见) 基本模板
阅读全文
posted @ 2018-01-15 14:24
var_obj
阅读(1170)
推荐(0)
摘要:
基本概念 响应式开发在没有媒体查询前,也可以通过js来实现,但是人们基本不会考虑,特别繁琐。在出现了媒体查询,才开始逐渐推广响应式。实际开发中,在时间与金钱充足的情况下还是别做响应式,影响性能,维护麻烦。 基本使用 1、屏幕大于等于480px,使用括号里的 2、屏幕小于等于1000px,使用括号里的
阅读全文
posted @ 2018-01-15 12:59
var_obj
阅读(275)
推荐(0)
摘要:
1、我们将5张图片又前后各增加一张,第一张前增加的是原本的第五张,第五张后增加的是原本的第一张,增加的原因无非是手指滑动的时候有轮播效果,这不像以前的轮播图,点击图标就能立刻将ul跳转到指定位置,手机滑动不行 2、当我们手指从第一张向右边方向滑动时,会出现第五张图片,在这个滑动效果结束之后我们跳转到
阅读全文
posted @ 2018-01-15 12:17
var_obj
阅读(390)
推荐(0)
摘要:
基本概况 1、touch事件在移动端被用来代替click事件,因为click事件的触发会延迟影响了用户体验 2、touch事件还可以与translate构成吸附效果 3、现行有一种排版方式是左边宽度是固定的,右边是自适应的 4、下面通过一个项目串联起来这些知识点,顺便说下移动端静态页面设置技巧 左定
阅读全文
posted @ 2018-01-09 18:46
var_obj
阅读(252)
推荐(0)
摘要:
基本概念 1、在移动web端点击事件或者滑动屏幕、捏合等动作都是由touchstar、touchmove、touchend这三个事件组合在一起使用的 2、click事件在移动端会有0.2秒的延迟,下面是测试click在移动web端的延迟,最好在手机浏览器中测试 3、touchstar、touchmo
阅读全文
posted @ 2018-01-08 12:08
var_obj
阅读(420)
推荐(0)
摘要:
基本概况 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。 编译 1、在npm中输入以
阅读全文
posted @ 2018-01-07 19:10
var_obj
阅读(4059)
推荐(0)
摘要:
1、下载node.js 我们需要NodeJ运行LESS示例。 要下载NodeJ,请打开链接 https://nodejs.org/en/ 2、node.js安装是否正确 在cmd中输入lessc -v,若是回复lessc 2.7.3 (Less Compiler) [JavaScript],说明安装
阅读全文
posted @ 2018-01-07 18:20
var_obj
阅读(369)
推荐(0)
摘要:
视口viewport 1、在桌面端的浏览器的宽度有肯能是很大的,如果设置了一个很大的值,那么在移动端中的浏览器显示的时候会有横向移动的拖拽条,为了避免出现这样的横向拖拽条,我们每次都要页面的宽度就是移动设备浏览器的宽度 2、移动设备的浏览器(或App中的webview)好比是相框,viewport就
阅读全文
posted @ 2018-01-07 17:28
var_obj
阅读(252)
推荐(0)
摘要:
1、dispaly:block 2、float:left 这两种都可以消除3px
阅读全文
posted @ 2018-01-06 15:38
var_obj
阅读(564)
推荐(0)
摘要:
同源 基本概念:同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。 跨域 跨域是十分危险的 iframe标签src属性可以获取外部网站的dom对象 跨域又可以被利用,从别的网站接收一些十分有用的数据 核心思想 因为浏览器禁止跨域访问,但是可以通过src属性进行跨域 在scrip
阅读全文
posted @ 2018-01-03 18:20
var_obj
阅读(291)
推荐(0)
摘要:
基本概念 1、宽度是一致的,高度上参差不齐 2、新增内容优先放置在最矮的地方 核心难点 1、用一个数组存储每列的高度值 2、新值添加到值最小索引上,每次替换更新数组 插件使用 1、$.fn.extend():给每个元素进行排序 代码案例
阅读全文
posted @ 2018-01-03 15:09
var_obj
阅读(328)
推荐(0)
摘要:
1、$.fn.extend:扩展 jQuery 元素集来提供新的方法(通常用来制作插件),使用时是$('选择器').方法 2、$.extend:扩展jQuery对象本身,用来在jQuery命名空间上增加新函数,使用时是$.方法
阅读全文
posted @ 2018-01-03 11:43
var_obj
阅读(203)
推荐(0)
摘要:
格式化表单 异步提交 1、参数的顺序要正确:url、data、success、dataType 2、最后一个dataType可以不写,如果写了json,那么返回的数据会自动进行js对象的转化JSON_parse() ajax综合
阅读全文
posted @ 2018-01-03 10:56
var_obj
阅读(644)
推荐(0)
摘要:
模板介绍 1、必要性:ajax请求从服务器接收到大量数据,此时再用普通的字符串拼接是很耗费时间的,这时候模板就有其必要性 2、便利性:插件套用,现在有很多主流的模板插件:BaiduTemplate(百度开发) 、ArtTemplate(腾讯开发)、 velocity.js(淘宝开发) Handleb
阅读全文
posted @ 2018-01-02 12:24
var_obj
阅读(465)
推荐(0)
摘要:
封装异步请求 1、将函数作为参数进行使用 2、因为获取数据是在一个注册事件中获取的,所以只有事件触发的时候才会调用此函数
阅读全文
posted @ 2017-12-29 10:11
var_obj
阅读(263)
推荐(0)
摘要:
XML数据格式 首行必须是版本号和格式等信息 最外层需要一个根节点进行包裹 标签有开头有结尾,效率低下 php中设置header需要将content-type设置成text/xml 浏览器读取XML文件是用ajax.responseXML 浏览器接收到的是文档树,可以用访问节点的方式获取值 JSON
阅读全文
posted @ 2017-12-29 10:09
var_obj
阅读(255)
推荐(0)
摘要:
基础概念 1、异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2、get异步请求传递参数是通过url追加键值对的方式 3、post异步请求比较特殊,需要设置请求的类型 readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化 status:200: "OK";
阅读全文
posted @ 2017-12-28 12:00
var_obj
阅读(332)
推荐(0)
摘要:
上传文件 1、get是传不了文件的,只能用post 2、enctype需要重新设置,默认是application/x-www-form-urlencoded,会在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值) 3、修改上传文件大小设置,在p
阅读全文
posted @ 2017-12-28 10:58
var_obj
阅读(177)
推荐(0)
摘要:
header 数据类型 表达式 数组 二维数组 单双引号 GET POST 嵌入html中 注意事项 1、拼接字符串是用.而不是+ 2、在进行表单提交时,最好在127.0.0.1中进行访问 3、php文件的命名不能出现中文
阅读全文
posted @ 2017-12-27 10:26
var_obj
阅读(160)
推荐(0)
摘要:
AMP环境 AMP(Apache、MySQL、PHP)是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装 ——WAMP WAMP安装 1、下一步下一步 2、修改httpd.conf文件(左键小图标==》Apache==》httpd
阅读全文
posted @ 2017-12-26 18:00
var_obj
阅读(159)
推荐(0)
摘要:
基本概念 1、HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件 2、可配置需要缓存的资源,网络无连接应用仍可用,本地读取缓存资源,提升访问速度,增强用户体验,减少请求,缓解服务器负担 3、使用上只需要一个普通文本文件,其中列出了浏览器应缓存以供
阅读全文
posted @ 2017-12-26 11:39
var_obj
阅读(266)
推荐(0)
摘要:
我们可以通过window.onLine来检测,用户当前的网络状况,返回一个布尔值 注意事项:如果在加载网页前就已经处于在线状态是不会触发程序的在线事件,同理离线也是
阅读全文
posted @ 2017-12-26 11:06
var_obj
阅读(290)
推荐(0)
摘要:
基本概念 1、HTML5规范允许用户自定义网页上任一元素全屏显示 2、requestFullscreen() 开启全屏显示、cancleFullscreen() 关闭全屏显示 3、不同浏览器兼容性不一样 4、全屏伪类div:-ms-fullscreen,表示在全屏后的状态
阅读全文
posted @ 2017-12-26 11:04
var_obj
阅读(2405)
推荐(0)
摘要:
基本概念 1、传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便 2、h5存储设置、读取方便,而且容量较大,sessionStorage约5M、localStorage约20M 3、h5存储只能存储字符串,可以将对象JS
阅读全文
posted @ 2017-12-26 10:47
var_obj
阅读(334)
推荐(0)
摘要:
获取地理位置 地理坐标抓取 百度API展示
阅读全文
posted @ 2017-12-26 10:29
var_obj
阅读(262)
推荐(0)
摘要:
基本情况 在HTML5的规范中,我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启的。 拖拽元素 页面中设置了draggable="true"属性的元素 目标元素 任意元素都能成为目标元素 事件监听 默认事件 拖拽案例
阅读全文
posted @ 2017-12-24 17:04
var_obj
阅读(242)
推荐(0)
posted @ 2017-12-24 16:59
var_obj
阅读(151)
推荐(0)
摘要:
自定义进度条 1、video标签是内联块,可以设置宽高,但是需要用大盒子将其包裹起来进行定位 2、小盒子设计成进度条样式,并进行定位 3、进度条样式中的特殊按钮可以用web字体 4、通过点击实现视频的暂停/播放 改变按钮的样式 5、获取视频的总时长,放到totalTime中 6、当视频播放的时候,
阅读全文
posted @ 2017-12-24 16:53
var_obj
阅读(214)
推荐(0)
摘要:
基本方法 基本属性 基本事件 全屏方法 更多介绍
阅读全文
posted @ 2017-12-24 15:22
var_obj
阅读(196)
推荐(0)
摘要:
鼠标滚轮 基本描述 1、我们使用插件fullpage,为了更好的兼容性 2、动画效果是在滚动到这一屏时触发的,此时给当前屏幕加current类,其他的移除current类 3、动画的效果的过渡状态是必须在移除current类的时候移除,在添加current类的时候添加 网址:http://www.d
阅读全文
posted @ 2017-12-22 16:38
var_obj
阅读(2485)
推荐(0)
摘要:
基本介绍 1、自定义网页特殊字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去。 2、支持程度比较好,甚至IE低版本浏览器也能支持。 3、web字体的大小鉴定是字体的高度 字体格式 1、.eot格式:IE专用字体,支持浏览器IE4+ 2、.ttf格式:Windo
阅读全文
posted @ 2017-12-22 14:54
var_obj
阅读(3491)
推荐(0)
摘要:
1、有图片的盒子,最好是父盒子设置伸缩属性,a标签设置伸缩比例1,img标签宽度100% 2、不要见到父盒子就设置伸缩属性,而是根据子盒子是否占据一行,若是子盒子占据一行,那么只要给子盒子设置伸缩比例就行了 3、父盒子设置伸缩属性,子盒子的盒子模式就会变成box-sizing:border-box
阅读全文
posted @ 2017-12-22 14:36
var_obj
阅读(628)
推荐(0)
摘要:
基本概念 1、父盒子设置了伸缩属性,子盒子设置伸缩比例 2、以上设置完之后子盒子会按照比例分布在父盒子中 3、当设置伸缩比例时默认会按照x轴方向分配,因为默认情况下伸缩布局主轴方向是x轴方向 4、设置伸缩属性,没有设置具体宽度,默认是100% 5、父盒子设置了伸缩属性,子盒子设置伸缩比例,子盒子不会
阅读全文
posted @ 2017-12-22 11:51
var_obj
阅读(588)
推荐(0)
摘要:
基本概念 1、主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 2、侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 3、方向:默认主轴从左向右,侧轴默认从上到下 4、主轴和侧轴并不是固定不变的,通过flex-direction可以互换 效果特征 1、设置了伸缩属性,在没有设置宽度的情
阅读全文
posted @ 2017-12-22 11:11
var_obj
阅读(2252)
推荐(0)
摘要:
基本概念 1、多列布局类似报纸或杂志中的排版方式,上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量
阅读全文
posted @ 2017-12-21 12:00
var_obj
阅读(3394)
推荐(0)
摘要:
1、秒钟转360度需要60s分60步 2、分针转360度需要3600s分60步 3、秒钟转360度需要43200s分60步
阅读全文
posted @ 2017-12-21 11:55
var_obj
阅读(513)
推荐(0)
posted @ 2017-12-21 11:51
var_obj
阅读(726)
推荐(0)
摘要:
太阳的发散效果主要是利用transform: scale(1.3),将物体变大
阅读全文
posted @ 2017-12-21 11:50
var_obj
阅读(824)
推荐(0)