h1.title
{
    text-align: center;
    font-size: 32px;
    color: #333;
    margin: 40px 0;
    font-weight: 600;
}
small
{
    color: #202020;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
}
.cont.code
{
    width: 1100px;
}
#code-ul
{
    width: 100%;
}
#code-ul>li
{
    display: inline-block;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
    width: 257px;
    height: 257px;
    padding: 5px;
}
#code-ul>li>a
{
    border: 1px solid #e5e5e5;
    text-align: center;
    display: block;
    width: 245px;
    height: 245px;
}
#code-ul>li>a:hover
{
    background-color: #3eb0f8;
    border: 1px solid #3eb0f8;
    box-shadow: 3px 3px 5px #b9b9b9;
    text-decoration: none;
}
#code-ul>li>a>span
{
    display: block;
    width: 60px;
    height: 60px;
    background-image: url(../png/zb7w3h.png);
    margin: 57px auto 24px;
}
#code-ul>li>a>h1
{
    font-size: 18px;
    color: #888;
    font-family: "微软雅黑";
    font-weight: 600;
}
#code-ul>li>a:hover>h1
{
    color: #fff;
}
#code2>a>span
{
    background-position: -60px 0;
}
#code3>a>span
{
    background-position: -120px 0;
}
#code4>a>span
{
    background-position: -180px 0;
}
#code5>a>span
{
    background-position: -240px 0;
}
#code6>a>span
{
    background-position: -300px 0;
}
#code7>a>span
{
    background-position: -360px 0;
}
#code8>a>span
{
    background-position: -420px 0;
}
#code1>a:hover>span
{
    background-position: 0 -60px;
}
#code2>a:hover>span
{
    background-position: -60px -60px;
}
#code3>a:hover>span
{
    background-position: -120px -60px;
}
#code4>a:hover>span
{
    background-position: -180px -60px;
}
#code5>a:hover>span
{
    background-position: -240px -60px;
}
#code6>a:hover>span
{
    background-position: -300px -60px;
}
#code7>a:hover>span
{
    background-position: -360px -60px;
}
#code8>a:hover>span
{
    background-position: -420px -60px;
}