<meta charset="utf-8">
<title>sprite</title>
<link rel="stylesheet" href="main.css">
<div class="container">
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>.container {
.container {background: url("http://htmlbook.ru/files/river.jpg");
margin:20px ;
position:relative;
width:600px;
height:380px;
}
ul {position: absolute;
margin:0 ;
padding-left: 252.5px;
padding-top: 349px;/*razme6enie spiska v roditeljskom elemente*/
}
li{list-style: none;
width:13px;
height:13px;
background: black;
display:inline-block;
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
margin:0 5px 0 0;
} /*rastojanie mezdu <li>*/li:active {
background: red;
box-shadow: 0px 0px 4px 2px #fff;inset 0 0 2px 2px red;
}
li:nth-child(2){
background: red;
box-shadow: 0px 0px 4px 2px #fff;inset 0 0 2px 2px red;
}