Code copy and paste into w3school live editor and easy to understand
<!DOCTYPE html>
<html>
<head>
<style>
ul.dashboard li a.sprite-icons{
background: url(img_navsprites.gif) no-repeat top left;
width: 33px;
height: 34px;
margin: 0px 26px auto;
display: block;
}
ul.dashboard li a.sprite-icons.icons-car{
background-position: -45px 0;
}
ul.dashboard li a.sprite-icons.icons-suv{
background-position: -35px 0;
}
</style>
</head>
<body>
<ul class="dashboard" role="tablist">
<li>
<a class="sprite-icons icons-car" href="#">Cars ( 0 )</a>
</li>
<li>
<a class="sprite-icons icons-suv" href="#">SUVs ( 0 )</a>
</li>
<li>
<a class="sprite-icons icons-truck" href="#">Truck ( 0 )</a>
</li>
<li class="active">
<a class="sprite-icons icons-bikes" href="#">Bikes ( 1 )</a>
</li>
</ul>
</body>
</html>
shahzad_samejo@yahoo.com
<!DOCTYPE html>
<html>
<head>
<style>
ul.dashboard li a.sprite-icons{
background: url(img_navsprites.gif) no-repeat top left;
width: 33px;
height: 34px;
margin: 0px 26px auto;
display: block;
}
ul.dashboard li a.sprite-icons.icons-car{
background-position: -45px 0;
}
ul.dashboard li a.sprite-icons.icons-suv{
background-position: -35px 0;
}
</style>
</head>
<body>
<ul class="dashboard" role="tablist">
<li>
<a class="sprite-icons icons-car" href="#">Cars ( 0 )</a>
</li>
<li>
<a class="sprite-icons icons-suv" href="#">SUVs ( 0 )</a>
</li>
<li>
<a class="sprite-icons icons-truck" href="#">Truck ( 0 )</a>
</li>
<li class="active">
<a class="sprite-icons icons-bikes" href="#">Bikes ( 1 )</a>
</li>
</ul>
</body>
</html>
shahzad_samejo@yahoo.com
No comments:
Post a Comment