css做出来的小特效

首字母悬浮：

    span{
        float:left;
        0.7em;
        font-size:400%;
        font-family:algerian,courier;
        line-height:80%;
    }
    <p>
        <span>T</span>his is some text.
        This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

水平菜单：

    ul{
        float:left;
        100%;
        padding:0;
        margin:0;
        list-style-type:none;
    } 

    a{
        float:left;
        7em;
        text-decoration:none;
        color:white;
        background-color:purple;
        padding:0.2em 0.6em;
        border-right:1px solid white;
    }

    a:hover {background-color:#ff3300}
    li {display:inline}

    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link three</a></li>
        <li><a href="#">Link four</a></li>
    </ul>