http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FList_Style%2Fol
HTML/CSS/List Style/ol - История изменений
2026-04-04T12:11:01Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/List_Style/ol&diff=5630&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/List_Style/ol&diff=5631&oldid=prev
Admin: 1 версия
2010-05-26T08:17:08Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add border to LI tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<style type="text/css" media="screen"><br />
#divID #recipe {<br />
list-style: none;<br />
}<br />
<br />
#divID #recipe li {<br />
padding: 10px 50px;<br />
margin-bottom: 6px;<br />
border-bottom: 1px solid #ccc;<br />
}<br />
<br />
#divID #one {<br />
background: url(img/ol_1.gif) no-repeat 6px 50%;<br />
}<br />
<br />
#divID #two {<br />
background: url(img/ol_2.gif) no-repeat 2px 50%;<br />
}<br />
<br />
#divID #three {<br />
background: url(img/ol_3.gif) no-repeat 3px 50%;<br />
}<br />
<br />
#divID #four {<br />
background: url(img/ol_4.gif) no-repeat 0px 50%;<br />
}<br />
<br />
#divID #five {<br />
background: url(img/ol_5.gif) no-repeat 6px 50%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<div id="divID"><br />
<ol id="recipe"><br />
<li id="one">this is a test. </li><br />
<li id="two">this is a test. </li><br />
<li id="three">this is a test. </li><br />
<li id="four">this is a test. </li> <br />
<li id="five">this is a test. </li><br />
</ol><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==A nested ordered list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Unordered Lists</title><br />
</head><br />
<body><br />
<p>Here is a nested ordered list:</p><br />
<ol type="I"><br />
<li>Item one</li><br />
<li>Item two</li><br />
<li>Item three</li><br />
<li><br />
<ol type="i"><br />
<li>Item one</li><br />
<li>Item two</li><br />
<li>Item three</li><br />
</ol><br />
</li><br />
<li>Item Four</li><br />
</ol><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Example of the start Attribute==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Example of the start Attribute</title><br />
</head><br />
<body><br />
<ol start="4"><br />
<li>This list should start at four</li><br />
<li>Therefore this item should be five</li><br />
<li>And this item should be six</li><br />
</ol><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Example of the value Attribute==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title>Example of the value Attribute</title><br />
</head><br />
<body><br />
<ol><br />
<li value="3">one</li><br />
<li value="7">two</li><br />
<li value="1">three</li><br />
<li value="9">four</li><br />
<li value="4">five</li><br />
</ol><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==list-style: none for OL==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<style type="text/css" media="screen"><br />
#divID #recipe {<br />
list-style: none;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<div id="divID"><br />
<ol id="recipe"><br />
<li id="one">this is a test. </li><br />
<li id="two">this is a test. </li><br />
<li id="three">this is a test. </li><br />
<li id="four">this is a test. </li> <br />
<li id="five">this is a test. </li><br />
</ol><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Nested OL tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title>XOXO</title><br />
<style type="text/css"><br />
ol[compact="compact"] { <br />
display:none; <br />
}<br />
</style><br />
</head><br />
<body><br />
<ol><br />
<li>Subject 1<br />
<ol><br />
<li>subpoint a</li><br />
<li>subpoint b</li><br />
</ol><br />
</li><br />
<li>Subject 2<br />
<ol compact="compact"><br />
<li>subpoint c</li><br />
<li>subpoint d</li><br />
</ol><br />
</li><br />
<li>Subject 3<br />
<ol><br />
<li>subpoint e</li><br />
</ol><br />
</li><br />
</ol><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Numbering options on ordered lists==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br />
<title>Numbering options on ordered lists</title><br />
<style type="text/css"><br />
ol li ol li {list-style-type:upper-alpha;}<br />
ol li ol li ol li {list-style-type:lower-alpha;}<br />
ol li ol li ol li ol li {list-style-type:upper-roman;}<br />
ol li ol li ol li ol li ol li {list-style-type:lower-roman;}<br />
</style><br />
</head><br />
<body><br />
<ol><br />
<li>This is a list item</li><br />
<li>This is a list item<br />
<ol><br />
<li>This is a list item</li><br />
<li>This is a list item<br />
<ol><br />
<li>This is a list item</li><br />
<li>This is a list item<br />
<ol><br />
<li>This is a list item</li><br />
<li>This is a list item</li><br />
<li>This is a list item<br />
<ol><br />
<li>This is a list item</li><br />
<li>This is a list item</li><br />
<li>This is a list item </li><br />
</ol><br />
</li><br />
</ol><br />
</li><br />
</ol><br />
</li><br />
</ol><br />
</li><br />
</ol><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==ol elements without a type attribute: have a numeric sequence type (i.e., 1, 2, ...)==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Advanced Lists: nested and ordered</title><br />
</head><br />
<body><br />
<ol><br />
<li>H</li><br />
<li>B</li><br />
<li>M</li><br />
</ol><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==OL tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Listing 4-8. Ordered list</title><br />
</head><br />
<body><br />
<br />
<ol><br />
<li>C</li><br />
<li>h</li><br />
<li>P</li><br />
<li>T</li><br />
<li>d</li><br />
</ol><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Ordered lists started at 5==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
</head><br />
<body><br />
<ol start="5"><br />
<li>List item one</li><br />
<li>List item two</li><br />
<li>List item "n"</li><br />
</ol><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Style for "ol li"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<style type="text/css" media="screen"><br />
#divID ol li {<br />
list-style-type: upper-roman;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<div id="divID"><br />
<ol><br />
<li>this is a test. </li><br />
<li>this is a test. </li><br />
<li>this is a test. </li><br />
<li>this is a test. </li><br />
<li>this is a test. </li><br />
<li>this is a test. </li><br />
<li>this is a test. </li><br />
</ul><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Three level OL list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<title>Untitled Document</title><br />
<style type="text/css"><br />
.container{<br />
width:650px;<br />
position:relative;<br />
padding-left:80px;<br />
}<br />
ol{<br />
list-style-type: upper-roman;<br />
margin-left:16px;<br />
text-align:justify;<br />
}<br />
ol ol{<br />
list-style-type: upper-alpha;<br />
}<br />
ol ol ol{<br />
list-style-type: decimal;<br />
}<br />
.container li span{<br />
position:absolute;<br />
left:0px;<br />
top:auto;<br />
width:60px;<br />
text-align:right;<br />
}<br />
li {white-space:nowrap}<br />
</style><br />
</head><br />
<body><br />
<div class="container"><br />
<ul><br />
<li><span>1</span>&nbsp;</li><br />
</ul><br />
<ol><br />
<li><span>12</span><strong>SELLER AUTHORIZATION.</strong><br />
<ol><br />
<li><span>123</span>this is a test. <br /><br />
<span>1234</span>this is a test. </li><br />
<li><span>12345</span>this is a test. <br />
<ol><br />
<li><span>123456</span>this is a test. <br /><br />
<span>1234567</span>this is a test.<br /><br />
<span>12345678</span>this is a test. </li><br />
<li><span>123456789</span>this is a test. <br /><br />
<span>12345678</span>this is a test. </li><br />
</ol><br />
</li><br />
</ol><br />
</li><br />
<li><span>1234567</span><strong>this is a test. </strong><br />
<ol><br />
<li><span>123456</span>this is a test. <br /><br />
<span>12345</span>this is a test. </li><br />
<li><span>1234</span>"s expense, to:<br />
<ol><br />
<li><span>123</span>this is a test. <br /><br />
<span>12</span>this is a test. <br /><br />
<span>1</span>this is a test. </li><br />
<li><span>12</span>this is a test. <br /><br />
<span>123</span>this is a test. </li><br />
</ol><br />
</li><br />
</ol><br />
</li><br />
</ol><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Unordered Lists==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE> - Links</TITLE><br />
</HEAD><br />
<BODY><br />
<!-- <UL> creates a new unordered (bullet) list --><br />
<!-- <LI> inserts a new entry into the list --><br />
<UL><br />
<LI>Yahoo: <A HREF = "http://www.yahoo.ru"><br />
http://www.yahoo.ru</A></LI><br />
<br />
<LI>Alta Vista: <A HREF = "http://www.altavista.ru"><br />
http://www.altavista.ru</A></LI><br />
<br />
<LI>Ask Jeeves: <A HREF = "http://www.askjeeves.ru"><br />
http://www.askjeeves.ru</A></LI><br />
<br />
<LI>WebCrawler: <A HREF = "http://www.webcrawler.ru"><br />
http://www.webcrawler.ru</A></LI><br />
</UL><br />
<br />
</BODY><br />
</HTML><br />
</source></div>
Admin