• H5单页面手势滑屏切换原理
    H5单页面手势滑屏切换原理
    H5单页面手势滑屏切换是采用HTML5触摸事件(Touch)和CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路。1、实现原理假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(w
    html5 2017-02-05
  • 精选!CSS 动画之工具、框架和教程
    精选!CSS 动画之工具、框架和教程
    在这篇文章中,我们将不讨论使用CSS动画的好处,也不会谈论JS动画是否比CSS动画更快,而是与你分享一些CSS工具,框架和教程。它们将有助于缓解你在学习CSS动画中的困扰,并帮助你节省一些时间。CSS动画工具和框架1.Animate.cssAnimate.css是一个
    css 2017-02-05
  • HTML 5.1 — 14 项新增特性及使用案例
    HTML 5.1 — 14 项新增特性及使用案例
    HTML5属于万维网联盟(W3C),这个组织为整个网络界提供了标准,如此形成的协议可在全世界通行。在2016年11月,W3C对长期行使的HTML5标准进行了更新,它是2年内的第一次小更新。许多最开始提出的HTML5.1功能特性都因为设计上的缺陷和缺乏浏览
    HTML5 2017-02-05
  • CSS 继承深度解析
    CSS 继承深度解析
    我酷爱模块化设计。长期以来我都热衷于将网站分离成组件,而不是页面,并且动态地将那些组件合并到界面上。这种做法灵活,高效并且易维护。但是我不想我的设计看上去是由一些不相关的东西组成的。我是在创造一个界面,而不是一张超现实主义的照片。
    CSS 2017-01-06
  • HTML 交互式表单验证
    HTML 交互式表单验证
    在HTML中创建表单总是有点复杂。你首先得将HTML标记编写正确,然后需要确保每一个表单项在提交之前都有一个可用的值,最后还需要在有问题时用提醒来告知用户。还好HTML5引入了一些新的特性,让这件事情变得轻松了许多。特别是对表单控件进行了
    HTML 2016-12-23
  • CSS 高级布局技巧
    CSS 高级布局技巧
    随着IE8逐渐退出舞台,很多高级的CSS特性都已被浏览器原生支持,再不学下就要过时了。用:empty区分空元素兼容性:不支持IE8Demo假如我们有以上列表:divclass=itema/divdivclass=itemb/divdivclass=item/div我们希望可以对空元素和
    CSS 2016-12-23
  • css预处理语言的模块化实践
    css预处理语言的模块化实践
    编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋。对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目,那就需要对css进行管理和规范了,否则会发生不可挽
    css 2016-12-23
  • 从css谈模块化
    从css谈模块化
    模块化是现今我们随处都可以听到的一个名词,什么是模块化?为什么我们需要模块化?这是本系列文章我们要弄明白的一个问题。我们也借这部分内容,顺带回顾一下前端的发展历程。说实话,模块化这个主题有点大,我一时也不知道从哪里讲起比较合适,通常来说,前
    css 2016-12-23
  • Meta标签的那些事
    Meta标签的那些事
    Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务。我现将前端页面开发经常用到的meta标签内容
    Meta 2016-12-23
  • 十分钟入门 Less
    十分钟入门 Less
    我们都知道写CSS代码是有些枯燥无味的,尤其是面对那些成千上万行CSS代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的CSS可维护,但它本不应该这样的。很幸运,网
    Less 2016-12-23
  • HTML5 语义化 - main
    HTML5 语义化 - main
    早在2013年,main元素就被正式添加到W3CHTML规范中,到目前位置,关于该元素的定义已经很完善了,所以现在是时候深入了解什么时候适合使用main元素了。那么,下面就开始吧。W3C规范main的主要目的是将ARIA的地标性作用main映射到H
    HTML5 2016-12-23
  • HTML5.1 里的新东西
    HTML5.1 里的新东西
    HTML5.1概览两年前HTML5标准的发布对于web开发社区来说是一件大事。不仅是因为它包含了一系列让人印象深刻的新特性,还因为它是1999年发布的HTML4.01标准以后,对HTML的第一个大版本更新。你现在依然可以看到一些网站夸耀他们在使用现代的HTML5标准。
    HTML5 2016-12-11
  • 原生 CSS 网格布局学习笔记
    原生 CSS 网格布局学习笔记
    译者注:此文适合有一定CSS原生网格布局使用经验的开发者(读前需要先去了解一下原生CSS网格的语法),原生CSS网格布局(NativeCSSgrid)截止目前还没有被任何正式版本的浏览器实现。以下是来自OliverWilliams的帖子.Oliver已经学习了相当长时间的原
    CSS 2016-12-11
  • CSS专家、阿里巴巴前端技术专家大漠:纵览布局演变史
    CSS专家、阿里巴巴前端技术专家大漠:纵览布局演变史
    最近有一个关于CSS的话题既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢?。对于这样的话题,大家或许觉得没有什么,顶多也就是各种槽点。但事实上,在天朝CSS很多时候是不被看好,相比国外的同行,很少有人在专研CSS领域。这也造成,能写好CSS的同
    csdn 2016-12-11
  • Bootstrap 4: 对比普通网格和 Flexbox 网格
    Bootstrap 4: 对比普通网格和 Flexbox 网格
    我们都熟悉Bootstrap3的风格系统,而Bootstrap4带来了一些网格系统的变化。其中包括新的XL网格等级,一些修饰类的变化,以及一个全新的flexbox版本的网格系统。常规的网格系统和flexbox网格系统并不兼容,每个人都得在他们的项目中选择其
    Bootstrap 2016-12-11
  • 15 个有趣的 JavaScript 与 CSS 库
    15 个有趣的 JavaScript 与 CSS 库
    在十一月份的前端技术列表中,我们整合了一些令人感到惊叹的GitHub项目,其中包含了新的CSS框架、node.js包管理器,以及用于实现图标、加载效果、工具提示的纯CSS解决方案。那么,让我们一起来看看吧。HaveFun!1.WingWingWing是一个微型
    JavaScriptCSS 2016-12-11
  • W3C推荐使用HTML 5.1
    W3C推荐使用HTML 5.1
    Web平台工作组发布了HTML5.1的W3C建议书。本规范定义了万维网核心语言第五个主要版本的第一次次要修订。在这个版本中,加入了新的特性以帮助Web应用程序作者的开发,基于当前开发实践引入了新的元素,持续关注用户代理定义的一致性,来改善交互体验。
    HTML5 2016-11-07
  • 纯 CSS 创建各种不同的图形形状
    纯 CSS 创建各种不同的图形形状
    介绍今天,我们要学习如何使用简单的CSS来创建不同类型的平面图形。使用代码矩形.rectangle{width:250px;height:150px;background-color:#6DC75F;}div/div三角形.triangleUp{border-left:75pxsolidtransparent;border-right:75pxso
    CSS 2016-10-31
  • 12 个 CSS 高级技巧汇总
    12 个 CSS 高级技巧汇总
    下面这些CSS高级技巧,一般人我可不告诉他哦。使用:not()在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的nth-child选择项目对图标使用SVG优化显示文本对纯CSS滑块使用max-height继承box-sizing表格单元格等宽用Flexbo
    CSS 2016-10-31
  • css 实现竖直居中的 N 种场景及 N 种方法
    刚开始工作的时候,css里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜,搜,搜,半天才搜到合适的解决方法。然后下次遇到,呃,又忘了~后来仔细回忆了一下,其实CSS实现竖直居中是有几种不同的应用场景的,需要分别使用不同的解决方法。这也是为
    css 2016-10-31