ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS フレームワークBluePrint_html/css_WEB-ITnose
CSS フレームワークBluePrint_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:271426ブラウズ
做惯了后台程序的我们，是否对前端编程有兴趣么，通过CSS框架，使我们很容易的开发出基于Div+CSS布局的页面来，今天让我们了解下大名鼎鼎的blueprint CSS框架吧！
它的官方网站：http://www.blueprintcss.org/
首先你应该申明好CSS，这很简单，通过在页面的head区域加入如下引用即可：
Html代码
blueprint为我们提供了grid，form，print，reset，typography等多种css文件，我们重点来了解下布局。
在默认情况下，以950px作为宽度，比如我们可以利用如下代码，表示950px的居中Div：
Html代码
- lt;p>Here's my site!
你可以通过span-x来进行容器内列的定义，比如我们需要实现常见的顶部，main区域3列布局，可利用如下代码：
Html代码
- 顶部
- 左侧边栏
- 主体
- 右侧边栏
各 scan-x の幅は、以前の値より 40 ピクセル大きくなります。次の定義が Grid.css ファイルにあります。
Html コード
/* これらのクラスを使用して列の幅を設定します。 */
- .span-1 {width: 30px;}
- .span-2 {width: 70 px;}
- .span-3 {幅: 110px;}
- ......
- .span-23 {幅: 910px;}
- .span-24, div.span-24 { widthたとえば、次のコードでは、上部、中央、上部のレイアウトを定義しています。部分は左、中、右のレイアウトに分かれており、中央には上部と下部のレイアウトが含まれており、コードは次のとおりです。 >
- joshuaclayton-blueprint-css-v0.9.1-0-g9be6857.zip (3.9 MB)
ボックス 2 ;div class="span-4 last 「＆gt;
メインコンテンツ
＆lt;/div＆gt;＆lt;/div＆gt;
div class = "span-24 lat-24;さらに詳しく知りたい場合は、完全かつ包括的な例が含まれている、添付ファイルのブループリント フレームワーク パッケージを直接ダウンロードできます。
初心者にとっては優れた CSS フレームワークのように感じます。