July 20
Di solito, quando si vede "proiettili" sul web, si pensa piccoli punti solidi. Mentre è vero che l'utilizzo di <UL> è il modo più semplice per fare un elenco puntato, non è l'unico modo. In questo articolo vi mostrerà tre tecniche, tra cui <UL>, per includere elementi puntati sulle tue pagine web. Sentitevi liberi di copiare il codice di esempio alla tua pagina e vedere come funziona.
La prima e più comune modo di aggiungere un elenco puntato è con il tag <UL>. Con un po 'di CSS sulla pagina, è possibile assegnare la lista di utilizzare una piccola immagine per i punti elenco, piuttosto che le forme predefinite: dot, cerchio e il quadrato solido.
esempio:
<Style> <! - Includere questo tra <head> e </ head> ->
ul # myList {list-style-type: none; list-style-image: url (images / arrow.gif)}
</ Style>
...
<Ul id = "myList"> <! - E mettere questo da qualche parte dopo <body> ->
<Li> L'immagine viene utilizzato per questo proiettile, piuttosto che la forma di default. </ Li>
<Li> Sentitevi liberi di sostituire la propria immagine e vedere cosa succede. </ Li>
</ Ul>
Un altro modo per includere proiettili è più "vecchio stile", ma consente una maggiore flessibilità, se si desidera aggiungere JavaScript o rollover per renderlo più interattivo. Aggiungere un tag <table> con due colonne e il numero di righe hai articoli nel tuo elenco puntato.
esempio:
<Table style = "border: none;"> <! - Questo rende le linee tabella invisibile ->
<Tbody>
<Tr>
<Td> <img align = "absmiddle"> </ td>
<Td> Questo apparirà come prima voce dell'elenco. </ Td>
</ Tr>
<Tr>
<Td> <img align = "absmiddle"> </ td>
<Td> Secondo elemento della lista, e così via ... </ td>
</ Tr>
</ Table>
Più contemporaneo di tabelle o liste non ordinate, questa è la tecnica "web 2.0", consentendo la massima flessibilità quando si applica tecnologie avanzate --- come AJAX, Ruby o PHP --- alla tua pagina.
esempio:
<Style>
.myBullets {
padding-left: 2em;
vertical-align: middle;
}
.myBullets: prima {
contenuti: url (arrow.gif);
}
</ Style>
...
<Div class = "myBullets"> Questo testo appare molto simile a un elemento puntato. </ Div>
<Div class = "myBullets"> Questo appare come il secondo punto, e così via ... </ div>