Basics of HTML/HTML5 list part 2(unordered lists)
An unordered list commonly use simply as a bullet list, which also allows it to be also used in various design techniques and navigation menus. Like the ordered lists, unordered lists has four types available for uses disc, circle, square, and none, the disc type is default. Using CSS list-type property is required to change types if you’re following HTML 5 standards. Otherwise slapping the old school type attribute should do the trick. But I’d always recommend defining it in CSS section is better, so styling can be reusable and easily modifiable in your themes.
Examples of unordered lists
  • item 0
  • item 1
  • item 2
  • item 3
  • item 0
  • item 1
  • item 2
  • item 3
  • item 0
  • item 1
  • item 2
  • item 3
  • item 0
  • item 1
  • item 2
  • item 3
[code language="HTML"] <!--- unordered list disc !--> <ul style="list-style-type:disc;"> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> <!--- unordered list circle !--> <ul style="list-style-type:circle;"> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <!--- unordered list square!--> <ul style="list-style-type:square;"> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <!--- unordered list none!--> <ul type="none"> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> [/code] If theses don’t suit your taste, you can always go custom by adding a bit more css to get something like this: custom lists example Simply by setting list-style-type to none, you can easily change what comes before list items using the pseudo :before to change it's content using UTF-8 character codes.An image can also be used by using the css property list-style-image specify the urk to image. [code language="html"] <style> ul{list-style-type:none; float:left;} .spades li:before{content:"\2660";} .clubs li:before{content:"\2663";} .diamonds li:before{content:"\2666"; color:red;} .hearts li:before{content:"\2665"; color:red;} .imagelist{list-style-image: url('image/button.jpg');} </style> [/code] Easy stuff eh? now good luck on your epic listing quest lol.
Tags:HTML, HTML5, web, Web Design, Web Tutorial
Share:

No comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.