List Examples html 10-13-2012, 10:50 AM
#1
Ordered List: Numbering Style Options
The CSS list-style-type property is used to change the numbering style from the default, i.e. decimal to lower roman numbers, with the value lower-roman.
HTML Example
List 1 item #1
List 1 item #2
List 1 item #3
List 2 item #4
List 2 item #5
List 2 item #6
HTML Source Code
<ol style="list-style-type: lower-roman">
<li>List 1 item #1</li>
<li>List 1 item #2</li>
<li>List 1 item #3</li>
<li>List 2 item #4</li>
<li>List 2 item #5</li>
<li>List 2 item #6</li>
</ol>
Ordered List: Start Attribute
To continue numbering from the first list onto the second list, the start attribute of the second ol element is set to "4".
HTML Example
List 1 item #1
List 1 item #2
List 1 item #3
List 2 item #4
List 2 item #5
List 2 item #6
HTML Source Code
<ol>
<li>List 1 item #1</li>
<li>List 1 item #2</li>
<li>List 1 item #3</li>
</ol>
<ol start="4">
<li>List 2 item #4</li>
<li>List 2 item #5</li>
<li>List 2 item #6</li>
</ol>
Ordered List: Value Attribute
To number items in an ordered list differently from the default, i.e. in the increasing order from one ("1"), the value attribute of each li element in the ol element is defined to the number the item should have.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ol>
<li value="6">List item #1</li>
<li value="5">List item #2</li>
<li value="4">List item #3</li>
<li value="3">List item #4</li>
<li value="2">List item #5</li>
<li value="1">List item #6</li>
</ol>
Unordered List: Square Bullets
The bullet style of the unordered list is changed from the default, i.e. disc, to black square by setting the CSS list-style-type property to square.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ul style="list-style-type: square">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Circle Bullets
The bullet style of the unordered list is changed from the default, i.e. disc, to empty circle by setting the CSS list-style-type property to circle.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ul style="list-style-type: circle">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Custom Bullets Using List-Style-Image
An image is used as the bullet of the unordered list; the value of the CSS list-style-image property references the URL of the image.
There are no additional CSS properties related to the list-style-image property that allows modifying through CSS the properties of the image.
The position of the bullet image varies among browsers and the developer does not have control over the presentation of the bullet image when using the list-style-image property; the next example fixes this problem by using CSS background-image property.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ul style="list-style-image: url(images/bullet-2.PNG)">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Custom Bullets Using Background Image
An image is used as the bullet of the unordered list; the value of the CSS list-style-image property references the URL of the image.
Using the background-image property, the developer has fuller control over the properties of the bullet image, including the position, just as with a typical background image, while the list-style-image property does not provide any control over the properties of the image through CSS.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ul class="backgroundbullet">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
CSS Source Code
ul.backgroundbullet li {
list-style-type: none;
text-align: center left;
background-image: url(../images/bullet-2.PNG);
background-position: center left;
background-repeat: no-repeat;
padding: .3em 0 0 1.1em;
}
Definition List
The dl element containing dt elements that are followed by dl elements is used to markup related items that might have multiple properties.
HTML Example
Term 1
Definition 1 for Term 1
Definition 2 for Term 1
Definition 3 for Term 1
Term 2
Definition 1 for Term 2
Term 3
Definition 1 for Term 3
Definition 2 for Term 3
HTML Source Code
<dl>
<dt>Term 1</dt>
<dd>Definition 1 for Term 1</dd>
<dd>Definition 2 for Term 1</dd>
<dd>Definition 3 for Term 1</dd>
<dt>Term 2</dt>
<dd>Definition 1 for Term 2</dd>
<dt>Term 3</dt>
<dd>Definition 1 for Term 3</dd>
<dd>Definition 2 for Term 3</dd>
</dl>
credit to : http://html.cita.illinois.edu/nav/list/l...amples.php
The CSS list-style-type property is used to change the numbering style from the default, i.e. decimal to lower roman numbers, with the value lower-roman.
HTML Example
List 1 item #1
List 1 item #2
List 1 item #3
List 2 item #4
List 2 item #5
List 2 item #6
HTML Source Code
<ol style="list-style-type: lower-roman">
<li>List 1 item #1</li>
<li>List 1 item #2</li>
<li>List 1 item #3</li>
<li>List 2 item #4</li>
<li>List 2 item #5</li>
<li>List 2 item #6</li>
</ol>
Ordered List: Start Attribute
To continue numbering from the first list onto the second list, the start attribute of the second ol element is set to "4".
HTML Example
List 1 item #1
List 1 item #2
List 1 item #3
List 2 item #4
List 2 item #5
List 2 item #6
HTML Source Code
<ol>
<li>List 1 item #1</li>
<li>List 1 item #2</li>
<li>List 1 item #3</li>
</ol>
<ol start="4">
<li>List 2 item #4</li>
<li>List 2 item #5</li>
<li>List 2 item #6</li>
</ol>
Ordered List: Value Attribute
To number items in an ordered list differently from the default, i.e. in the increasing order from one ("1"), the value attribute of each li element in the ol element is defined to the number the item should have.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ol>
<li value="6">List item #1</li>
<li value="5">List item #2</li>
<li value="4">List item #3</li>
<li value="3">List item #4</li>
<li value="2">List item #5</li>
<li value="1">List item #6</li>
</ol>
Unordered List: Square Bullets
The bullet style of the unordered list is changed from the default, i.e. disc, to black square by setting the CSS list-style-type property to square.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ul style="list-style-type: square">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Circle Bullets
The bullet style of the unordered list is changed from the default, i.e. disc, to empty circle by setting the CSS list-style-type property to circle.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ul style="list-style-type: circle">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Custom Bullets Using List-Style-Image
An image is used as the bullet of the unordered list; the value of the CSS list-style-image property references the URL of the image.
There are no additional CSS properties related to the list-style-image property that allows modifying through CSS the properties of the image.
The position of the bullet image varies among browsers and the developer does not have control over the presentation of the bullet image when using the list-style-image property; the next example fixes this problem by using CSS background-image property.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ul style="list-style-image: url(images/bullet-2.PNG)">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Custom Bullets Using Background Image
An image is used as the bullet of the unordered list; the value of the CSS list-style-image property references the URL of the image.
Using the background-image property, the developer has fuller control over the properties of the bullet image, including the position, just as with a typical background image, while the list-style-image property does not provide any control over the properties of the image through CSS.
HTML Example
List item #1
List item #2
List item #3
List item #4
List item #5
List item #6
HTML Source Code
<ul class="backgroundbullet">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
CSS Source Code
ul.backgroundbullet li {
list-style-type: none;
text-align: center left;
background-image: url(../images/bullet-2.PNG);
background-position: center left;
background-repeat: no-repeat;
padding: .3em 0 0 1.1em;
}
Definition List
The dl element containing dt elements that are followed by dl elements is used to markup related items that might have multiple properties.
HTML Example
Term 1
Definition 1 for Term 1
Definition 2 for Term 1
Definition 3 for Term 1
Term 2
Definition 1 for Term 2
Term 3
Definition 1 for Term 3
Definition 2 for Term 3
HTML Source Code
<dl>
<dt>Term 1</dt>
<dd>Definition 1 for Term 1</dd>
<dd>Definition 2 for Term 1</dd>
<dd>Definition 3 for Term 1</dd>
<dt>Term 2</dt>
<dd>Definition 1 for Term 2</dd>
<dt>Term 3</dt>
<dd>Definition 1 for Term 3</dd>
<dd>Definition 2 for Term 3</dd>
</dl>
credit to : http://html.cita.illinois.edu/nav/list/l...amples.php


![[+]](https://sinister.li/images/modern/collapse_collapsed.png)