bone骨骼转换为cs骨骼
Dave Gamache的Skeleton Boilerplate为快速,可靠地构建响应式网站提供了完美的基础。 最近,我们将使用Skeleton并根据Webdesigntuts +上的Magazine设计构建响应页面。 我们将研究从多个背景图片到媒体查询,灵活的媒体和适合移动设备浏览的所有内容。 让我们开始吧!
第一步
在第一个视频中,我们将下载Skeleton Boilerplate并准备我们的项目。 我们将深入研究.psd布局,并拍摄我们认为必要的任何图像,为诸如徽标之类的东西创建一个sprite文件。
结构和列
现在是时候陷入标记和某些样式中了。 在本视频中,我们将检查设计的结构,并使用Skeleton的标记将其转换为HTML。 我们将使用样板提供的网格系统,并在页面中列出一些列。
我们还将通过在某些区域使用CSS多个背景图像来处理一些美学问题。
多个背景图片
浏览器对多个背景图像的支持非常好,Mozilla Firefox(3.6 +),Safari / Chrome(1.0 / 1.3 +),Opera(10.5+)甚至Internet Explorer(9.0+)都可以很好地协作。
不幸的是,不支持的浏览器无法理解规则,因此根本不会显示任何内容。 因此,建议使用适当的回退,例如,通过实现Modernizr并声明专门针对违规浏览器的附加background
规则。 骨架通过在<html>
标记上使用条件注释来解决此问题。 如果在Internet Explorer 8或更早版本中查看过,则将为其分配“ ie”类。 因此,您可以使用以下类似方式专门针对这些浏览器:
/*ie multiple background image fallbacks*/
.ie .band.navigation {
background: url(../images/bg_dark.png) repeat left 2px #343434;
}
.ie .band.footer {
background: url(../images/bg_dark.png) repeat left 2px #343434;
}
.ie .band.bottom {
background: url(../images/bg_bottom.png) repeat #343434;
}
其他资源
到目前为止,视频中提到了以下几点:
- 相当关键的骷髅样板 。
- 有关视口元标记的更多信息。
- 多种背景的教程
- 杂志设计的PSD源文件。
- 保罗·爱尔兰(Paul Irish)的* {box-sizing:border-box} FTW 。
- 精彩的LiveReload
bone骨骼转换为cs骨骼