移动端H5/CSS3
似曾相识-
http://blog.csdn.net/liaozhongping,不积跬步无以至千里,不积小流无以成江海
展开
-
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。HTML5的新标签元素有:定义页面或区段的头部;定义页面或区段的尾部;定义页面或区段的导航区域;页面的逻辑区域或内容组合;定义正文或一篇完整的内容;定义补充或相关内容; 使用他们能让代码语义转载 2015-09-18 10:19:31 · 918 阅读 · 0 评论 -
transition与animation的区别
相同点:(1)指定要监听的CSS属性的变化(2)设置定时函数改变的一个属性值变换到另一个属性值的速率(3)指定一个时间来控制动画或过渡会花多长时间(4)程序式描述动画和过渡的事件(5)CSS属性变化可视化不同点:主要体现在触发方式,循环方式,如何定义复杂的动画,跟JS的搭配使用(1)触发方式transition只作为一种反应过渡到一个CSS属性已经改变了。一个常见的场景是你使用:hover伪类来改...原创 2018-03-10 21:22:41 · 5047 阅读 · 0 评论 -
响应式RWD和自适应
一、通俗的说,自适应网页设计也是响应式网页设计,响应式网页设计也是自适应网页设计。但是真正的细分起来,自适应只是响应式的一个子集,指网页中整体大图的自适应或者banner的自适应。响应式网页设计优势:流体网格的网站适合响应式网页设计。( 响应式的体验 http://segmentfault.com/) 1、灵活性强,可以适应不同分辨率的设备 2、方便快捷的解决多设备显示转载 2016-07-26 22:05:25 · 2102 阅读 · 0 评论 -
移动WEBAPP开发常规CSS样式总结
我所使用到的HTML页面标签:Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 ;详细说明我就不说了,只给新手说下,为什么W3C那么多标签,只使用16个就可以把整个项目解决了?原因是不要以为标签多,我们就一定要使用到它的,我们要的是使用广泛的,易记的。稍微解释下,块级元素和转载 2016-07-25 16:32:59 · 9897 阅读 · 0 评论 -
原生APP和Web APP的区别
Native App开发Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。Web App开发Web App开发即是一种框架型APP开发模式(HTML5转载 2015-09-20 00:37:08 · 8211 阅读 · 0 评论 -
源生代码(native)和H5的交互
android:1: 默认的事情:android 通过内置的UI控件WebView来加载网页。 网页是用一个网络地址来表示的: 其整个使用方法很简单如下:(android不关心实际的html5代码)String mUrl ="http://www.baidu.com"; //代表了某个网页的网址 WebVie原创 2015-09-21 00:09:01 · 1137 阅读 · 0 评论 -
hammerJs-v2.0.4详解
一、前言移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了。虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqery。Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在后面的版本能够逐渐支持起来。最初在开发移动端Web的时候使用w3c标准的语法结构和原生的转载 2016-03-23 17:49:19 · 481 阅读 · 0 评论 -
移动端点击事件触发顺序
移动端页面事件触发顺序和事件触发规则不同于PC端,一般都知道click在移动端会延迟200~300ms触发。本文从实例出发,演示移动端事件的触发规则和顺序。HTML页面:?123456789101112131415161原创 2015-09-24 02:02:07 · 3401 阅读 · 0 评论 -
CSS3 新特性小结
CSS3新特性概览:(1)功能强大的选择器(2)文字效果(3)边框,背景(4)色彩模式(5)盒布局和多列布局(6)渐变(7)动画(8)媒体查询在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序,提高用户体验,同时也能极大的提高程序的性能。CSS3 选择器(Selector)写过 C原创 2015-07-28 23:48:19 · 717 阅读 · 0 评论 -
让老版本IE支持HTML5
一直想入手C3和H5,但因为所开发的项目一直要求兼容IE7,IE8。而这两个浏览器并不支持html5,所以一直都在观望而未真正的投入太多精力去学习。尽管我知道h5和c3是主流。 在最近的项目开发中,偶然的一个机会,让我了解了两个js插件。而这两个组件正好解决了我的困扰。有句话讲得好:“万事俱备,只欠东风!”。说了这么多,接下来正式说说东风。 html5shiv.js和respond.j转载 2015-09-24 02:23:02 · 966 阅读 · 0 评论 -
::before和::after伪元素的用法
一、介绍css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::before和::after下特有的content,用于在css渲染中向元素逻转载 2015-09-28 10:44:37 · 7023 阅读 · 0 评论 -
【移动前端开发实践】从无到有(统计、请求、MVC、模块化)H5开发须知
前言不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦!我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没设计,当时评审需求的时候居然有一个产品经理拿了一份他设计的数据库,当时我作为一个前端就惊呆了......最初的前端只有我1人,这事实上与我想来学习学习的愿望是背道而驰的,但既然来都转载 2015-09-28 10:50:10 · 1497 阅读 · 0 评论 -
HTML5 Boilerplate
主要特性:精简并且适合移动设备;针对Google Analysis进行了优化;提供适合移动设备的图标;文档内容丰富,包含众多使用技巧和提示。内置Nomalize.css v1.0.x。内置jQuery和Modernizr特征检测库。提供Apache等服务器的设置,以此保证网站的高性能。web 开发团队的一个常见实践是创建一组标准文件,团队成员基于它们开始 web转载 2015-08-02 09:26:04 · 1128 阅读 · 0 评论 -
移动平台前端开发总结(针对iphone,Android等手机)
移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定的了解,需要对HTML5和CSS3有一定的了解。1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 (1)原创 2015-08-05 23:28:16 · 914 阅读 · 0 评论 -
HTML5中类jQuery选择器querySelector的使用
简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。element =转载 2015-09-18 10:15:18 · 838 阅读 · 1 评论 -
localStorage兼容方案实现
1、 你知道什么是localStorage(不知道,猛击这里进行补课)2、 你需要一个兼容IE系列的本地存储方案(不考虑低版本IE的请飘过或直接看二次包装)兼容方案效果: 所有主流浏览器支持以下方法和属性: window.localStorage 的 getItem/setItem/removeItem/clear/key 方法以及转载 2015-09-18 10:17:59 · 5933 阅读 · 0 评论 -
localstorage兼容ie8以下浏览器的问题
最近在做一个网站,由于希望尽可能减小服务器的压力,也想提高网站的运转速度,就想尽可能少的在服务器上读写数据以及下载重复数据,需要重复使用的数据,就储存在本地,能在本地进行的运算,尽一切可能在本地完成。 于是就出现一个本地存储数据的问题。如果ie不是国内最广泛的浏览器,如果ie9(ie8存在一些问题,后面再说)已经得到普及,那么一切就都很简单了,用html5的localstorage,一切都转载 2015-09-18 10:18:46 · 18635 阅读 · 0 评论 -
canvas详解
1. canvas是HTML5的核心技术,其厉害之处:(1)绘制图形(2)绘制图表(3)动画效果(4)游戏开发2. canvas与svghtml5有两个主要的2d图形技术:canvas和svg。事实上canvas与svg是完全不同的技术,canvas与svg的关系,就像“美术与几何”的关系一样,区别:(1)canvas是使用javascript动态生成的,svg则是使用xml静态描述的(2)c...原创 2018-02-25 20:30:37 · 882 阅读 · 0 评论