<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } ul{ padding: 0; } /*定视口*/ div{ width: 22px; height: 20px; float: left; } /*添加背景图，定方位*/ .box1{ background: url("icon.png"); } .box2{ background: url("icon.png"); background-position: 0px -20px; } .box3{ background: url("icon.png"); background-position: 0px -41px; } .box4{ background: url("icon.png"); background-position: 0px -63px; } .box5{ background: url("icon.png"); background-position: 0px -81px; } .box6{ background: url("icon.png"); background-position: 0px -102px; } /*当移入第几个的时候第几个改变位置*/ li:hover .box1{ background-position:-22px -0px ; } li:hover .box2{ background-position: -22px -20px; } li:hover .box3{ background-position:-21px -41px ; } li:hover .box4{ background-position:-21px -63px ; } li:hover .box5{ background-position:-21px -81px ; } li:hover .box6{ background-position:-21px -102px ; } /*让li里的所有东西浮动*/ li{ width: 200px; height: 40px; list-style:none ; text-: 10px; float: left; } li>a{ color: black; text-decoration: none; text-align: left; } li:hover a{ color: red; } </style> </head> <body> <ul> <li> <div class="box1"></div> <a href="#">首页</a> </li> <li> <div class="box2"></div> <a href="#">购物</a> </li> <li> <div class="box3"></div> <a href="#">城堡</a> </li> <li> <div class="box4"></div> <a href="#">影视</a> </li> <li> <div class="box5"></div> <a href="#">手机</a> </li> <li> <div class="box6"></div> <a href="#">米奇</a> </li> </ul> </body> </html>