CSS3

Responsive列布局

布局W3cplus说的也比较多了,但Responsive的列布局还是第一回说,(如果你是第一次听说Responsive这个词,建议你点击和先了解Responsive)。今天看到一篇有关于Responsive的列布局教程,觉得值得一读,将其译成中文,希望对有需要的同学有所帮助。

通常我们进行列布局,都需要在第一列添加一个类名“first”,在最后一列添加一个类名“last”,主要用来清除他们之间的margin,(有关这方面的介绍可以详细阅读为之写的《CSS解决方案》中的《项目列表解决方安》,这里详细介绍了类似于列布局的相关方法,或者点击这里了解如何避免重复列末尾的Margin。)而且还通过添加类名“clearfix”来清除浮动。这些都是比较古老的解决方案了,今天我们一起来看一个新方案,就是使用CSS3的伪元素选择器“nth-of-type”来实现一个简单的Responsive列布局效果。使用这种方法制作了一些WordPress主题模板。制作这些模板中,他没有使用“first”和“last”类名就实现了多列在不同设备下都能自适应,换句话说,他就是能实现四列、三列、两列等等之间的切换。

Responsive Web Design

上次花一天的时间写了一篇《Responsive设计的十个基本技巧》,在这篇文章中主要向大家介绍了Responsive设计的十个基本技巧,其中涉及的面也非常的广,一时理解或者说学习起来还是有一定的难度。有些初次听过Responsive的或者初次接触Responsive的同学还是有点难度,为了能帮助大家进一步的了解和学习Responsive,今天我为大家整理了一篇《Responsive Web Design》,这篇文章主要从几个内容引导大家如何学习Responsive设计。希望对大家有所帮助。

Responsive设计的十个基本技巧

Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也分享了很多这方面的教程和资源。由于组织了YY活动在线上和大家分享Responsive的设计,为了能让大家更好的理解,我自己也有必要好好的做一下功课,今天这个就是功课,想和大家一起分享一下Responsive设计的一些基本技巧,和相对应的学习资源,希望对大家有所帮助。

Medial Queries的另一用法——服务于IE

随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法,就是利用@media来做一些IE下的特殊效果。

细说百度图片栏目——图片展示效果

今天写个DEMO效果时,无意之中在Baidu图片中发现其图片列表使用了CSS3的transform,transition,box-shadow等属性。这是不是可以说百度在开始引领国内的CSSer开始使用CSS3相关属性呢?如果是的话,那这对于前端开发人员来说是一件福事。毕竟百度是国内互联网中大企业之一,他的一些举动都将有很多前端人员跟随着。这些都是我个人的猜想,仅供参考,因为我就是一个CSS3的爱好者,今天我想拿这个效果来说说自己的想法。如有不对还请谅解。

CSS3美化图片

有关于美化图片的教程,W3cplus有好几篇了,比如说《CSS3制作图片样式》、《jQuery和CSS3给图片制作圆角》这两篇是针对于美化图片圆角效果的教程,昨天在《CSS美化图片》一文中介了使用标签给图片设置朦板效果。

CSS3的calc()使用

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog,希望对大家有所帮助。

使用CSS3的appearance属性改变元素的外观

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。那么今天在这篇文章中我们一起来体会一下“appearance”的使用。

自定义Font Icon

前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3@font-face来制作Icon图标。现在在网上最为流行的是@robmadole@supercodepoet两位大师制作的Font Awesome

CSS3 Media Queries在iPhone4和iPad上的运用

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。

在具体开始之前,先来看看他的源码:

页面

返回顶部