HTML/CSS/List Style/ol
Содержание
- 1 Add border to LI tag
- 2 A nested ordered list
- 3 Example of the start Attribute
- 4 Example of the value Attribute
- 5 list-style: none for OL
- 6 Nested OL tag
- 7 Numbering options on ordered lists
- 8 ol elements without a type attribute: have a numeric sequence type (i.e., 1, 2, ...)
- 9 OL tag
- 10 Ordered lists started at 5
- 11 Style for "ol li"
- 12 Three level OL list
- 13 Unordered Lists
Add border to LI tag
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #divID #recipe { list-style: none; } #divID #recipe li { padding: 10px 50px; margin-bottom: 6px; border-bottom: 1px solid #ccc; } #divID #one { background: url(img/ol_1.gif) no-repeat 6px 50%; } #divID #two { background: url(img/ol_2.gif) no-repeat 2px 50%; } #divID #three { background: url(img/ol_3.gif) no-repeat 3px 50%; } #divID #four { background: url(img/ol_4.gif) no-repeat 0px 50%; } #divID #five { background: url(img/ol_5.gif) no-repeat 6px 50%; } </style>
</head> <body>
- this is a test.
- this is a test.
- this is a test.
- this is a test.
- this is a test.
</body> </html>
</source>
A nested ordered list
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>Unordered Lists</title>
</head> <body>
Here is a nested ordered list:
- Item one
- Item two
- Item three
-
- Item one
- Item two
- Item three
- Item Four
</body> </html>
</source>
Example of the start Attribute
<source lang="html4strict">
<html>
<head> <title>Example of the start Attribute</title> </head> <body>
- This list should start at four
- Therefore this item should be five
- And this item should be six
</body>
</html>
</source>
Example of the value Attribute
<source lang="html4strict">
<html>
<head> <title>Example of the value Attribute</title> </head> <body>
- one
- two
- three
- four
- five
</body>
</html>
</source>
list-style: none for OL
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #divID #recipe { list-style: none; } </style>
</head> <body>
- this is a test.
- this is a test.
- this is a test.
- this is a test.
- this is a test.
</body> </html>
</source>
Nested OL tag
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>XOXO</title> <style type="text/css"> ol[compact="compact"] {
display:none;
} </style> </head> <body>
- Subject 1
- subpoint a
- subpoint b
- Subject 2
- subpoint c
- subpoint d
- Subject 3
- subpoint e
</body> </html>
</source>
Numbering options on ordered lists
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Numbering options on ordered lists</title> <style type="text/css"> ol li ol li {list-style-type:upper-alpha;} ol li ol li ol li {list-style-type:lower-alpha;} ol li ol li ol li ol li {list-style-type:upper-roman;} ol li ol li ol li ol li ol li {list-style-type:lower-roman;} </style> </head> <body>
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
</body> </html>
</source>
ol elements without a type attribute: have a numeric sequence type (i.e., 1, 2, ...)
<source lang="html4strict">
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title>Advanced Lists: nested and ordered</title> </head> <body>
- H
- B
- M
</body>
</html>
</source>
OL tag
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listing 4-8. Ordered list</title>
</head> <body>
- C
- h
- P
- T
- d
</body> </html>
</source>
Ordered lists started at 5
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
</head> <body>
- List item one
- List item two
- List item "n"
</body> </html>
</source>
Style for "ol li"
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #divID ol li { list-style-type: upper-roman; } </style>
</head> <body>
- this is a test.
- this is a test.
- this is a test.
- this is a test.
- this is a test.
- this is a test.
- this is a test.
- 1
- 12SELLER AUTHORIZATION.
- 123this is a test.
1234this is a test. - 12345this is a test.
- 123456this is a test.
1234567this is a test.
12345678this is a test. - 123456789this is a test.
12345678this is a test.
- 123456this is a test.
- 123this is a test.
- 1234567this is a test.
- 123456this is a test.
12345this is a test. - 1234"s expense, to:
- 123this is a test.
12this is a test.
1this is a test. - 12this is a test.
123this is a test.
- 123this is a test.
- 123456this is a test.
- Yahoo: <A HREF = "http://www.yahoo.ru"> http://www.yahoo.ru</A>
- Alta Vista: <A HREF = "http://www.altavista.ru"> http://www.altavista.ru</A>
- Ask Jeeves: <A HREF = "http://www.askjeeves.ru"> http://www.askjeeves.ru</A>
- WebCrawler: <A HREF = "http://www.webcrawler.ru"> http://www.webcrawler.ru</A>
</ul>
</div>
</body> </html>
</source>
Three level OL list
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> .container{
width:650px; position:relative; padding-left:80px;
} ol{
list-style-type: upper-roman; margin-left:16px; text-align:justify;
} ol ol{
list-style-type: upper-alpha;
} ol ol ol{
list-style-type: decimal;
} .container li span{
position:absolute; left:0px; top:auto; width:60px; text-align:right;
} li {white-space:nowrap} </style> </head> <body>
</body> </html>
</source>
Unordered Lists
<source lang="html4strict">
<HTML> <HEAD> <TITLE> - Links</TITLE> </HEAD> <BODY>
</BODY> </HTML>
</source>