温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css Blueprint有什么用

发布时间:2020-12-25 10:02:28 来源:亿速云 阅读:224 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关css Blueprint有什么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

Blueprint是一个css框架,它将布局(layout)、排版(typography)、组件 (widget)、重置 (reset)、打印 (print) 等分放到不同的CSS文件中。

Blueprint (CSS框架)

Blueprint是由于 HTML是一种标准,并且所描述的是结构而非样式,因此 Blueprint 是完全作为 CSS 实现的框架。

在设计网页时要以 Blueprint 为指导,然后再设计或生成 HTML,以便将 Blueprint CSS 样式应用于 HTML 元素。实际上,由于 Blueprint 提供了强大的 CSS,因此可以在 HTML中设计网页,而不必使用图像设计程序来模拟最终页面,比如说 photoshop。从一定意义上说,Blueprint 提供了真正的所见即所得的(WYSIWYG)网页设计,因为原型将使用与最终站点相同的代码。

此外,由于 Blueprint 的主要作用是模拟打印页的外观,因此使用 Blueprint 进行交互式的设计的感觉更像是在使用 QuarkXPress 或 AdobeInDesign。Blueprint 样式基于像素和一个 18 像素的基线网格。借助设计天赋和努力,可以创建具有专业外观的页面。

样式例子

Blueprint 的默认网格是 950 像素宽,分为 24 个由 10 像素分隔线隔开的 30 像素宽的列:[(24 列 * 30 像素/列) + (23 分隔线 * 10 像素/分隔线) = 950 像素]。如果偏好或者需要更宽或更窄的网格或不同的列宽,Blueprint 提供了一个 Ruby 工具用于将 Blueprint 重新生成到需要的规范中。Ruby 工具还创建了一个网格图像,可以在 Photoshop中引用,并且压缩了最终的CSS以减小文件大小,从而缩短了传输时间和带宽。

通常,不应该编辑 Blueprint CSS 文件。而是应该在一个单独的文件定义自己的样式,并根据需要覆盖 Blueprint 代码。这是最后一个文件 css/custom.css 的作用,这个文件是作为代码的一部分创建和维护的。

css Blueprint有什么用

关于“css Blueprint有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI