需求：实现下图效果（精灵图）
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .huawei { display:inline-block; width: 20px; height: 18px; background: url(./loginv4.png) no-repeat -1px -31px; } .weixin { display:inline-block; width: 20px; height: 18px; background: url(./loginv4.png) no-repeat -30px -32px; } .weibo { display:inline-block; width: 20px; height: 18px; background: url(./loginv4.png) no-repeat -56px -33px; } .qq { display:inline-block; width: 20px; height: 18px; background: url(./loginv4.png) no-repeat -7px -53px; } .c5 { display:inline-block; width: 20px; height: 18px; background: url(./loginv4.png) no-repeat -31px -55px; } .c6 { display:inline-block; width: 20px; height: 18px; background: url(./loginv4.png) no-repeat -55px -55px; } </style> </head> <body> <a href="https://www.huawei.com/cn/" class="huawei"></a> <a href="http://weixin.qq.com/" class="weixin"></a> <a href="https://weibo.com/" class="weibo"></a> <a href="https://www.qq.com/cn/" class="qq"></a> <a href="#" class="c5"></a> <a href="#" class="c6"></a> </body> </html>
