Creating Different Lists Markers
» EXAMPLE:
<html>
<head>
<style>
#list1 {
list-style: square;
}
#list2 {
list-style: circle;
}
#list3 {
list-style: disk;
}
#list4 {
list-style: upper-roman;
}
#list5 {
list-style: lower-alpha;
}
#list6 {
list-style-type: decimal;
}
#list7 {
list-style-type: decimal-leading-zero;
}
</style>
</head>
<body>
<p>Unordered lists:</p>
<ul id="list1">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ul>
<ul id="list2">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ul>
<ul id="list3">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ul>
<p>Ordered lists:</p>
<ol id="list4">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ol>
<ol id="list5">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ol>
<ol id="list6">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ol>
<ol id="list7">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ol>
</body>
</html>
» Result:
Unordered lists:
- HTML
- CSS
- PHP
- Java Script
- HTML
- CSS
- PHP
- Java Script
- HTML
- CSS
- PHP
- Java Script
- HTML
- CSS
- PHP
- Java Script
- HTML
- CSS
- PHP
- Java Script
- HTML
- CSS
- PHP
- Java Script
- HTML
- CSS
- PHP
- Java Script
An Image as The List Item Marker
» EXAMPLE:
<html>
<head>
<style>
ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
}
ul li
{
background-image:url(arrow-icon.png)
background-repeat:no-repeat;
padding-left:25px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>
» Result:
- HTML
- CSS
- PHP
No comments:
Post a Comment