                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS Sprite雪碧图应用

摸索着写的，跟老师的有点不一样，自己写的可能有点乱，不过显示效果是一样的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .sprite {
            width: 100px;
            border: 1px solid #bbbbbb;
            background: silver;
        }

        ul {
            list-style: none;
            margin: 0;
        }

        li h3 {
            font-size: 14px;
            font-weight: 400;
            margin: 0;
        }

        li {
            border-bottom: 1px solid darkgray;
            margin-top: 10px;
            height: 30px;
            line-height: 30px;

        }
    </style>
</head>
<body>

<div class="sprite">
    <ul>
        <li>
            <i></i>

            <h3>aaa</h3>
        </li>
    </ul>
    <ul>
        <li>
            <i></i>

            <h3>aab</h3>
        </li>
    </ul>
    <ul>
        <li>
            <i></i>

            <h3>aac</h3>
        </li>
    </ul>
    <ul>
        <li>
            <i></i>

            <h3>aad</h3>
        </li>
    </ul>
    <ul>
        <li>
            <i></i>

            <h3>aae</h3>
        </li>
    </ul>
    <ul>
        <li>
            <i></i>

            <h3>aaf</h3>
        </li>
    </ul>
</div>

</body>
</html>