zoukankan      html  css  js  c++  java
  • CSS框架BluePrint

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

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

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

    Html代码  收藏代码
    1. <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">  
    2. <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
    3. <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->  

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

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

    Html代码  收藏代码
    1. <div class="container">  
    2. lt;p>Here's my site!</p>  
    3. </div>  

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

    Html代码  收藏代码
    1. <div class="container" style="border:1px solid #000;">  
    2.     <div class="span-24 last">  
    3.         顶部  
    4.     </div>  
    5.     <div class="span-4">  
    6.         左侧边栏  
    7.     </div>  
    8.     <div class="span-16">  
    9.         主体  
    10.     </div>  
    11.     <div class="span-4 last">  
    12.         右侧边栏  
    13.     </div>      
    14. </div>  

     span-x的命名规则是指定了宽度,每个span-x比前一个增加40px,起始值为30px,可在grid.css文件中找到如下定义:

    Html代码  收藏代码
    1. /* Use these classes to set the width of a column. */  
    2. .span-1 { 30px;}  
    3. .span-2 { 70px;}  
    4. .span-3 { 110px;}  
    5. ......  
    6. .span-23 { 910px;}  
    7. .span-24, div.span-24 {  950px; margin-right: 0; }  

    容器内列的定义是也许嵌套的,比如如下的代码我们定了了一个顶部,中部,顶部布局,其中中部分为左侧,中侧和右侧布局,中侧包括上下布局,代码如下:

    Html代码  收藏代码
    1. <div class="container">  
    2.     <div class="span-24 last">  
    3.         Header  
    4.     </div>  
    5.     <div class="span-4">  
    6.         Left sidebar  
    7.     </div>  
    8.       
    9.     <div class="span-16">  
    10.         <div class="span-8">  
    11.             Box1  
    12.         </div>  
    13.         <div class="span-4">  
    14.             Box2  
    15.         </div>  
    16.         <div class="span-4 last">  
    17.             Box3  
    18.         </div>  
    19.         <div class="span-16 last">  
    20.             Main content  
    21.         </div>  
    22.     </div>  
    23.       
    24.     <div class="span-4 last">  
    25.         Right sidebar  
    26.     </div>  
    27.     <div class="span-24 last">  
    28.         Footer  
    29.     </div>  
    30. </div>  
     

    在所有的布局中,请注意:在一个容器内最后一列的定义要加上last,确保一行中的span-x的定义的值总和要超过24,想要了解更多,可以直接下载附件中blueprint的框架包,里面附有完整的综合性的例子。

    感觉对新手来说,还算一个不错的CSS框架。

  • 相关阅读:
    Oracle JET Model 数据获取与使用
    Windows 10 安装MySQL 8.0.11
    Windows安装JDK9
    Centos安装JDK
    Centos7下安装php-redis扩展及简单使用
    XAMPP开启虚拟目录
    centos7.2 环境下配置 Apache2.4 +PHP5.6+Redis+Supervisord
    CentOS 7 开放3306端口访问
    编译Apache时,如何enable所有组件
    LINUX创建www的用户组和用户,并且不允许登录权限:
  • 原文地址:https://www.cnblogs.com/ranzige/p/4193841.html
Copyright © 2011-2022 走看看