Retina对我来说是一个全新的概念。初次接触还不知道是什么意，后来翻译后才知道“视网膜”，在互联网上海量搜索一翻，这是我们前端的一个新知识点——视网膜Web。的确是个NB的新事物，我一开始看简直不知道是什么东西，后来慢慢的看了一些专业术语，结合业务的高人写的博客，总算是对其有一点点的了解。同时把这几天看的东西做了一下学习笔记，希望对一些新接触 Retina的同学有许些的帮助。（因为自己对这一块知道的不多，有可能有写错的地方，希望这些地方不会误人子弟，罪过罪过），更希望有错的地方能得到同行朋友的指正。

Responsive设计现在是网页设计中的一种趋势，现在浏览网页不在是仅限于PC端，而是有很多类型的屏幕尺寸——桌面、笔记本电脑、平板电脑和智能手机等等。一个网页要能在这么多种类型屏幕上显示，Responsive设计似乎是一种完美的解决方案。因为他允许你创建一个网站，可以适应不同的分辨率。这是具有挑战性的，从桌面到移动端屏幕。为此，内容有需要隐藏的，图片必须能自动适应大小和一些其他网页元素需要相应的改变。详细的介绍可以阅读前面介绍的《Responsive Web Design》和《Responsive设计的十个基本技巧》。在这里，我们要看看网页设计中至关重要的UI组件之一网站导航菜单。因为导航也涉及到响应式设计的变化。

解决方案有许多种，比如说使用选择下拉框制作菜单、CSS下拉菜单、切换导航菜单等，（可以看看《20款Responsive Menu教程》，这里有近20种响应式导航菜单制作案例与相关教程的介绍）。当然这些解决方案都有自己的优缺点，至于使用哪种解决方案，就需要根据您的需求，从中找到一个完美的解决方案来适合你的项目。接下来为大家提供一些响应式导航菜单的制作方法和解决方案，希望能帮你完成更好的Responsive设计。

好久没有处理过IE6下的兼容问题了，今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边，就算是你在样式中重置了一个border属性也是如此。真是蛋疼的很。后来经过查找相关的资料，终于找到了解决方法，放上来与大家分享一下，这个问题有可能不只一个人会碰到。(^_^)

在介绍如何处理这个bug之间我们一起来回顾一下，在IE6-7下，input[type="submit"]和button[type="submit"]存在的问题还不仅是这个，常见的有：button在IE67下的宽度兼容问题、button的行高问题（各浏览器下解析不一样）、button的outline问题，甚至submit在ios下也存在问题。这么多烦人的事，苦逼了前端人员，（具体解决方案可以点击这里查看）。今天就在为大家增加一个问题的解决方案——如何去除IE67下按钮的黑边框

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

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

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

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

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

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

“这篇文章是关于5个用的CSS属性，你应该非常的熟悉，但很有机能你很少在使用。我不是在讨论CSS3的新属性，我所指的是CSS2中的老属性：clip,min-height,white-space,cursor和display。这些属性都得到浏览器的广泛支持。所以，不要错过这篇文章，因为你可能会惊讶的发现这5个属性是多么的有用。“

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