翻译Chico UI-3

5 怎样使用网格(Chico Mesh)

该文档更新于4月13日。。。

内容

概述

为我们提供了一套CSS样式，使用它可以方便快速地布置我们网站的格局。

下载

Chico Mesh不是CSS内核自带的,，因此我们必须将其下载下来并在自己的HTML文件中对其进行索引。

·         精简版 （仅包含必要功能）:

·         专业版 （包含全部功能）:

类名称

每一列都用该列占整个宽度的百分比所对应的一个分数来表示。

在类名称里，分数表示中的斜杠“/”用破折号“-”来代替，例如：

·         50%，也就是1/2，类名称表示为ch-g1-2

·         75%，也就是3/4，类名称表示为ch-g3-4

·         20%，也就是1/5，类名称表示为ch-g1-5

边栏

网格本身是不包含任何内外边距属性的，那么为了获取边栏的信息，我们必须为网格内的元素分配外边距属性。为此我们定义了表示内部元素外边距属性的3个类：

·         ch-leftcolumn: 将其左边的元素。

·         ch-centercolumn: 将其作为右边的元素

·         ch-rightcolumn: 将其作为中间的元素

凑整

列宽为整个宽度的1/3及1/6这样的数字有着过长或者无穷的小数位，当舍入为百分比数字时会有精度损失，因而往往不能恰好填满全部内容。为解决这一问题, 我们使用下面两个类来对多余或不足的百分比进行凑整，从而使全部百分比恰好达到100%。

·         33.34%，也就是1/3“入”后的百分比，类名称表示为ch-g1-3r

·         16.66%，也就是1/6“舍”后的百分比，类名称表示为ch-g1-6r

如果你需要3列相等宽度的网格，个网格中有一个必须使用类ch-g1-3r，就像下面这样：

   

        33,33%

   

   

        33,34%

   

   

        33,33%

   

同理，如果你需要6列相等宽度的网格，6个网格中有一个必须使用类ch-g1-6r。

样品展示

查看美妙的样品展示，见识Chico Mesh的巨大威力！

示例

两列网格

   

        Left 1/3

   

   

        Right 2/3

   

三列宽度相等的网格

   

        Left 1/3

   

   

        Center 1/3r

   

   

        Right 1/3

   

嵌套网格

   

       

            Left 1/4

       

   

   

       

           

               

                    Left 1/2

               

           

           

               

                    Right 1/2

               

           

           

                Center 2/4

           

       

   

   

       

            Right 1/2

       

   

   

四列表格

 

   

       

• Lorem

       

• Cras

       

• Lobortis

       

• Tincidunt

   

   

       

• Ipsum

       

• Commodo

       

• Tellus

       

• Rutrum

   

   

       

• Sit

       

• Magna

       

• Sed

       

• Mattis

   

   

       

• Amet

       

• Purus

       

• Nulla

        

• Elit

   

   

简单的布局

查看更多布局模板。

   

Header

   

       

Menu

   

   

       

Content

   

   

Footer