yui3 框架式布局

"grids.css"已经不被推荐,使用"cssgrids.css"替代。

Css Grids提供了一套简单的布局系统。“网格”和“单元”是最基本的组件。一个“网格”(yui3-g)包含一个或者多个"单元"(yui3-u).“单元”的大小应该这样表示(比如:"yui3-1-2"是指占网格的一半宽度,“YUI3-1-3”是指单元占网格的1/3宽度,以此类推)。YUI3仅有的限制是所有的“单元”都必须包含于“网格”。也就是说,你必须先定义一个“网格”,然后再在网格内部填入一个或多个“单元”,并且为它们指定宽度。

我们开始吧!

添加前提条件

要使用CSS Grids,现在页面加入以下CSS链接语句:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.0/build/cssgrids/grids-min.css">

如果你想应用响应式布局,请使用Responsive Grids替代。

单元的大小

YUI3 所有的尺寸都是作用于“单元”的。单元甚至可以细分到1/24,下面这张表展示了那些尺寸是被支持的。

Class Description
.yui3-u Shrinks to fit unless a width is applied.
.yui3-u-1 Fills 100% of the available width.
.yui3-u-1-2 Fills 1/2 of available width.
.yui3-u-1-3 Fills 1/3 of available width.
.yui3-u-2-3 Fills 2/3 of available width.
.yui3-u-1-4 Fills 1/4 of available width.
.yui3-u-3-4 Fills 3/4 of available width.
.yui3-u-1-5 Fills 1/5 of available width.
.yui3-u-2-5 Fills 2/5 of available width.
.yui3-u-3-5 Fills 3/5 of available width.
.yui3-u-4-5 Fills 4/5 of available width.
.yui3-u-1-6 Fills 1/6 of available width.
.yui3-u-5-6 Fills 5/6 of available width.
.yui3-u-1-8 Fills 1/8 of available width.
.yui3-u-3-8 Fills 3/8 of available width.
.yui3-u-5-8 Fills 5/8 of available width.
.yui3-u-7-8 Fills 7/8 of available width.
.yui3-u-1-12 Fills 1/12 of available width.
.yui3-u-5-12 Fills 5/12 of available width.
.yui3-u-7-12 Fills 7/12 of available width.
.yui3-u-11-12 Fills 11/12 of available width.
.yui3-u-1-24 Fills 1/24 of available width.
.yui3-u-5-24 Fills 5/24 of available width.
.yui3-u-7-24 Fills 7/24 of available width.
.yui3-u-11-24 Fills 11/24 of available width.
.yui3-u-13-24 Fills 13/24 of available width.
.yui3-u-17-24 Fills 17/24 of available width.
.yui3-u-19-24 Fills 19/24 of available width.
.yui3-u-23-24 Fills 23/24 of available width.

"单元"的尺寸用的是百分比,所以创建一个页面,最外层容器的宽度是必须要设定的。最简单的办法是将页面的尺寸放在body标签上。可以看出,margin属性设置为auto整个页面就被居中了。下边这段代码就是设置宽度为960px,页面居中。

body {
    margin: auto; /* center in viewport */
    width: 960px;
}

下一步就是确定每一列的尺寸并且选择合适的“单位”,请记住,单元的尺寸是基于百分比的,在设计的时候我们用的是像素,不是比例,所以要求必须要有一些数学常识。要创建200像素宽的侧边栏,假设一个960px宽的页面,这侧边栏的宽度就等于5/24,那么就该使用“yui3-u-5-24”这个类,主区域就该是9/24宽("yui3-u-9-24")

<head>
    <style>
    body {
        margin: auto; /* center in viewport */
        width: 960px;
    }

    </style>
</head>

<body>
    <div class="yui3-g">
        <div class="yui3-u-5-24">

        </div>
        <div class="yui3-u-19-24">

        </div>
    </div>
</body>

 

你可能感兴趣的:(yui3 框架式布局)