Hvordan lage punkter i HTML
Ved hjelp av punkter bidrar til å bryte opp store biter av tekst og påpeke lister med nyttig informasjon. Bullet poeng er enkle å lage i tekstbehandlingsprogrammet, men når du skriver et HTML-dokument, må du vite koden for å lage dem. Ikke mye koden kreves for å opprette en punktliste. Pakk hver liste i <li> tags og deretter vikle hele listen i <ul> eller "uordnet liste" tags. Du kan deretter gjøre hva du vil med den punktliste ved hjelp av Cascading Style Sheet kode.
Bruksanvisning
1 Skriv inn teksten til dine punkter. Begynn hvert punkt på en egen linje. Pakk hver linje i <li> og </ li> tagger som så:
<Li> Dette er en punktpunkt </ li>
<Li> Dette er et annet kulepunkt </ li>
2 Lag en blank linje over punktliste og skriv deretter en åpning <ul> tag på den linjen. Finn slutten av en punktliste, og deretter opprette en ny tom linje der. Skriv en avsluttende </ ul> tag på den linjen. Hvis du ønsker å style en liste med CSS senere, og deretter legge en klasse eller ID-attributtet til åpningen <ul> tag. Her er et eksempel på en kort punktliste med et ID-attributt:
<Ul id = "myList">
<Li> Bullet en </ li>
<Li> Bullet to </ li>
</ Ul>
3 Bruk "stil" for å lage din punktliste ved hjelp av CSS-koden. Legg CSS-koden mellom <style> og </ style> -kodene mellom <head> og </ head> tags, eller du kan skrive CSS-koden i en ekstern CSS-fil og legge filen ved hjelp av en <link> -kode som denne: <link rel = "stylesheet" href = "sti / til / stylesheet.css" type = "text / css" />. Change "sti / til / stylesheet.css" med banen til CSS-filen du oppretter. Bruk ID eller klasse attributt for å velge punktlister, som så:
myList li {font-style: italic; }
Koden ovenfor velger alle <li> kodene i en tag med en ID "myList." Bytt hash mark med en periode ved valg av klassen attributtet.
4 Bruk "list-style" eiendom i CSS for å endre bullet type. De tilgjengelige kuletyper inkluderer åpne sirkler, utfylte plater og torg for ikke-nummerert, ikke-alfabetisert lister. Her er et eksempel for firkantede kuler:
myList li {list-style: square;}
Hint
- Bruk <ol> tag i stedet for <ul> for å opprette bestilt lister. Deretter kan du sette "list-style" type til varierende typer tall eller bokstaver.
- Lag bilde kuler ved å angi "ingen" for "list-style" attributt og deretter gi hver <li> tag en ikke-repeterende, venstrejustert bakgrunnsbilde. Legg padding til venstre side av hver <li> tag å flytte teksten over, ellers vil den overlapper bildet.