字母索引

可以使用dl+ul

<p class="index-p f-f0">
        <a href="">A</a>|<a href="#b0">B</a>|<a href="#c0">C</a>|<a href="#d0">D</a>|<a href="#e0">E</a>|<a href="#f0">F</a>|<a href="#g0">G</a>|<a href="#h0">H</a>|<a href="#i0">I</a>|<a href="#j0">J</a>|<a href="#k0">K</a>|<a href="#l0">L</a>|<a href="#m0">M</a>|<a href="#n0">N</a>|<a href="#o0">O</a>|<a href="#p0">P</a>|<a href="#q0">Q</a>|<a href="#r0">R</a>|<a href="#s0">S</a>|<a href="#t0">T</a>|<a href="#u0">U</a>|<a href="#v0">V</a>|<a href="#w0">W</a>|<a href="#x0">X</a>|<a href="#y0">Y</a>|<a href="#z0">Z</a>
</p>
<dl>
    <dt><a name="b0" href=""></a>B</dt>
    <dd>
    <ul class="index-title">
        <li><a href="">B</a></li>
        <li><a href="">B</a></li>
        <li><a href="">B</a></li>
        <li><a href="">B</a></li>
    </ul>
    </dd>
</dl>
<style>
p{
    color:#ccc;
    background: #fff;
    padding: 10px 0;
}
p a{
    margin: 0 12px 0 15px;
    color:#000;
}
dl dt{
    text-align: center;
    width: 15px;
    float: left;
    display: inline-block;
    padding: 37px 50px;
    border-top: 1px dotted #CBCBCB;
}
ul{
    font-size: 10px;
    overflow: hidden;
    padding: 28px 0 28px 40px;
    border-left: 1px dotted #CBCBCB;
    border-top: 1px dotted #CBCBCB;
}

ul li{
    width: 150px;
    float: left;
    line-height: 38px;
    margin-right: 40px;
}

ul a{
    color: #4F4F4F;
}
</style>

 

转载于:https://www.cnblogs.com/joy-cnblogs/p/4366829.html