コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS フレームワークBluePrint_html/css_WEB-ITnose

CSS フレームワークBluePrint_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:51:27
オリジナル
1441 人が閲覧しました

做惯了后台程序的我们，是否对前端编程有兴趣么，通过CSS框架，使我们很容易的开发出基于Div+CSS布局的页面来，今天让我们了解下大名鼎鼎的blueprint CSS框架吧！

 

它的官方网站：http://www.blueprintcss.org/

 

首先你应该申明好CSS，这很简单，通过在页面的head区域加入如下引用即可：

 

 

Html代码  

  1.   
  2.     
  3.   

 

blueprint为我们提供了grid，form，print，reset，typography等多种css文件，我们重点来了解下布局。

 

在默认情况下，以950px作为宽度，比如我们可以利用如下代码，表示950px的居中Div：

 

 

Html代码  

  1.   
  2. lt;p>Here's my site!

      
  

 

你可以通过span-x来进行容器内列的定义，比如我们需要实现常见的顶部，main区域3列布局，可利用如下代码：

 

 

Html代码  

  1.   
  2.     
      
  3.         顶部  
  4.     
  
  •     
      
  •         左侧边栏  
  •     
    •   
  •     
      
  •         主体  
  •     
    •   
  •     
      
  •         右侧边栏  
  •     
    •       

    • 各 scan-x の幅は、以前の値より 40 ピクセル大きくなります。次の定義が Grid.css ファイルにあります。

    Html コード

    /* これらのクラスを使用して列の幅を設定します。 */
    1. .span-1 {width: 30px;}
    2. .span-2 {width: 70 px;}
    3. .span-3 {幅: 110px;}
    4. ......
    5. .span-23 {幅: 910px;}
    6. .span-24, div.span-24 { widthたとえば、次のコードでは、上部、中央、上部のレイアウトを定義しています。部分は左、中、右のレイアウトに分かれており、中央には上部と下部のレイアウトが含まれており、コードは次のとおりです。 >
      7. ヘッダー

    ボックス 2 ;div class="span-4 last 「＆gt;

    メインコンテンツ

    ＆lt;/div＆gt;

    ＆lt;/div＆gt;

    div class = "span-24 lat-24;さらに詳しく知りたい場合は、完全かつ包括的な例が含まれている、添付ファイルのブループリント フレームワーク パッケージを直接ダウンロードできます。

    初心者にとっては優れた CSS フレームワークのように感じます。
      3. joshuaclayton-blueprint-css-v0.9.1-0-g9be6857.zip (3.9 MB)
    関連ラベル：
    CSS框架BluePrint
    ソース：php.cn
    前の記事：Pages_html/css_WEB-ITnose間で値を転送する方法 次の記事：css_html/css_WEB-ITnoseにおける同じ属性の重複の値の問題
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
    から 2024-04-06 20:41:51
    0
    1
    518
    hr タグが単色白に設定されているのに半透明になるのはなぜですか? HTML（ブートストラップ付き）とCSSがあり、HTMLにはクラスを持つ<hr>タグがあり、CSSにはその境界線スタイルがあります。半透明で白い色は見えますが、「固体」...
    から 2024-04-06 16:13:26
    0
    1
    500
    ナビゲーションバーの下枠のCSS ナビゲーション バーがあり、リスト内の項目にカーソルを置くと下部に赤い線を追加しましたが、その赤い線をタイトル (例: 「サービス」) の下に移動したいのですが、これを実現する方法...
    から 2024-04-06 15:04:41
    0
    2
    347
    透過的なブラウザを起動して、Web アプリケーションと PWA のエクスペリエンスを向上させます [静的 HTML、CSS、JavaScript をサポート] [ユーザーが Web アプリケーション/PWA でデスクトップの壁紙を表示できるようにします] 私は現在、ソケットを使用した Web アプリケーション (チャット) を開発しているジュニアのフロントエンド開発者兼デザイナーです。私と友人が使用している言語は、Scala、HTM...
    から 2024-04-05 13:50:12
    0
    1
    1367
    ウィンドウ内のコンテンツがオーバーフローするとスクロールできなくなり、新しいコンテンツが非表示になります 私は現在ルーレット システム プログラムを構築しており (これは賭けをするというよりも賭けを阻止するためです!)、基本的なフレームワークを実行しているだけですが、すでにメイン ウィ...
    から 2024-04-03 21:24:55
    0
    1
    285
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート