摘要：
一个元素不设置高度时，height的默认值是 auto，浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 css3动画呢？在MDN文档中css 支持动画的属性中的 height 属性如下 ：当 height 的值是 length，百分比或 calc() 时支持 css3 阅读全文
摘要：
增强现实（以下简称 AR）浪潮正滚滚而来，Web 浏览器作为人们最唾手可得的人机交互终端，正在大力发展 AR 技术。很多 Web 前端工程师也在寻求职业转型，于是我把我近半年的相关调研结果在此汇结成文。本文力求把目前前端方向的 AR 技术都罗列一遍，细节不赘述（保证文章篇幅不过长），只做概括和科普（ 阅读全文
摘要：
extarea称文本域【文本区】，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。textarea有maxlength属性，但是textarea不兼容ie8/9。如何实现textarea输入框限制字数长度的兼容问题呢？ 通常的做法就是使用JavaScript脚本语言来实现对textarea 阅读全文
摘要：
电商m站的首页，有一个需求是配一张大的banner图，然后指定某些区域是热区，点击之后跳转到不同的活动页。听起来简单明了，实现也比较容易，立刻就想起来有个map标签，简直就是为这个需求量身定做。 简单说下做法：我们首先会和后台约定一些规则，定义一个json对象。比如： { type: 1, widt 阅读全文
摘要：
Favicon请不要忘记为你的网站加上它，它就好像是你的网站的 ID。无论你有没有 favicon.ico ，用户的浏览器依然会请求它。如果你忘记加上这个档案，你的网站就会返回 404 Not Found，这会让浏览器面红。。。所以你要小心一点，避免给予用户负面的第一印象。要解决这个问题，你可以透过 阅读全文
摘要：
1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport 使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。 <meta name="viewport" content="wid 阅读全文
摘要：
有些人写页面会走向一个极端，几乎页面所有的标签都用div，究其原因，用div有很多好处，一个是div没有默认样式，不会有margin、background等初始化设置，另外可能会觉得不用div还能用啥。所以看他的页面，一展开是div，再展开还是div，展开四、五层都是div。 这样对用户来说虽然没什 阅读全文
摘要：
在 html5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。 web Storage可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明显。接下来我们来看看 indexedD 阅读全文
摘要：
一、基础布局方式 0. 普通/文档流 布局 早期 <table>， 后来 <div> ，再后来 html5 语意化标签按照自上而下的方式顺次排布。 1. Float 布局 float: left/right 最初设计目的是用于图文环绕排版、不过目前常用于左右布局。 2. 绝对布局 position: 阅读全文
摘要：
在做自适应网页的时候，如果在图片中使用了热区map。图片可以通过样式实现：图片大小随页面变化，但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章就介绍通过原生js来实现：MAP中每个area的坐标也随页面等比例的变化效果。 map area 热区自适应的实现代码 html: <s 阅读全文
摘要：
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果。这篇文章主要介绍下css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变的方法，以便大家学习参考！ 1、css背景颜色渐变 代码： <style> .content_bg{ width:600px;max-width: 100%;m 阅读全文
摘要：
这篇文章主要讲的是怎样制作流畅动画，特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点；接着会着重介绍用css3制作动画的注意事项。 1、用canvas、css3、jquery制作动画 Canvas 优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存 阅读全文
摘要：
创建剪切动画 对于剪切动画，使用clip-path代替width/height，避免DOM重排导致性能过低。 .animate { width: 200px; height: 200px; background: #000; animation: 1s clip; } @keyframes clip 阅读全文