Oggi vediamo come cambiare aspetto grafico di un punto elenco di una lista in html.
Pagina html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Drop</title> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> |
Foglio di Stile.
1 2 3 4 5 6 7 8 9 10 11 |
ul li { color: black; list-style-type: none; } ul li:before { color: red; float: left; margin: 0 0 0 -1em; content: '\2022'; } |
Ma possiamo modificare il nostro punto elenco anche con un immagine scelta da noi
Foglio di stile con immagine
1 2 3 4 5 6 7 8 9 10 11 |
ul li { color: black; list-style-image: url(test.gif); } ul li:before { color: red; float: left; margin: 0 0 0 -1em; content: '\2022'; } |