css给你灵感-CSS字母索引

希望这些效果能给您带来灵感，这是个字母索引，

样式表：

*{
    padding:0px;
    margin:0px;
    }

#letters {
    background: #75B9D0;
    width: 396px;
    display:block;
    float:left;
    padding: 10px 15px;
    font: bold 100% Verdana, Helvetica, sans-serif;
    font-size:12px;
}

* html #letters{
    padding: 10px 15px 15px;
    }

#letters ul {
    display:block;
}

#letters li{
    list-style-type: none;
    float: left;
    margin: 7px 4px;
    display:inline;
    position:relative;
    }

*html #letters li{
    margin: 4px;
    }

#letters a {
    width: 36px;
    line-height:36px;
    background: #fff;
    display: block;
    text-align: center;
    text-decoration: none;
}

#letters a:link, #letters a:visited {
    color: navy;
    }

#letters a:hover {
    background: #93D1E4;
    color: #fff;
    text-decoration: underline;
}

html代码：

<div id="letters">
        <ul>
            <li><a href="#">A</a></li><li><a href="#">B</a></li><li><a href="#">C</a></li><li><a href="#">D</a></li><li><a href="#">E</a></li><li><a href="#">F</a></li><li><a href="#">G</a></li><li><a href="#">H</a></li><li><a href="#c">I</a></li><li><a href="#">J</a></li><li><a href="#">K</a></li><li><a href="#">L</a></li><li><a href="#">M</a></li><li><a href="#">N</a></li><li><a href="#">O</a></li><li><a href="#">P</a></li><li><a href="#">Q</a></li><li><a href="#">R</a></li><li><a href="#">S</a></li><li><a href="#c">T</a></li><li><a href="#">U</a></li><li><a href="#">V</a></li><li><a href="#">W</a></li><li><a href="#">X</a></li><li><a href="#">Y</a></li><li><a href="#">Z</a></li>
        </ul>
</div>

因为是索引我用了li，如果是非索引，比如连接，比如图片，也可以直接用a。效果是一样的。代码如下：

样式表

*{
    padding:0px;
    margin:0px;
    }
    
.clear{
    clear:both;
    }

#letters {
    background: #75B9D0;
    width: 426px;
    display:block;
}
    
#letters ul {
    font: bold 100% Verdana, Helvetica, sans-serif;
    font-size:12px;
}    

#letters li{
    list-style-type: none;
    padding: 5px 15px;
    }
    
* html #letters li{
    padding: 5px 10px;
    }
        
#letters a {
    float: left;
    margin: 7px 4px;
    padding: 0;
    width: 36px;
    line-height:36px;
    background: #fff;
    color: navy;
    display: block;
    text-align: center;
    text-decoration: none;
}

*html #letters a{
    margin: 4px;
    }
    
#letters a:hover {
    background: #93D1E4;
    color: #fff;
    text-decoration: underline;
}

<div id="letters">
        <ul>
                <li><a href="#">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a><a href="#">F</a><a href="#">G</a><a href="#">H</a><a href="#c">I</a><a href="#">J</a><a href="#">K</a><a href="#">L</a><a href="#">M</a><a href="#">N</a><a href="#">O</a><a href="#">P</a><a href="#">Q</a><a href="#">R</a><a href="#">S</a><a href="#c">T</a><a href="#">U</a><a href="#">V</a><a href="#">W</a><a href="#">X</a><a href="#">Y</a><a href="#">Z</a>
                 <p class="clear"></p>
                </li>
        </ul>
</div>