zoukankan      html  css  js  c++  java
  • 960网格布局框架(前端css框架)的使用方法

    960框架总宽960px

    CSS框架已经出现很长时间了,关于这些框架的用处也被我们讨论了很多遍了。有人说,CSS框架不够先进,还有人说这些框架大大的节省了他们的开发时间。在此,我们将不再讨论这个问题。

    前段时间,我了解到了CSS框架。经过对MaloBluePrint960做了实验对比后,我得出一个结论:我最喜欢960CSS框架。

    本教程将解释这个框架的基本原理,这样你就可以用960来快速进入开发。

    基本原理

    你必须知道一些基本原理来“学习这个框架是如何工作的”。你可以通过实验(或者是用firebug)来学习它,不过我也将会在这里为你介绍它。让我们开始吧。

    不要编辑960.css文件

    首先是一个小提示:不要编辑960.css文件,否则,将来你将不能更新这个框架。因为尽管我们需要布局我们的HTML,我们将创建一个独立的CSS文件。

    加载网格

    因为我们可以使用一个外部文件的CSS代码,我们必须在我们的HTML网站中加载它们,我们可以通过以下代码来实现:

    <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />

    <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />

    <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />

    这些做好了之后,我们必须添加我们自己的CSS文件。例如,你可以叫这个文件为style.csssite.css或者其它任何名字。用下面代码引用这个文件:

    <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” />

    容器

    在960框架中,你可以选择名为.container_12.container_16的两个容器class。他们都是960px的宽度(这就是为什么叫960),它们的不同是分的列数不同。.container_12被分割为12列,.container_16被分割为16列。这些960px宽的容器是水平居中的。

    网格/列

    有很多列宽可供选择,而且在这两个容器里,这些宽度也不相同。你可以通过打开960.css文件来查看这些宽度。但是这对于设计一个网站来说是不必要的。有一个小技巧可以让这个框架更加易用。

    比如,你想要在你的容器里建两列(叫sidebar/content)。你可以这样做:

    <div class=”container_12″>

    <div class=”grid_4″>sidebar</div>

    <div class=”grid_8″>main content</div>

    </div>

    可以看到,你的第一列(grid_4)的数字加上第二列(grid_8)的数字正好是12。也就是说,你不必知道每一列的宽度,你可以选择列宽通过一些简单的数学计算。

    如果我们要建一个4列的布局,代码可以是这样的:

    <div class=”container_12″>
    <div class=”grid_2″>sidebar</div>
    <div class=”grid_6″>main content</div>
    <div class=”grid_2″>photo’s</div>
    <div class=”grid_2″>advertisement</div>
    </div>

    正如你所看到的那样,这个系统依然很完美。但是如果你想使用嵌套的列的话,你会发现它是有问题的。比如,如果后面三列都属于content列:

    <div class=”container_12″>
    <div class=”grid_2″>sidebar</div>
    <div class=”grid_10″>
    <div class=”grid_6″>main content</div>
    <div class=”grid_2″>photo’s</div>
    <div class=”grid_2″>advertisement</div>
    </div>
    </div>

    你会发现这错位了,不过不用着急,这正是我们下一节要说的。

    间距

    默认情况下,每列之间都有间距。每一个grid_(这里代表数字)class左右都有10个像素的间距。也就是说,两列之间,总共有20px的间距。

    20px间距对创建一个有足够宽的空白间距的布局来说是很棒的,它可以让一切看起来很自然。这也是我喜欢使用960的原因之一。

    在上面的例子中,我们遇到了个问题,现在我们就来解决它。

    问题是,每一列都有左右边距。而嵌套的三列中,第一列和最后一列是不需要边距的,解决方法是:

    <div class=”container_12″>
    <div class=”grid_2″>sidebar</div>
    <div class=”grid_10″>
    <div class=”grid_6 alpha”>main content</div>
    <div class=”grid_2″>photo’s</div>
    <div class=”grid_2 omega”>advertisement</div>
    </div>
    </div>

    我们可以简单的添加”alpha“样式来去掉左边的间距,添加“omega”样式来去除右边的间距。这样我们刚刚创建的这个例子在任何浏览器里面就很完美了(当然包括IE6)。

    样式

    好了,你现在已经完全了解如果用960框架来创建一个网格布局的基本原理了。当然,我们也可以添加一些样式到我们的布局中。

    <div class=”container_12″>
    <div id=”sidebar” class=”grid_2″>sidebar</div>
    <div id=”content” class=”grid_10″>
    <div id=”main_content” class=”grid_6 alpha”>main content</div>
    <div id=”photo” class=”grid_2″>photo’s</div>
    <div id=”advertise” class=”grid_2 omega”>advertisement</div>
    </div>
    </div>

    因为CSS使用特性来确定哪一个样式声明具有高于其它样式的优先级。”id“比class更重要。

    用这种方法,我们可以在自己的文件中重写那些被class设定的规则(比如宽度,padding,边框等)。

    我也添加一些样式,它们整整花费了我5分钟来整理整个例子。查看示例的源代码和样式声明。.

    搞定

    就这样。你已经学习了如果使用960框架来建立跨浏览器兼容性和整洁的布局了。当你完全掌握了960框架后,你将大大地减少编写CSS的时间。

  • 相关阅读:
    PAT (Advanced Level) Practice 1100 Mars Numbers (20分)
    PAT (Advanced Level) Practice 1107 Social Clusters (30分) (并查集)
    PAT (Advanced Level) Practice 1105 Spiral Matrix (25分)
    PAT (Advanced Level) Practice 1104 Sum of Number Segments (20分)
    PAT (Advanced Level) Practice 1111 Online Map (30分) (两次迪杰斯特拉混合)
    PAT (Advanced Level) Practice 1110 Complete Binary Tree (25分) (完全二叉树的判断+分享致命婴幼儿错误)
    PAT (Advanced Level) Practice 1109 Group Photo (25分)
    PAT (Advanced Level) Practice 1108 Finding Average (20分)
    P6225 [eJOI2019]异或橙子 树状数组 异或 位运算
    P4124 [CQOI2016]手机号码 数位DP
  • 原文地址:https://www.cnblogs.com/tangyue/p/3818253.html
Copyright © 2011-2022 走看看