【Skeleton】布局

作者: 德育处主任 | 来源:发表于2018-01-09 21:51 被阅读42次
rabbit

Skeleton是一个轻量级的CSS栅格系统。里面用了400行代码就把排版布局、按钮、表单和表格的装饰都定义好了。

用Skeleton布局,在理解上其实和用<table>布局差不多。都是把网站的排版变得比较整齐。不过Skeleton很灵活。

用Skeleton的方法就是和外链CSS样式一样。
<link rel="stylesheet" href="css/skeleton.css">

在布局时,首先要有一个最外层的容器,然后再分成

在Skeleton中,一个容器就是一个类为container的<div>标签。

HTML代码

<div class="container">
    
</div>

设置好容器之后,接下来是添加行

除了标记行的<div>标签之外,不要直接在这个容器里放任何HTML代码!

一个容器中有一个或多个行。行就是嵌套在容器里的<div>标签,类为row

HTML代码

<div class="container">
    <div class="row">
        
    </div>
</div>

下面的代码是多行
HTML代码

<div class="container">
    <div class="row">
        
    </div>
    <div class="row">
        
    </div>
    <div class="row">
        
    </div>
    <div class="row">
        
    </div>
</div>



最后要添加的是每行里的单元格

Skeleton使用分成12个单元的栅格,因此,添加到一行中的<div>标签,要么至少占用一个单元的宽度(很窄),要么占12个单元的宽度(最宽)。此外,如果有多列,总宽度必须正好等于12个单元的宽度。

例如,如果分成三列,可以都占4个单元的宽度,也可以一个占2个单元,另外2个各占5个单元的宽度。

把<div>标签设为列的方法:在class属性中添加columns,用one到twelve,设定列的宽度。用1-12对应的单词设置宽度。

HTML代码

<div class="container">
    <div class="row">
        <div class="four columns"></div>
        <div class="four columns"></div>
        <div class="four columns"></div>
    </div>
    <div class="row">
        <div class="four columns"></div>
        <div class="four columns"></div>
        <div class="four columns"></div>
    </div>
    <div class="row">
        <div class="four columns"></div>
        <div class="four columns"></div>
        <div class="four columns"></div>
    </div>
</div>

这样,就设定好一个三行三列的布局。

最后再加上自己设定的样式
CSS代码

.row {
    margin: 10px;
}
.columns {
    background: #1574A8;
    height: 30px;
}

可以看到如下效果

rabbit

且支持响应式缩放,比如把浏览器缩小。

rabbit






rabbit

上图是用Skeleton布局的所有方式。

Skeleton有个很好的功能:CSS样式会自动计算多列所需的留白。
因此,我们无需自己计算要在两列之间放多少空白。如果一行里只有一列,Skeleton不会添加留白;
如果一行里有两列,Skeleton会在两列之间添加一个留白;
如果一行里面有六列,Skeleton会添加五个留白。
所有这些都在Skeleton的CSS文件中计算好了。






Skeleton下载地址:Skeleton






希望以上笔记对大家有帮助。
我的其他笔记在微信公众号:Rabbit_svip
欢迎前来点评~

微信订阅号搜索:rabbit

相关文章

网友评论

    本文标题:【Skeleton】布局

    本文链接:https://www.haomeiwen.com/subject/wczgnxtx.html