Hoe te Bullet Points in HTML maken

Hoe te Bullet Points in HTML maken


Met behulp van bullet points helpt breken grote stukken tekst en wijzen op lijsten van nuttige informatie. Bullet punten zijn eenvoudig te maken in tekstverwerkingssoftware, maar als je een HTML-document aan het typen bent, moet u de code om ze te maken te leren kennen. Niet veel code is nodig om een ​​kogel lijst te maken. Wikkel elke lijst in <li> -tags en vervolgens wikkel de hele lijst in <ul> of "ongeordende lijst" labels. U kunt dan alles wat je wilt met de kogel lijst met behulp van Cascading Style Sheet code te doen.

instructies

1 Schrijf de tekst voor uw bullet points. Begin elk punt op zijn eigen lijn. Wikkel elke regel in <li> en </ li> tags zoals zo:

<Li> Dit is een opsommingstekens punt </ li>

<Li> Dit is een ander puntje </ li>

2 Maak een lege regel boven de lijst met opsommingstekens en typ een opening <ul> tag op die lijn. Vind het einde van de lijst met opsommingstekens en vervolgens een andere lege regel daar. Typ een afsluitende </ ul> tag op die lijn. Wilt u de lijst met CSS later stijl, voeg dan een klasse of id attribuut om de opening <ul> tag. Hier is een voorbeeld van een korte lijst met opsommingstekens met een ID-kenmerk:

<Ul id = "mylist">

<Li> Bullet één </ li>

<Li> Bullet twee </ li>

</ Ul>

3 Gebruik de "stijl" om uw kogel lijst te maken met behulp van CSS-code. Voeg CSS-code tussen de <style> en </ style> -tags tussen de <head> en </ head> -tags, of u kunt de CSS-code in een extern CSS-bestand te schrijven en insluiten het bestand met een <link> tag als deze: <link rel = "stylesheet" href = "pad / naar / stylesheet.css" type = "text / css" />. Change "pad / naar / stylesheet.css" met het pad naar het CSS-bestand dat u maakt. Gebruik de ID of class attribuut om uw kogel lijsten te selecteren, als volgt:

mylist li {font-style: italic; }

De bovenstaande code selecteert alle <li> -tags binnen een tag met een ID van "mylist." Vervang de hash merk met een periode waarin de selectie door de klasse attribuut.

4 Gebruik de 'list-style' eigenschap in CSS om de kogel te wijzigen. De beschikbare kogel typen zijn open cirkels, ingevulde schijven en pleinen voor niet-genummerde, niet-alfabetische lijsten. Hier is een voorbeeld voor vierkante kogels:

mylist li {list-style: square;}

Hints

  • Gebruik de <ol> tag in plaats van <ul> om geordende lijsten te creëren. Vervolgens kunt u "list-style" type in verschillende types van cijfers of letters.
  • Maak image kogels door het specificeren van "geen" voor de "list-style" attribuut en geef elke <li> tag, een beeld dat geen herhalende links uitgelijnd achtergrond. opvulling toe te voegen aan de linkerkant van elk <li> tag om de tekst te bewegen over, anders zal het de afbeelding overlappen.