自己简单用了一下蓝图,大体布局很方便
<!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由一个易用的网格、合理的布局和一个打印样式。自我感觉好用。故推荐于此
CSS框架Blueprint应用 Css框架介绍 – Blueprint css框架 – 应用psd模板(Photoshop文件) 实现网页的快速设计 – 应用可视化工具实现div+css的快速开发 – 网站Css框架结构搭建
Blueprint是一个CSS框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。
最新版div+css可视化开发工具，boks-v0.5.8，适用于blueprint css框架的开发，拖拉拽即可导出漂亮的网页架构。
Blueprint 框架 CSS 生成工具，先安装adobe air，再安装boks.air
blueprint-css-v1.0.1-8 css样式框架，快速构建样式 和blueprint的需求中心软件wiki
Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。
blueprint CSS 综述 pdf 文件 是一个CSS框架
NULL 博文链接：https://xshow.iteye.com/blog/547746
Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。
css的blueprint框架。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
蓝图CSS 一个轻量级的布局库，用于构建可在任何地方工作的出色的响应式移动优先UI。 开源，使用CSS Grid和Flexbox构建。 在下载单个CSS文件。 文献资料 在此处查看。 变更日志 查看以查看有关更新和改进的详细信息...
blueprint css 框架开发指南
集成了BluePrint & Tripoli 框架的做好的部分； Hartija 的打印样式； 960.gs的简洁； Elements 图标 作者想以此为你提供一个好用的样式集合和一个制作网站的通用的方法。这样你就可以集中精力搞设计了。 ...
下面给你推荐了27款优秀的CSS框架，你可以选用。 1. 960gs 960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。 2. ...
Blueprint是一款仿Chromebook Getting Started guide页面效果的Google风格的网格布局css画廊。网格布局采用masonry制作，css画廊的运动效果则由CSS 3D Transforms完成。
Laravel开发-blueprint API蓝图文档生成器（Dingo的fork）。