HTML5在线教程和技术博客

  • 创建非矩形网页页面元素的常用技术和实例代码

    非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来达到非矩形设计的界面效果。使用透明图片遮盖[TD_Editor] data-height=450 data-theme=embed data-slug-id=33381 data-default-tab=result class=tdwow[/TD_Edito...

    阅读全文 收藏 评论 (0) 阅读 (398) 2017-03-01 17:07:11  
  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独的属性,比如[type],或者可以是一个属性和取值的组合,比如[type=checkbox] 或 [for="email"]。我们也可以用属性选择器来匹配属性存在与否以及子字符...

    阅读全文 收藏 评论 (0) 阅读 (300) 2017-02-21 18:15:59  
  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。这样CSS看起来更像一门样式“语言”了。在这之前,我们得使用SASS(SCSS)预编译方式来支持变量,现在你可以直接在CSS代码中使用变量。该特性的规范描述在

    阅读全文 收藏 评论 (0) 阅读 (310) 2017-02-07 12:35:59  
  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Query)来检测屏幕尺寸,从而实现响应式界面设计。
    而特性查询则用来查询用户代理(如桌面浏览器)是否支持某个CSS3的特性,这个功能除了IE之外,已被其他浏览...

    阅读全文 收藏 评论 (0) 阅读 (276) 2017-02-06 12:01:46  
  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当我们需要用计算机来模拟人类这个最简单的动作时,通过观察和分析,我们可以把步行简化为下面这样的一个过程:(1)中分:(也称作:contact 接触点)这是我们人为...

    阅读全文 收藏 评论 (0) 阅读 (660) 2017-01-15 22:59:39  
  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范定义,box-decoration-break被用来处理分页(page-break)或断行(line-break)时元素的...

    阅读全文 收藏 评论 (0) 阅读 (464) 2017-01-01 19:20:48  
  • CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是...

    阅读全文 收藏 评论 (0) 阅读 (473) 2016-12-08 16:14:54  
  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction和flex-wrap属性的简写方式,语法如下:flex-flow: &flex-direction< || &flex-wrap{>> >>>>display:>flex;>> }>> .flex-container.first>{>> >>>>flex-flow...

    阅读全文 收藏 评论 (0) 阅读 (527) 2016-12-08 16:11:30