2015年2月

CSS div横向滚动

实际上我们往往会有不想竖直滚动要想一路水平滚动的需求,比如今天在公司里就需要,其实是很简单的,不过对于结构来说,还是需要做一些改动。

<div class="main">
    <div class="img">
        <div class="description">class</div>
    </div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
</div>

- 阅读剩余部分 -

CSS3 transition 过渡(渐变)属性

CSS3能达到渐变的效果,而不用再大费周章的用JS来实现效果了,这点实际上是非常方便的……

比如说:

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

- 阅读剩余部分 -

CSS 做个三角形

目前在山寨百度首页,于是乎就用各种三角,实际上,在前一阵子(考试前)仿照自己博客样式的时候(xsky.me),也曾经折腾过三角形,所以这次来总结(备份)一下。

    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #000 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: 5px;

在此,border-width决定了三角形的大小,具体发生了什么,可以参考:三种纯CSS实现三角形的方法,里面介绍了三种,而我只是用了其中的一种。

决定了三角形方向的是由border-color定义来的,transparent的一侧为透明。

CSS cursor属性

如果想要规定a标签以外的,比如增加点击事件,可以大家怎么知道这货可不可以点,一般来说,一是做成按钮样式,而是改变鼠标放置Play时的样式咯,这样大家就知道,哦这货八成可以点。

cursor就能改变鼠标样式了。

cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标。但用FireFox浏览时才注意到使用cursor:hand在FireFox里并被支持。
cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。
cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。

- 阅读剩余部分 -