bone骨骼转换为cs骨骼_使用骨骼构建响应式布局：从入门开始

bone骨骼转换为cs骨骼

Dave Gamache的Skeleton Boilerplate为快速，可靠地构建响应式网站提供了完美的基础。最近，我们将使用Skeleton并根据Webdesigntuts +上的Magazine设计构建响应页面。我们将研究从多个背景图片到媒体查询，灵活的媒体和适合移动设备浏览的所有内容。让我们开始吧！

第一步

在第一个视频中，我们将下载Skeleton Boilerplate并准备我们的项目。我们将深入研究.psd布局，并拍摄我们认为必要的任何图像，为诸如徽标之类的东西创建一个sprite文件。

或者，下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

结构和列

现在是时候陷入标记和某些样式中了。在本视频中，我们将检查设计的结构，并使用Skeleton的标记将其转换为HTML。我们将使用样板提供的网格系统，并在页面中列出一些列。

我们还将通过在某些区域使用CSS多个背景图像来处理一些美学问题。

或者，下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

多个背景图片

浏览器对多个背景图像的支持非常好，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

翻译自: https://webdesign.tutsplus.com/tutorials/building-a-responsive-layout-with-skeleton-starting-out--webdesign-6318

bone骨骼转换为cs骨骼