HTML/CSS/List Style/ol

Материал из Web эксперт
Перейти к: навигация, поиск

Add border to LI tag

 
<!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>

<div id="divID">
  <ol id="recipe">
    <li id="one">this is a test. </li>
    <li id="two">this is a test. </li>
    <li id="three">this is a test. </li>
    <li id="four">this is a test. </li> 
    <li id="five">this is a test. </li>
  </ol>
</div>

</body>
</html>



A nested ordered list

 

<?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>
<p>Here is a nested ordered list:</p>
<ol type="I">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>
  <ol type="i">
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
    </ol>
  </li>
  <li>Item Four</li>
</ol>
</body>
</html>



Example of the start Attribute

 
<html>
  <head>
    <title>Example of the start Attribute</title>
  </head>
  <body>
    <ol start="4">
      <li>This list should start at four</li>
      <li>Therefore this item should be five</li>
      <li>And this item should be six</li>
    </ol>
  </body>
</html>



Example of the value Attribute

 

<html>
  <head>
    <title>Example of the value Attribute</title>
  </head>
  <body>
    <ol>
      <li value="3">one</li>
      <li value="7">two</li>
      <li value="1">three</li>
      <li value="9">four</li>
      <li value="4">five</li>
    </ol>
  </body>
</html>



list-style: none for OL

 
<!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>

<div id="divID">
  <ol id="recipe">
    <li id="one">this is a test. </li>
    <li id="two">this is a test. </li>
    <li id="three">this is a test. </li>
    <li id="four">this is a test. </li> 
    <li id="five">this is a test. </li>
  </ol>
</div>

</body>
</html>



Nested OL tag

 
<!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>
<ol>
  <li>Subject 1
    <ol>
        <li>subpoint a</li>
        <li>subpoint b</li>
    </ol>
  </li>
  <li>Subject 2
    <ol compact="compact">
        <li>subpoint c</li>
        <li>subpoint d</li>
    </ol>
  </li>
  <li>Subject 3
    <ol>
        <li>subpoint e</li>
    </ol>
  </li>
</ol>
</body>
</html>



Numbering options on ordered lists

 
<!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>
<ol>
  <li>This is a list item</li>
  <li>This is a list item
    <ol>
      <li>This is a list item</li>
      <li>This is a list item
        <ol>
          <li>This is a list item</li>
            <li>This is a list item
              <ol>
                <li>This is a list item</li>
                  <li>This is a list item</li>
                  <li>This is a list item
                    <ol>
                      <li>This is a list item</li>
                        <li>This is a list item</li>
                        <li>This is a list item </li>
                    </ol>
                  </li>
              </ol>
            </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
</body>
</html>



ol elements without a type attribute: have a numeric sequence type (i.e., 1, 2, ...)

 
<?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>
      <ol>
         <li>H</li>
         <li>B</li>
         <li>M</li>
      </ol>
   </body>
</html>



OL tag

 
<!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>
  
  <ol>
    <li>C</li>
    <li>h</li>
    <li>P</li>
    <li>T</li>
    <li>d</li>
  </ol>
</body>
</html>



Ordered lists started at 5

 
<!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>
    <ol start="5">
        <li>List item one</li>
        <li>List item two</li>
        <li>List item "n"</li>
    </ol>
</body>
</html>



Style for "ol li"

 

<!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>

<div id="divID">
  <ol>
    <li>this is a test. </li>
    <li>this is a test. </li>
    <li>this is a test. </li>
    <li>this is a test. </li>
    <li>this is a test. </li>
    <li>this is a test. </li>
    <li>this is a test. </li>
  </ul>
</div>

</body>
</html>



Three level OL list

 

<!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>
<div class="container">
        <ul>
        <li><span>1</span>&nbsp;</li>
    </ul>
    <ol>
      <li><span>12</span><strong>SELLER AUTHORIZATION.</strong>
        <ol>
          <li><span>123</span>this is a test. <br />
            <span>1234</span>this is a test. </li>
          <li><span>12345</span>this is a test. 
            <ol>
              <li><span>123456</span>this is a test. <br />
                <span>1234567</span>this is a test.<br />
                <span>12345678</span>this is a test. </li>
                    <li><span>123456789</span>this is a test. <br />
                      <span>12345678</span>this is a test. </li>
            </ol>
          </li>
        </ol>
      </li>
      <li><span>1234567</span><strong>this is a test. </strong>
        <ol>
          <li><span>123456</span>this is a test. <br />
            <span>12345</span>this is a test. </li>
          <li><span>1234</span>"s expense, to:
            <ol>
              <li><span>123</span>this is a test. <br />
                <span>12</span>this is a test. <br />
                <span>1</span>this is a test. </li>
              <li><span>12</span>this is a test. <br />
                <span>123</span>this is a test. </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
</div>
</body>
</html>



Unordered Lists

 
<HTML>
<HEAD>
<TITLE> - Links</TITLE>
</HEAD>
<BODY>
    <!-- <UL> creates a new unordered (bullet) list -->
    <!-- <LI> inserts a new entry into the list     -->
    <UL>
    <LI>Yahoo: <A HREF = "http://www.yahoo.ru">
    http://www.yahoo.ru</A></LI>
    
    <LI>Alta Vista: <A HREF = "http://www.altavista.ru">
    http://www.altavista.ru</A></LI>
    
    <LI>Ask Jeeves: <A HREF = "http://www.askjeeves.ru">
    http://www.askjeeves.ru</A></LI>
    
    <LI>WebCrawler: <A HREF = "http://www.webcrawler.ru">
    http://www.webcrawler.ru</A></LI>
    </UL>
    
</BODY>
</HTML>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/List_Style/ol&oldid=5631»