ichuan.net

自信打不死的心态活到老

css triangle setp by step

The Markup

<h2>case1</h2>
<div id="case1"></div>

<h2>case2</h2>
<div id="case2"></div>

<h2>case3</h2>
<div id="case3"></div>

<h2>case4</h2>
<div id="case4"></div>

The CSS

div {
    margin-bottom: 40px;
}

#case1 {
  width: 50px;
  height: 50px;
  border-width: 50px;
  border-style: solid;
  border-color: blue green yellow red;
}

#case2 {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: blue green yellow red;
}

#case3 {
  width: 0;
  height: 0;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: blue green yellow red;
}

#case4 {
  width: 0;
  height: 0;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: blue transparent;
}

and the rendered HTML

enter image description here

关于 CSS position

CSS 的 position 属性以前了解的比较含糊,今天细看了下,得出了个总结:

  1. position 的取值为:static | relative | absolute | fixedstatic 是默认值,取值后三个的元素称为 “已定位元素”
  2. top, left, right, bottom 四个 css 属性只对 “已定位元素” 有效果
  3. relative 元素,top/bottomleft/right 设的是其相对于正常位置(static 时)的 上/下、左/右偏移
  4. absolute 元素,topleftrightbottom 设的是其各边相对于第一个 “已定位元素” 各边的偏移
  5. fixed 元素,和 absolute 元素类似,但它是相对于整个视图,即页面当前可见的范围
  6. relative 元素如果同时设置了 topbottom 属性,则忽略 bottom 值;如果同时设置了 leftright,则根据文字方向会忽略一个
  7. absolute 元素没有此限制,可以同时设置这 4 个属性

上面最后两点可以看下面的 demo:

CSS position

资料来自于 MDN。我觉得 MDN(https://developer.mozilla.org/en-US/docs)是最好的前端学习资料库。

为bootstrap dropdown增加无限级子菜单

Twitter 的 Bootstrap 是个非常漂亮的前端框架。其中有个 Dropdown 功能,也就是下拉菜单,非常漂亮,但是只能展开一级菜单。若是你有好几级菜单需要折叠/展开,怎么办呢?我写了一点 css,对 Bootstrap 的 css 进行了补充,实现了无限级菜单展开功能。效果图如下:

enter image description here

Demo 页面是:http://ichuan.net/static/test/dropdown/

无限级菜单对 topbar 和 tabs 里的 dropdown 都适用。

使用方法是:首先载入这个 css,然后在 html 代码中把要改成下拉菜单的条目替换成:

<li class="offset-left dropdown">
    <a href="#" class="dropdown-toggle">Dropdown...</a>
    <ul class="dropdown-menu">
        <li><a href="#">Secondary link</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Another link</a></li>
    </ul>
</li>

注意那个 offset-left 类。假如你想展开的菜单飘在左方,就用 offset-left,想像上图中飘在右方就用 offset-right