Flex 布局教程:实例篇

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 本文转载自阮一…

Flex 布局教程:语法篇

网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实…

使用css sprites来优化你的网站在Retina屏幕下显示效果

CSS sprites(CSS图片精灵)已经存在很久了。事实上,八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要加载更多的图片。 对于小型网站,CSS Sprites并没有带来很大的变化,或许这样使用并不理想。但在…

10个绝对让你疯狂的HTML5和JS实验性展示

看看今日我们收集得绝对让你疯狂得HTML5和JS实验展示,这些演示验证了各种框架和超酷互动得性能。很多得演示都能在谷歌 Chrome和Firefox里流畅得运行,当然IE并不支持这些演示。 1. Canvas Sphere 由Emil Korngold渲染得一个超酷得3D点装球体实现得2D投影,使用…

DIV+CSS排版的一些简单规则

用web 标准设计网站,过渡的方法主要是采用 XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合 web标准的网站,不懂 CSS 是设计不出漂亮的页面的。

兼容大部分浏览器的CSS3圆角

解决CSS3圆角兼容所有浏览器的方法。本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待。 译 :前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CS…

HTML5和CSS3的生成工具资源和指南

HTML5和CSS3给我们带来了新的功能,在本文中,您就可以找到一些很好的工具,你可以更需要掌握这些新的功能。 也许这些新功能尚未完全支持,但它的一个很好的思想,学习新技术,所以你就可以充分使用他们时,他们都支持。成为现代设计师!   1,对CSS3选择器测试 启动的testsuite后,…