HTML/CSS/List Style/ol

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

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>

  1. this is a test.
  2. this is a test.
  3. this is a test.
  4. this is a test.
  5. 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:

  1. Item one
  2. Item two
  3. Item three
    1. Item one
    2. Item two
    3. Item three
  4. Item Four

</body> </html>

</source>
   
  


Example of the start Attribute

   <source lang="html4strict">

<html>

 <head>
   <title>Example of the start Attribute</title>
 </head>
 <body>
  1. This list should start at four
  2. Therefore this item should be five
  3. 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>
  1. one
  2. two
  3. three
  4. four
  5. 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>

  1. this is a test.
  2. this is a test.
  3. this is a test.
  4. this is a test.
  5. 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>

  1. Subject 1
    1. subpoint a
    2. subpoint b
  2. Subject 2
    1. subpoint c
    2. subpoint d
  3. Subject 3
    1. 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>

  1. This is a list item
  2. This is a list item
    1. This is a list item
    2. This is a list item
      1. This is a list item
      2. This is a list item
        1. This is a list item
        2. This is a list item
        3. This is a list item
          1. This is a list item
          2. This is a list item
          3. 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>
  1. H
  2. B
  3. 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>

  1. C
  2. h
  3. P
  4. T
  5. 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>

  1. List item one
  2. List item two
  3. 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>

  1. this is a test.
  2. this is a test.
  3. this is a test.
  4. this is a test.
  5. this is a test.
  6. this is a test.
  7. this is a test.
  8.  </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>

    • 1 
    1. 12SELLER AUTHORIZATION.
      1. 123this is a test.
        1234this is a test.
      2. 12345this is a test.
        1. 123456this is a test.
          1234567this is a test.
          12345678this is a test.
        2. 123456789this is a test.
          12345678this is a test.
    2. 1234567this is a test.
      1. 123456this is a test.
        12345this is a test.
      2. 1234"s expense, to:
        1. 123this is a test.
          12this is a test.
          1this is a test.
        2. 12this is a test.
          123this is a test.

    </body> </html>

    </source>
       
      
    


    Unordered Lists

       <source lang="html4strict">
    
    

    <HTML> <HEAD> <TITLE> - Links</TITLE> </HEAD> <BODY>


    </BODY> </HTML>

    </source>