Category: Div / Css / XML / HTML5 / SVG

移动前端工作的那些事—前端制作篇之javascript篇

javascript(简称js)语言在移动前端应用很广。可以说必不可少,许多效果都是和js相关的。包括现在移动端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。这些都是基于js而进行编写的。这篇暂时不讨论这些框架。以后会慢慢介绍其中的一两个框架的具体使用方法。这篇主要讨论一下部分常用的js事件在移动端的使用。举几个例子: 1、隐藏地址导航栏: <script type="text/javascript"> // 该函数由Simon Willison编写,它只有一个参数,该参数表示被调用的函数名(在页面加载完毕时执行的函数的名字) function a… Read More

用纯 CSS 为 HTML checkbox 添加自定义样式及动画效果

一般情况下,<input type="checkbox">元素(也包括一部分其他input元 素)是由操作系统(而非浏览器)进行渲染的。在不同操作系统下,这类特殊元素的样式往往和系统本身的风格一致,和浏览器无关。也正是由于这种机制,开发者 无法像一般元素那样使用 CSS 来修饰这类元素。这里介绍一种利用纯 CSS 实现自定义 checkbox 样式的方法。思路很简单:由于控件所对应的label元素是可以点击并切换控件状态的,而label元素的样式又可以自由设定,因此我们可将input元素隐藏,通过label元素实现交互。 HTML 代码如下: <input type="checkbox" id="che… Read More

CSS:去除点击链接和按钮时出现的虚线框

在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。 这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。 但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以在视觉设计上反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使浏览者的视觉享受能够完美无瑕。 那么,如何去除这些点击时才会出现的虚线边框呢? 1. outline:none; 通常我们会这… Read More

【特别推荐】Web 开发人员必备的经典 HTML5 教程

对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西。唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进。本文将分享能够帮助您快速掌握 HTML5 的实例教程,值得好好学习。 Measuring Page Load Speed with Navigation Timing Navigation Timing 是用于精确测量网站性能的 JavaScript API。该 API 提供一种简单的方式来获得准确,详细的时序统计,页面导航和负载事件。它可现在能够在Internet Explorer 9,谷歌 Chrome 和 Firefox 中使用。本文介绍了该 API 以及如何利用… Read More

推荐10款非常优秀的 HTML5 开发工具

HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写 HTML5 应用。 Initializr Initializr 是制作 HTML5 网站最好的入门辅助开发工具,你可以使用提供的特色模板快速生成网站,也可以自定义,Initializr 会为你生成代码简洁的可定制的网页模板。 → 访问 Initializr HTML5demos 想知道你的浏览器是否支持 HTML5 Canvas 吗?想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗?HTML… Read More

九个让人难以置信的HTML5和JavaScript实验

Google的 Chrome实验室 收 集了很多让人难以置信的基于 HTML5 Canvas 和 JavaScript 的实验项目,里面的例子都很独特,让人惊叹。我从未想过结合 HTML 和 JavaScript 能实现这么强大的效果。今天,本文与大家分享其中9个很棒的例子,为了有更好的效果,建议在Chrome浏览器中浏览。 Untangle 拖动蓝点,让所有线都不相交,看看你多久能解开? 🙂   Z Type 一款太空射击游戏,基于ImpactJS游戏库开发。   Cube Out 模仿经典的益智游戏Blockout(三维俄罗斯方块),移动和旋转方块填补空白,完成一层后会自动消隐。   Bounce 一款jav… Read More

部分国行Android手机缺少谷歌GMS服务包导致HTML5 Geolocation无法定位的问题

最近项目上用到HTML5的geolocation用于定位,用Chrome和手头的手机测试好好的功能,到终端用户那里反馈一些手机不能定位,最 后确定出是部分三星、摩托的部分国行Android手机“阉割”了谷歌GMS服务包,导致HTML5的geolocation无法使用wifi和基站定位 服务导致。 值得一提的是前期在stackoverflow和google groups里搜到对症描述的解决方案(貌似Android 2.*或者三星自身的问题)全部失效,因为介是个“中国特色”的问题-_lll 首先介绍下HTML5的Geolocation功能。通常情况下,我们是先判断浏览器是否支持geolocation, 如果不支… Read More

HTML5 地理位置定位(HTML5 Geolocation)原理及应用 (调用GPS)

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。 在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。 HTML5 Geolocation API 使用非常简单,基本调用方式如下: if (navigator.geolocation) { na… Read More

使用 HTML5 Geolocation 构建基于地理位置的 Web

本文将介绍 HTML5 提供的一个全新功能:Geolocation,它允许用户在 Web 应用程序中共享他们的位置,使其能够享受位置感知服务。首先本文将介绍 HTML5 Geolocation 位置信息的构成:纬度、经度,以及获得这些数据的途径(GPS、Wi-Fi 和蜂窝站点)。然后将讨论 HTML5 地理定位数据的隐私问题,以及浏览器如何使用这些数据。最后本文将探讨它在实际中的应用,演示并让您学会如何使用它构建一个实用的基于地理位置的 Web 应用。 HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中。自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTM… Read More

HTML head 头标签

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。 DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。   DTD(Document Type… Read More

初步认识 LESS

LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观。LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap)。本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化,及其典型的应用场景,并将其与其他样式表语言进行比较。相信前端开发工程师会喜欢 LESS,灵活运用 LESS 以提高开发效率。   LESS 背景介绍 LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码,在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了(例如 Twitter 提供的 bootstrap 库就使用了 LESS)。那么,LESS 是从何而来呢?它和 SASS… Read More

html5游戏制作入门系列教程(一)

从今天开始,我们将开始HTML5游戏开发一系列的文章。在我们的第一篇文章中,我们将讲解在画布canvas上的基础工作,创建简单的对象,填充和事件处理程序。另外,要注意在这个阶段中,我们不会立即学习WebGL相关的3D部分。但我们会尽快在未来的WebGL。   在每篇文章中,我们都将学习到一些新的东西。我们第一次创建一个对象,有7个顶点,这些顶点,我们将绘制圆,我们将能够拖动这些顶点。此外,我们将顶点对象填充为半透明色。我认为这是作为入门教程已经足够了。   这里有我们的演示和下载包: 在线演示 源码下载   好吧,下载文件,然后让我们开始编码吧!   步骤1:HTML 这里是… Read More