CSS Image Sprites. Image Sprites - Creați o listă de navigare.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Vrem să folosim imaginea sprite ("img_navsprites.gif") pentru a crea o listă de navigare.
Vom folosi o listă HTML, deoarece poate fi o legătură și acceptă și o imagine de fundal:
Exemplu:
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}