Hoe kan ik een lijst met CSS-stijl

Hoe kan ik een lijst met CSS-stijl


Gebruik lijsten om snel punten, aantal stappen te maken om, of maak een menu voor uw site.

instructies

Wijzigen of verwijderen van de lijst Markers

1 De CSS property list-style-type wordt gebruikt om het type marker een lijst gebruikt of om de markeringen uit de lijst volledig te verwijderen bepalen. Mogelijke waarden voor list-style-type omvatten: schijf, cirkel, vierkant, decimale, upper-alpha, lower-alpha, upper-roman, lagere-roman en geen.

2 Wilt u de lijst weer te geven met behulp van geactiveerde Romeinse cijfers, bijvoorbeeld, zou de CSS-regel:

ol {
list-style-type: upper-roman;
}

Voor andere vormen van markers, verander eenvoudig de waarde gegeven aan de woning aan de aard van de marker die u wilt.

3 Als u geen lijst markers helemaal wilde, zou de CSS-regel

ol {
list-style-type: none;
}

Voor een ongeordende lijst zou zijn:

ul {
list-style-type: none;
}

4 Om de lijst marker om een ​​beeld te veranderen, gebruikt u de eigenschap list-style-image. Stel bijvoorbeeld dat je wilde een kleine afbeelding van een ster als een item in de lijst marker te gebruiken. Hier is een voorbeeld van hoe de URL van de afbeelding te geven.

ul {
list-style-image: url (star.gif);
}

De lijst Horizontaal

5 De CSS-eigenschap die een lijstweergave over een pagina zal maken horizontaal is display. De waarde voor weergave die u wilt gebruiken om de horizontale lijsten te maken in het display: inline.

6 Hoe kan ik een lijst met CSS-stijl

Begin met een gewone ongeordende lijst. Pas deze voorbeeld CSS-regel

li {
list-style-type: none;
weergave: inline;
}

Het beeld toont wat dit CSS zal doen om een ​​gewone ongeordende lijst met opsommingstekens.

7 De lijst moet extra styling, misschien randen en opvulling, maar de basis van de techniek wordt gegeven in stap 2.

Zie het volgende gedeelte voor tips over hoe u de lijst met stijlen als deze verbindingen bevat.

Stijl Een List als Menu

8 In dit gedeelte zullen we kijken naar een verticale menubalk of navigatiebalk. Er is geen noodzaak voor beelden in de navigatiebalk, alleen CSS.

9 Een ongeordende lijst wordt gewoonlijk gebruikt als een menu. Elke lijst bevat een A-element om een ​​koppeling te maken. Een deel van de CSS van toepassing is op de lijst, een deel van de verbindingen.

10 Verwijder eerst de lijst markers. Gewoon om het voorbeeld te houden van het vullen van een hele pagina, zal ik een breedte toe te voegen, ook. Bijvoorbeeld,

ul {
list-style-type: none;
width: 200px;
}

11 Het is niet noodzakelijk, maar zal een solide zwarte rand toevoegen voorbeeld. Dit zal de lijst kijken ingesloten en meer als een navigatiebalk te maken. Hier is de CSS.

li {
border: 1px solid # 000;
}

12 Dit maakt de lijst eruit ziet als een menubalk, maar het enige deel een gebruiker kan op de feitelijke woord in de lijst aan. U kunt het hele doos in het gebied klikbaar maken door het toevoegen van een CSS-regel voor de links.

13 Hoe kan ik een lijst met CSS-stijl


Gebruik de afstammeling selector li a. Dit zal de links die deel uitmaken van uw lijst te selecteren. Hier is de CSS:

li a {
display: block;
}

Het display: block regel maakt het hele lijstitem gedragen als een link en wordt het allemaal aanklikbaar. U kunt de wijzende vinger te zien in het beeld, waaruit blijkt dat overal in de doos kan worden geklikt om het menu te bedienen.

Hints

  • Er is ook een CSS-list-style-position eigenschap die de waarden binnen buiten kan hebben, of erven. Gebruik list-style-position om te bepalen of de lijst displays zowel binnen als buiten de lijst marker.
  • Gebruik marges, padding en achtergrondkleuren of afbeeldingen om te kleden in de lijst.
  • U kunt de achtergrondkleur (of afbeelding) van elk item in de lijst veranderen wanneer de gebruiker zweeft over het met een CSS-regel voor de selector li a: hover.