HTML Bullets Tutorial
Vanligvis, når du ser "kuler" på nettet, tror du små solide prikker. Mens det er sant at det å bruke <ul> er den enkleste måten å lage en punktliste, er det ikke den eneste måten. Denne artikkelen vil vise deg tre teknikker, inkludert <UL>, for å inkludere punkt elementer på websidene dine. Føl deg fri til å kopiere eksemplet koden på siden din og se hvordan det fungerer.
Bruke <UL>
Den første og mest vanlige måte å legge til en punktliste er med <ul> tag. Med litt CSS på siden, kan du tilordne listen for å bruke en liten bilde for kuler, i stedet for standard former: dot, sirkel og solid torget.
Eksempel:
<Style> <! - Inkluderer dette mellom <head> og </ head> ->
ul # myList {list-style-type: none; list-style-image: url (images / arrow.gif)}
</ Style>
...
<Ul id = "myList"> <! - Og sette dette sted etter <body> ->
<Li> Et bilde brukes til dette punkt, snarere enn standard form. </ Li>
<Li> Ta gjerne erstatte ditt eget bilde og se hva som skjer. </ Li>
</ Ul>
Bruke <TABLE> med <img> -elementer
En annen måte å inkludere kuler er mer "gammeldags", men åpner for mer fleksibilitet hvis du ønsker å legge til Javascript eller velt for å gjøre den mer interaktiv. Legg en <TABLE> -kode ved hjelp av to kolonner og så mange rader som du har elementer i en punktliste.
Eksempel:
<Table style = "border: none;"> <! - Dette gjør bordet linjene usynlige ->
<Tbody>
<Tr>
<Td> <img align = "absmiddle"> </ td>
<Td> Dette vises som første punkt på listen. </ Td>
</ Tr>
<Tr>
<Td> <img align = "absmiddle"> </ td>
<Td> Second listeelement, og så videre ... </ td>
</ Tr>
</ Table>
Bruke <DIV> med CSS-regler
Mer moderne enn tabeller eller sorterte lister, er dette "web 2.0" teknikk, noe som åpner for størst fleksibilitet når du søker avansert teknologi --- som AJAX, Ruby eller PHP --- til siden din.
Eksempel:
<Style>
.myBullets {
padding-left: 2em;
vertical-align: middle;
}
.myBullets: før {
Innhold: url (arrow.gif);
}
</ Style>
...
<Div class = "myBullets"> Denne teksten vises mye som en punkt element. </ Div>
<Div class = "myBullets"> Dette ser ut som den andre kule, og så videre ... </ div>