chaihongjun.me

HTML5新增加标签小结

HTML5新增加标签小结

chaihongjun阅读(161)未知

!--结构化标签--header用在页面头部或者版块的头部/headernav导航/navhgrouph1主标题/h1h2副标题/h2/hgroupsection一个区块/sectionarticle相对结构完成独立的内容,比如一...

38种HTML5+CSS3的loading效果

38种HTML5+CSS3的loading效果

chaihongjun阅读(109)未知

用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。 这里收集了...

flex布局容器和伸缩项手册

flex布局容器和伸缩项手册

chaihongjun阅读(123)未知

...divclass=containerdivclass=son/divdivclass=son/divdivclass=son/divdivclass=son/divdivclass=son/div/div... .container{flex-direction:row(default)|row-reverse|column|column-reverse#容器内项目的排...

CSS3求婚动画

CSS3求婚动画

sunweiling阅读(91)https://segmentfault.com/u/leap

效果图如上图所示 —————————————————————— 首先是新郎的动画 .w-mimg{margin-right:0;float:right;margin-top:60px;animation:toWoman0.5sease.5sboth;...

HTML元素属性速查表

HTML元素属性速查表

柴宏俊阅读(133)chaihongjun.me

a meta self-closing inline block abbr meta self-closing inline block address meta self-closing inline block area meta self-closing inline block article meta self-closing inline block aside meta self-cl...

简单图解flexbox

简单图解flexbox

柴宏俊阅读(99)chaihongjun.me

属性 1. display: flex 示例如下 上面4个 div 默认为 display: block 我们给其父级容器添加 #container{display:flex;} 其实把每个 div 添加了一个 flex context (弹性上下文) 属...

rem布局手机端页面自适应解决方案

rem布局手机端页面自适应解决方案

柴宏俊阅读(189)chaihongjun.me

原文链接: http://www.jianshu.com/p/985d26b40199 这里做简要概述如何使用和注意的地方,首先是使用方法 不要在页面中添加viewport,让下面的代码自动生成 在源码...

8张动图学会flex布局

8张动图学会flex布局

柴宏俊阅读(87)chaihongjun.me

Flexbox 实现了帮助我们脱离 CSS 苦海(例如垂直居中)的目标,但想精通它却需要你应对一些挑战。所以,我们将通过一些动画让你直观地了解 Flexbox 的工作...

CSS display 属性详解

CSS display 属性详解

zhanfang阅读(177)http://zhanfang.github.io/2016

最近瞎忙了好长一段时间,一直没时间写文章,想深入学习一下css的相关属性,所以有了这篇文章,如有错误请指针。 display的所有属性 123456789101112131415...

MobileWeb适配之路

MobileWeb适配之路

柴宏俊阅读(71)chaihongjun.me

最近博主在研究更先进的mobileWeb页面自适应方法,以前是使用的定宽方法,看到网上有三篇文章《 手机端页面自适应解决方案—rem布局 》《 手机端页面自适...