Layout.css

cube 中并没有提供大而全的栅格系统,这不是 cube 的出发点。相反,我们提供细节颗粒化的布局工具,方便自由使用。

inline-block 组件

Float 在 IE6、7 中有许多臭名昭著的 Bug,很多时候可以用 inline-block 来代替。YUI则是完全用 inline-block 来做栅格。

span 元素
div 元素
<div class="dib-box">
    <span class="dib" style="border: 1px solid #ccc;padding:5px 0;">span 元素</span>
    <div class="dib" style="border: 1px solid #ccc;padding:5px 0;">div 元素</div>
</div>

换行符会到导致两个 inline-block 元素之间产生空隙,cube 中为了解决这个问题,需要两个步骤:

  1. 在父级元素使用dib-box这个 class,也就是设置font-size: 0;
  2. 每个 inline-block 元素使用dib,font-size 重置为默认的 12px。

所以需要注意的是如果想为每个 inline-block 元素设置不同的 font-size,需要这样重置,保证下面的样式会覆盖.dib-box .dib的设置。

.foo .dib-box .dib {
    font-size: 14px;
}

两端对齐布局

两端对齐是指一行内第一个元素左对齐,最后一个元素右对齐的布局方式。通常可以使用float:leftfloat:right

但使用浮动无法很好的控制在垂直方向上的对齐,为此,cube 中以 inline-block 组件为基础,形成了独有的两端对齐自适应模块。

只需要在父元素使用 class justify,内部使用dib即可,兼容 IE6+。

标题
更多…
<div class="justify" style="border-bottom: 1px solid #999;height: 50px;">
    <div class="dib" style="vertical-align: baseline;font-size: 36px;">标题</div>
    <a class="dib" href="###" style="vertical-align: baseline;">更多…</a>
</div>

CSS模拟三角形

CSS可以通过 border 来模拟三角形箭头,需要注意的是,IE6 中需要使用border-style:dashed才能达到透明的效果。

.arrow-top

.arrow-bottom

.arrow-left

.arrow-right

.arrow-left-top

.arrow-right-top

.arrow-left-bottom

.arrow-right-bottom

<p><code>.arrow-top</code><b class="arrow arrow-top"></b></p>
<p><code>.arrow-bottom</code><b class="arrow arrow-top"></b></p>
<p><code>.arrow-left</code><b class="arrow arrow-top"></b></p>
<p><code>.arrow-right</code><b class="arrow arrow-right"></b></p>
<p><code>.arrow-left-top</code><b class="arrow arrow-left-top"></b></p>
<p><code>.arrow-right-top</code><b class="arrow arrow-right-top"></b></p>
<p><code>.arrow-left-bottom</code><b class="arrow arrow-left-bottom"></b></p>
<p><code>.arrow-right-bottom</code><b class="arrow arrow-right-bottom"></b></p>

等比缩放组件

网页中的视频通常希望是等比例缩放的,以保证播放器不会产生多余的黑边。目前常见的视频比例有16:9和4:3两种,由于播放器控制栏高度不同,需要配合JS判断不同的视频来源,然后增加对应的 Class。

目前支持如下网站:

  • .youku 优酷
  • .wole 我乐网(56.com)
  • .tudou 土豆
  • .iqiyi 爱奇艺
  • .youtube Youtube

宽屏 16:9

使用 Class widescreen

  • 父容器固定宽度
</embed>
<div class="well" style="width:500px;">
    <div class="fluid-media widescreen youku">
        <embed src="http://player.youku.com/player.php/sid/XNTMzMjg4Nzky/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
    </div>
</div>
  • 父容器 100% 宽度(自适应)

改变浏览器窗口大小,视频自动等比缩放。

</embed>
<div class="well">
    <div class="fluid-media widescreen youku">
        <embed src="http://player.youku.com/player.php/sid/XNTMzMjg4Nzky/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
    </div>
</div>

窄屏 4:3

使用 Class narrowscreen

</embed>

未知高度垂直居中组件

有很多方案可以让一个未知高度的元素垂直居中,但是为了更好的通用性,cube 选择使用空标签的方案来实现居中,这样可以兼容图片,单行、多行文字以及图文混排。

单行文字

单行文字垂直居中
<div class="center-box well" style="height: 60px;">
    <b class="center-hack"></b>
    <div class="center-body">
        单行文字垂直居中
    </div>
</div>

多行文字

春天的雪总是不期而至,和人一样。远处池塘亲吻着翩翩的雪花,泛起涟漪,初恋一般…雪停了,池塘总是在雪花消融后怀念她的模样……
<div class="center-box well" style="height: 100px;">
    <b class="center-hack"></b>
    <div class="center-body">
        春天的雪总是不期而至,和人一样。远处池塘亲吻着翩翩的雪花,泛起涟漪,初恋一般…雪停了,池塘总是在雪花消融后怀念她的模样……
    </div>
</div>

只有图片

<div class="center-box well" style="height: 320px;">
    <b class="center-hack"></b>
    <div class="center-body">
        <div class="center-img">
            <img src="http://ww4.sinaimg.cn/mw1024/90f78f62jw1ediottavmoj20ew0hs75z.jpg" width="200" alt="">
            <img src="http://ww4.sinaimg.cn/mw1024/90f78f62jw1ediottavmoj20ew0hs75z.jpg" width="160" alt="">
        </div>
    </div>
</div>

图文混排

当往事回首,你的笑容带不走。我心中那一丝哀愁,在每年秋天这个时候。
<div class="center-box well" style="height: 320px;">
    <b class="center-hack"></b>
    <div class="center-body">
        <img src="http://ww4.sinaimg.cn/mw1024/90f78f62jw1ediottavmoj20ew0hs75z.jpg" width="160" alt="">
        <div>当往事回首,你的笑容带不走。我心中那一丝哀愁,在每年秋天这个时候。</div>
    </div>
</div>