通过CSS来创建精细、复杂的效果，成为了Web前端开发的未来趋势。世界各地的设计师认为CSS3是一项非常具有潜力的技术，未来将会创造更多不可思议的美妙设计。 本文为Web开发者带来了一些与CSS3相关的教程，通过这些教程，你可以快速、直观地了解到CSS3的强大功能。 1. ...

arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是 ...

canvas的方法 save()保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext()返回一个对象,指出访问绘图功 ...

1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas> ...

说说 float 的几个要点就行了：只有左右浮动，没有上下浮动。元素设置 float 之后，它会脱离普通流（和 position: absolute; 一样），不再占据原来那层的空间，还会覆盖下一层的元素。浮动不会对该元素的上一个兄弟元素有任何影响。浮动之后，该元素的下一个兄弟元 ...

完成的效果如下 查看效果并下载 Step 1：先了解border的原理： Step 2：HTML代码结构 Html代码 <section class="playContainer"> ...

Onsen UI 是一个基于元素自定义的 HTML5 UI 框架，用于构建你的移动前端。这个一个基于 Web 组件的概念的框架，让构建应用程序变得更加轻松。Onsen UI 专门针对 PhoneGap 做了优化，特别适合用于开发 Hybird 模式的应用程序。您可能感兴趣的相关文 ...

各位网友，大家好，我是陌上花会开，今天这个案例，我将带领大家,手把手教大家开发一个会发光的表单组，还是先秀运行效果图吧：从这个效果图，大家可以发现，当光标在某个组件上时，它就会发光，今天我将带领大家实战开发这个特效。PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效 ...

在前端开发的过程中，遇到一种情况，需要勾选，为了用户的操作便捷就将click事件放到了DIV上。（其中使用了knockout.js）代码大概如下：<div id="one" data-biind="click:clickevent"& ...

1、浏览器支持的不一致性浏览器的漏洞或缺乏支持的CSS功能，导致不同的浏览器显示出不同的CSS版面编排。例如在微软Internet Explorer6.0的旧版本 ，执行了许多自己的CSS2.0属性，曲解了很多重要的属性，例如：width，height，和float。许多所谓的C ...

最近忙着将项目内的jquery 2换成zepto因为不想引用过多的zepto包，所以花了点时间zepto真的精简了许多，源代码看着真舒服 正好项目内需要一个划屏插件，就用zepto写了一个逻辑其实很简单，但没想到测试时，在老版本android设备浏览器上的touchmove有 ...

1. 获得一个favicon.ico的图标，大小为16px×16px最为合适2. 将制作好的图标文件Favicon.ico上传到网站的根目录；3. 在首页文件的html代码的头部中加入如下代码:<link rel="Shortcut ...

这次主要给大家分享10款风格各异的CSS3按钮，如果你希望你的页面也能有很炫的样式，那么我相信这10款CSS3按钮就非常适合你，而且每一款都整理了源代码供参考，一起来看看吧。1、绚丽的CSS3发光按钮特效这是用纯CSS3实现的一组按钮特效，这组按钮不仅色彩绚丽，更重要的是如果在c ...

转自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]一、写在前面的秋裤早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~ ...

纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。先上效果图： 点击这里在线预览代码非常简单。没有用任何javascript代码。纯css3实现。html代码： <div class="content"> <div ...

本来今天想出JavaScript继承的博文的，由于也才刚学习不久，以及工作比较忙，所以暂推两天写JavaScript的继承，喜欢的童鞋们关注我的博客哟！　　okay，言归正传。之前在接触前端的时候，处理各种浏览器的兼容问题，现在也有了一定的积累，对IE系列的CSSbug也写了一篇 ...

HTML标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。实例<h1>This is a heading</h1><h2> ...

HTML 属性属性为 HTML 元素提供附加信息。HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。=============== ...

【前言】此处介绍的方法只是我个人的用法，相信大家有更好更简洁的方式。 上次写到利用LiveReload解放F5。而且LiveReload可以编辑sass/less/stylus。但是可惜发现LiveReload在编译的时候不能抛错，这就很麻烦了，少了个标点less编译就不过，查找 ...

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/为什么在CSS中不要再使用@import ...

在PC版开发中由于IE原因，我们很少用到css3，但随着平板和智能手机进入我们的生活，以及现在越来越流行，在手机版和平板版开发中我们就可以大胆的使用了，下面我们探讨常用几个css3属性： 1.css3前缀使用介绍，我们直接看个例子： Java代码 -webkit ...

作为一个软件开发人员，经常接触和使用框架是再平常的事情不过了。但是这些框架基本都是和语言相关的，比如WEB框架SpringMVC，JavaEE框架Spring，ORM框架Hibernate，还有JavaScript框架jQuery。可是CSS也有框架，很多人却没有听说过。CSS也 ...

html5 自定义数据属性 ，也就是 data-* 自定义属性。 　　　　 例如<div data-last-value="43" data-hidden="true" da ...

上一篇我们自定义CPU和内存的展示界面效果，这篇我们将继续采用HT完成一个新任务：实现一个能进行展开和合并切换动作的刀闸控件。对于电力SCADA和工业控制等领域的人机交互界面常需要预定义一堆的行业标准控件，以便用户能做可视化编辑器里，通过拖拽方式快速搭建具体电力网络或工控环境的场 ...

:hover是在CSS中用来制作效果最常用到的一个伪类，比如：标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的，对于只支持css1的浏览器就显示不出来。 在IE6中只兼容a:hover，要使用li:hover或di ...

我们把网页的常用的布局格式分为以下三种： 1.标准流。 所谓的标准流就是，行内元素自己单独一行，而块级元素是上下显示的。以前我们学习的都是标准流。 注意：标准流使我们网页布局中最稳定的一种结构 2. 浮动流 使我们学 ...

今天给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示，把鼠标放在按钮上试试，有惊喜哦！CSS3 引入了众多供功能强大的新特性，让设计和开发人员能够轻松的创作出各种精美的界面效果。　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari ...

1.<?"1.0" encoding="utf-8" ?><bookstore> <book category="children"> <title lang="en ...

做网站时经常有这样那样的需要，要美化input ，于是CSS的美化必不可少。和程序人生的站长交流，他发给我这个。下面是CSS样式 Js代码 input { border:1px solid #B3D6EF;　 background:# ...

IE6（7/8）不支持border-radius属性，所以其中的圆角效果显示不出来，可以通过引用ie-css3.htc的方法解决。 ie-css3.htc（点击可直接查看） 将文件放在放在页面的根目录下，并在css文件(或者<style>标签)中，加上 ...

有时候，你只是想创造一些真正很酷的效果。例如我们网站常见的关于我们（About us），我们的历史（Our history）等你想展示出一些让你的品牌与众不同的页面。图标填充效果可以帮你设计出一个很酷的网页，只需要几个图标即可，让简单的页面看起来也充满活力。　　温馨提示：为保证最 ...

做吸顶效果或是固定效果时，使用position:fixed无非是最方便的，可是万恶的IE6是没有fixed这个属性值的，而我们要使IE6能够像fixed一样固定在浏览器中的某个位置，使用onscroll改变top值是一个方法，但如果滚轮滚的快，会出现卡闪烁情况。而如高级浏览器如果 ...

CSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于CSS3的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。CSS是一种用于屏幕上渲染html，CSS选择 ...

1、IE6怪异解析之padding与border算入宽高 原因：未加文档声明造成非盒模型解析 解决方法：加入文档声明<!doctype html> 2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距） 解决方法：display: ...

:hover是在CSS中用来制作效果最常用到的一个伪类，比如：标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的，对于只支持css1的浏览器就显示不出来。 在IE6中只兼容a:hover，要使用li:hover或di ...

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”，如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了。解决“高度塌陷”的问 ...

本文等效灵感来自编程人生的一篇感悟。CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的 ...

最近一直在学习 html5，为了后期的移动项目进行知识储备。html5 相对于 html4 新增加了一些有趣的标签、属性和方法，今天主要介绍下 html5 的本地存储。在客户端存储数据html5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据 ...

HTML5 规范引进了很多新特性，其中最令人期待的之一就是 Canvas 元素，HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法，非常强大。下面给大家分享一个 HTML5 Canvas 绘制的 3D 布料图案效果。　　温馨提示：为保证最佳的效果，请在 ...

IE6（7/8）不支持border-radius属性，所以其中的圆角效果显示不出来，可以通过引用ie-css3.htc的方法解决。 ie-css3.htc（点击可直接查看） 放在网站的根目录下，并在css文件(或者<style>标签)中，加上 body { b ...

Pagekit 是一个模块化，轻量的 CMS 系统，基于现代化的技术，如 Symfony 组件和 Doctrine。它提供了一个很好的平台，用于主题和延伸开发。Pagekit 为您提供了工具来创造美丽的网站，不管它是一个简单的博客，企业网站或 Web 服务。 官方 ...

最近做了一个开发感想的网站，想把一些编程中的想法写下来。做网站过程中想做个TAB导航，正好记在这里。也欢迎大家多多访问我的网站。在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和A ...

由于工作的需求，促进我学习html5 canvas技术，canvas是html5最强大的元素之一。使用它可以在浏览器中做一番奇妙的事情。大家或多或少都听过canvas的强大用处，我这里就不再赘述了。 canvas的强大功能是通过canvas的context对象表 ...

给大家介绍了一个符合HTML5标准的网页的设计过程，在本篇文章中，我们紧接上一篇的内容，继续踏上HTML5之旅。　　文章的评论区域　　在文章后的读者评论区域中，我们使用的是sections标签，如下：<section id="comments">& ...

div+css早已是现在布局最常用的一种方式，可是布局又有许多种，因网站的功能、外表、适应人群而异，网站采用的布局也将是各式各样。常用的布局技术又有双飞翼布局、瀑布式布局、响应式布局等等，现实的前端开发中又常常不可能只用一门技术完成布局，往往需要多种技术相结合。而今天我将在这里为 ...

WEB页面的动画的制作及性能简介目前WEB页面做动画的方式大的分两种1.JS间隔时间不断修改元素属性值，这也是CSS3出来前常用的做法，貌似也是唯一的做法。2.CSS3出来之后支持动画了。大体的思路分这两种。要是各样功能组合细分就可以分出许多类来。本文主要介绍WEB页面做动画的一 ...

摘自：http://www.cnblogs.com/zhwl/p/3529473.html基本概念：1.text-align: 属性规定元素中的文本的水平对齐方式; 　　　　　　 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式;　　　　　　 一般 ...

client/scroll/offset width/height/top/left (盒模型为contentBox，定位原点是元素左上角边框最外层的交点) clientWidth width+左padding+右pa ...

前言：搜了半天，各种推荐，什么十大工具啦、优秀工具集合啦之类的咸淡文章，就是没有一个讲怎么弄的。配合官网的article自己研究了半天总算配置好了。顺便吐槽下官网关于sass/less设置这块说的模糊不清的。写个教程给大家，相信会对新手们有帮助的。声明：本文不涉及Grunt。开发 ...

1、天气预报插件 效果图： 源代码： <iframe width="650" scrolling="no" height="60" frameborder="0" allowtranspar ...

sass文件编译时候使用ruby环境，无论是界面化的koala工具还是命令行模式的都无法通过，真是令人烦恼。容易出现中文注释时候无法编译通过，或者出现乱码，找了几天的解决方法终于解决了。这个问题的奇葩之处在于在xp环境中没有任何问题，只是在windows7环境中才出现的这个。sa ...

各位网友，大家好，我是陌上花会开，今天这篇文章，我将手把手教大家如何开发一套纯CSS的折角效果。一如往常，我不提供代码下载，但是我可以保证，只要将教程中的代码复制到本地，绝对百分百获得与我演示的效果一样，希望各位明白我的用意。好了，直接开始今天的教程吧。首先，我先给大家演示一下今 ...

各位网友大家好，我是陌上花会开，人称陌陌。今天我带领大家开发一个仿天猫首页图片展示动画特效的案例。一如往常，我既不提供源码给大家，也不提供Demo给大家，只是希望大家能跟着我的讲解，然后将代码一步步复制到本地，本人可以保证，页面上的代码复制到本地，绝对百分百运行，且得到与陌陌一样 ...

其实前面的标准流和浮动流都很理解，就是定位不太好理解，特别是相对定位和绝对定位，很多刚开始学的同学不好区分。因此这里，小强老师和大家一起分享CSS定位的学习。通过我们前面的学习，我们网页布局方法： 1. 标准流 （最稳定） 2. 浮动流 ...

前言今天微博看到了寒冬大神的面试题，觉得挺有意思的，这里就做一点解答http://weibo.com/1196343093/Bhj510t50谈谈你对CSS布局的理解讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。谈谈你对Web前端组件化的理解，Web Component ...

标签名英文全拼标签语意divdivision分割spanspan范围olordered list排序列表ulunordered list不排序列表lilist item列表项目dldefinition list定义列表dtdefinition term定义属于dddefiniti ...

各位网友，大家好，我是陌上花会开，人称陌陌，在上一篇文章《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》 中，我已经手把手带领大家开发了一个鼠标滑过时的动画特效。这篇文章里，我将再带领大家开发另一个动画特效，希望大家能得到启发。还是一如往常，我不提供源码下载， ...

你难道还没有考虑使用 html5？ 当然我猜想你可能有自己的原因；它现在还没有被广泛的支持，在 ie 中不好使，或者你就是喜欢写比较严格的 xhtml 代码。html5 是 web 开发世界的一次重大的改变，事实上不管你是否喜欢，它都是代表着未来趋势。其实 html5 并不难理解 ...

1.前言。 ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。比如,下面是一个让网页支持canvas和css3的例子。 2.例子。 下面是一个在canvas画布中显示一个红球的例子的html ...

HTML5 和 CSS3 技术给 Web 带来了新的利器，点燃了 Web 开发人员的激情。所谓只有想不到，没有做不到，的确如此。下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的动画效果。　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Fir ...