CSS sąrašai

Lukas

Yra keletas pagrindinių nustatymų, kurie yra dažniausiai naudojami su html sąrašų elementais, tačiau naudojant sąrašų žymes ir truputėlis css stilių taisyklių, galime gauti visaip išdėstytus meniu punktus ir nežinant, kad tai yra sąrašo elementas, niekad net to nepasakytume.

Paprasti sąrašų stiliai

CSS sąrašų redagavimo parametrai leidžia keisti sąrašo elementų žymeklių poziciją, pačius žymeklius. Pagrindinių parametrų lentelė:

Parametras	Reikšmė
list-style	Nurodo visus parametrus iš karto. Daugiau informacijos čia: list-style
list-style-type	Nurodo sąrašo indeksų tipą, kokio tipo skaitmenimis numeruoti ir pnš. Daugiau informacijos čia: list-style-type
list-style-position	Nurodo sąrašo indeksų vietą. Daugiau informacijos čia: list-style-position
list-style-image	Nurodo paveisklėlį, kurį reikia naudoti vietoje indeksų. Daugiau informacijos čia: list-style-image

Horizontalaus meniu pavyzdys

CSS stilių aprašai:

ul {
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
a {
    float:left;
    width:6em;
    text-decoration:none;
    color:white;
    background-color:#378adf;
    padding:0.2em 0.6em;
    border-right:1px solid white;
}
a:hover {
    background-color:#9ae02c;
}
li {
    display:inline;
}

HTML kodas:

<ul>
    <li><a href="#">Pradžia</a></li>
    <li><a href="#">Apie mus</a></li>
    <li><a href="#">Kontaktai</a></li>
    <li><a href="#">Nuorodos</a></li>
</ul>