自己简单用了一下蓝图,大体布局很方便
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!-- Import fancy-type plugin for the sample page. -->
<link rel="stylesheet" href="plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
<style type="text/css">
.cgray {
background-color:#CCC;
}
.cblue {
background-color:#09F
}
.cred {
background-color:#F39
}
</style>
</head>
<body>
<div class="container">
<div class="span-24 cblue">
<h6>span-24(这里是header)</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
</div>
<div class="span-7 cred">
<h6>span-7(这里是导航)</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
</div>
<div class="span-17 cgray last">
<h6>span-17(这里是正文)</h6>
<p>他俩是一对新婚数月的小夫妻，恩爱非常。石比霜大八岁，从三年前认识起便对霜如珠似宝地宠爱着。由于两人不在一个城市，几经努力仍无法调动到一个城市。直到半年前，石才辞去了工作，只身到霜所在的城市。
霜有一份报表必须在明天上交，但因为搞错了一个数据，使得总数一直对不上。不得不在晚上继续加班，到了10点半却还没找出问题出在哪，于是打了个电话向丈夫诉苦娇。于是石带了夜宵来陪她的妻子，并和她一起查对着文件中的数据。见丈夫走进办公室里，霜满肚的烦乱立刻烟消云散。石，一直是她的支柱，在外人看来，她是位很能干的女孩子，但在石前面，她永远是个小女人。看着丈夫的英俊的脸庞，心情就象窗外的星空一般，灿烂无比。石怜爱的摸着她的头发，命令着说："乖，去吃东西。我来查。"于是霜乖乖的端着夜宵坐到石的对面，一边吃着一边满含柔情地盯着他，他的脸，他的一切，是她永远都看不厌的。她相信，只要丈夫出马，这世上便没什么办不到的事。果然，不到一刻钟，石便找出了那个错误，正微笑着想调侃他的妻子几句。而就在此时，这栋早在一年前便说要拆而勉强使用至今的办公楼，似乎在此时再也承受不起负荷，竟毫无征兆的轰然一声倒塌了。
几秒钟之内，两人便被埋在了废墟之中。不知过了多久，当霜从昏迷中醒来时，眼前一片漆黑，一时竟不知身在何处。身上压着一条空心水泥板，但运气不错，这条水泥板的另一端却被另一条水泥板支撑着，只是压在她的身上令她无法动弹，却不会令她受伤。刚才的昏迷是因为有东西砸在了她的头上，另外腿部不知道是被什么砸到，骨头似乎断了，并好象在流血，但因为板压着，她摸不到自己的小腿。肩背处也有痛感，一摸也在流血。
</p>
</div>
<div class="span-24 cblue">
<h6>span-24(这里是footer)</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
</div>
</div>
</body>
</html>
分享到：
相关推荐
由于 HTML 是一种标准，并且所描述的是结构而非样式，因此 Blueprint 框架是完全作为 CSS 实现的。要使用 Blueprint，您在设计网页时要以 Blueprint 为指导，然后再设计或生成 HTML，以便将 Blueprint CSS 样式应用...
Blueprint_CSS_分析例子.doc
国外很好用的CSS框架.Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。自我感觉好用。故推荐于此
总结起来，Blueprint CSS 是一个强大且实用的CSS框架，能够帮助开发者快速构建响应式的、视觉统一的网页。其网格系统、预定义样式和打印优化等功能，大大提高了开发效率，同时也降低了维护成本。对于任何希望提升...
《可视化Blueprint框架CSS生成工具详解》 在现代Web开发中，高效的前端布局和样式管理是提升项目质量和开发效率的关键。Blueprint框架就是这样一个旨在简化CSS样式的工具，它提供了一种结构化的方法来组织和构建可...
最新版div+css可视化开发工具，boks-v0.5.8，适用于blueprint css框架的开发，拖拉拽即可导出漂亮的网页架构。
而"Boks – 可视化 Blueprint 框架 CSS 生成工具[AIR]"则是一款基于Adobe AIR平台的可视化应用程序，专门用于生成和定制Blueprint框架的CSS样式。 首先，让我们深入了解Blueprint框架。Blueprint框架包含以下几个...
蓝图（Blueprint）CSS 是一个开源的前端框架，专为简化网页设计流程而创建。这个框架的主要目标是提供一套完整的、可扩展的基础样式，帮助开发者快速构建具有专业外观和一致性的网页应用。它的核心理念是通过预定义...
"blueprint-css-v1.0.1-8" 是一个基于CSS的框架，它旨在帮助开发者快速构建具有统一风格和高效布局的Web页面。Blueprint CSS是流行的设计框架之一，尤其在2007年推出后受到了广泛的关注。这个版本1.0.1-8代表了该...
10. blueprint-css-v1.0.1-8-g9bf9513.zip：Blueprint CSS是一个流行的早期框架，以其网格系统闻名，帮助开发者快速创建响应式的页面布局。 11. yaml_331_110618[CSS框架]： YAML（Yet Another Multicolumn Layout...
Blueprint CSS框架是一个高效且实用的设计工具，专为前端开发者设计，旨在简化CSS（层叠样式表）的编写过程，从而大幅度提高开发效率。这个框架以其强大的功能和易用性，深受许多开发者的喜爱。在本文中，我们将深入...
这个框架提供了标准化的CSS规则，帮助开发者快速构建响应式和易于维护的网页设计。以下是对Blueprint CSS Framework主要特性的详细说明： 1. **重置CSS**：Blueprint首先对常见的43个HTML标签进行了统一的样式重置...
**Blueprint CSS** 是一个流行的 CSS 框架，它提供了一套预先定义好的样式规则，帮助开发者快速构建响应式的网页布局。该框架的主要特点包括网格系统、字体重置以及一系列实用的类名，使得 HTML 元素能够保持一致性...
从给出的文件【部分内容】中，我们能够提取出一系列与CSS框架相关的知识点，以下是对这些信息的详细解读。 ### CSS框架概览 CSS框架是一种为了快速、标准化地设计网页而提供的预设样式和类的集合。在现代网页设计...
6. **Blueprint CSS**：与ThinkCSS类似，Blueprint也是为了减少CSS开发时间而设计的框架，它提供了网格系统、布局样式以及打印样式，便于快速构建响应式和一致的界面。 7. **CSScaffold**：这是一款基于PHP的CSS...
标题提及的是“精品CSS软件包八款之3——frameworkThreev1.0116.03.2009 改编自 BlueprintCSS的CSS框架”，这表明我们讨论的是一个名为“frameworkThree”的CSS框架，它是基于Blueprint CSS的改编版。这个版本是v...
蓝图CSS 一个轻量级的布局库，用于构建可在任何地方工作的出色的响应式移动优先UI。 开源，使用CSS Grid和Flexbox构建。 在下载单个CSS文件。 文献资料 在此处查看。 变更日志 查看以查看有关更新和改进的详细信息...
它分为蓝图类（Blueprint Class）和蓝图函数库（Blueprint Function Library）等不同类型，可以用来创建几乎所有的游戏逻辑。 在UE4中，蓝图的使用涉及以下关键知识点： 1. 事件图（Event Graph）：事件图是蓝图中...