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

最新推荐文章于 2023-04-26 23:11:24 发布

翻译最新推荐文章于 2023-04-26 23:11:24 发布 · 696 阅读

文章标签：

#java #css #python #html #web

本文介绍如何使用SkeletonBoilerplate构建响应式网站，涵盖从布局设计到HTML转换，使用CSS处理多背景图片，以及针对不同浏览器的适配策略。

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;
}