HTML/CSS/List Style/UL

Материал из Web эксперт
Версия от 11:17, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Add alignment line for UL

   <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" />
 <title></title>
 <style type="text/css" media="screen">
 div {
   margin-bottom: 30px;
   }  
 #divID #sitemap {
   font-size: 140%;
   font-weight: bold;
   color: #f63;
   }
 
 #divID #sitemap li {
   list-style: none;
   }
     
 #divID #sitemap li ul {
   margin: 6px 15px;
   padding: 0 15px;
   font-size: 90%;
   color: #000;
   border-left: 1px dotted #999;
   }
 #divID #sitemap li ul li ul {
   border: none;
   }
 
 #divID #sitemap li ul li ul li {
   font-weight: normal;
   padding-left: 16px;
   background: red;
   }
   
 </style>

</head> <body>

  • This is a test.
    • This is a test.
    • This is a test.
      • Part I
      • Part II
    • This is a test.
  • This is a test.

</body> </html> 

</source>


Add style to multi-level UL

   <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" />
 <title></title>
 <style type="text/css" media="screen">
 div {
   margin-bottom: 30px;
 }  
 #divID #sitemap {
   font-size: 140%;
   font-weight: bold;
   color: #f63;
   }
     
 #divID #sitemap li ul {
   font-size: 90%;
   color: #000;
   }
 
 </style>

</head> <body>

  • This is a test.
    • This is a test.
    • This is a test.
      • Part I
      • Part II
    • This is a test.
  • This is a test.

</body> </html> 

</source>


Advanced Lists: nested and ordered

   <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>
    • New games
    • New applications
      1. For business
      2. For pleasure
    • Around the clock news
    • Search engines
    • Shopping
    • Programming
      1. XML
      2. Java
      3. XHTML
      4. Scripts
      5. New languages
  • Links
  • Keeping in touch with old friends
  • It is the technology of the future!
  </body>

</html> 

</source>


Define class for UL for border (1px solid black) and padding (40px)

   <source lang="html4strict">

<html> <head>

<title>Define class for
    for border (1px solid black) and padding (40px)</title> <style type="text/css"> #navigation { border: 1px solid black; padding: 40px; } </style> </head> <body>

    </body> </html> 

    </source>


    Left margin for list

       <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" lang="en" xml:lang="en"> <head> 

     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Lists</title>
 <style type="text/css" media="screen">
 #fig1_1 ul {
   list-style: none;
   padding-left: 0;
 }    
 </style>

    </head> <body>

    • Apples
    • Spaghetti
    • Green Beans
    • Milk

    </body> </html> 

    </source>


    List with background

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

        <head>
     <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
     <meta http-equiv="content-language" content="en-us" />
       <style type="text/css">
           ul#top {
               color: black;
           }
           ul#top li a {
               color: red;   
               background: pink;
           }
       </style>
   </head>
   <body>

    This is the title

    This is the sub title

    • <a href="#">This is a test. </a>
    • <a href="#">This is a test. </a>
    • <a href="#">This is a test. </a>
    • <a href="#">This is a test. </a>
    • <a href="#">This is a test. </a>
    • <a href="#">This is a test. </a>

    header 3<a href=""></a>

    This is a test. 

       </body>

    </html> 

    </source>


    Nested UL and LI tags

       <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" />
 <title></title>
 <style type="text/css" media="screen">
 div {
   margin-bottom: 30px;
 }  
 
 </style>

    </head> <body>

    • This is a test.
      • This is a test.
      • This is a test.
        • Part I
        • Part II
      • This is a test.
    • This is a test.

    </body> </html> 

    </source>


    Set margin for UL and LI

       <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> <title></title> <style type="text/css"> .tblcontent p { 

    margin: 0;
padding: 0;
font-weight: bold;

    } .tblcontent ul { 

    margin: 0;
padding: 0;

    } .tblcontent li { 

    margin: 0;
padding: 0;
line-height: 1.5;

    } .tblcontent li a { 

    padding-left: 15px;
background: red;

    } </style> </head> <body>

    To-do list on your day off.

    • <a href="">W</a>
    • <a href="">W</a>
    • <a href="">W</a>
    • no link.

    </body> </html> 

    </source>


    Turn off list style

       <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" lang="en" xml:lang="en"> <head> 

     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Lists</title>
 <style type="text/css" media="screen">
 
 #fig1_1 ul {
   list-style: none;
   
   }    
 </style>

    </head> <body>

    • Apples
    • Spaghetti
    • Green Beans
    • Milk

    </body> </html> 

    </source>


    turns off bullets for multi-level bullets

       <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" />
 <title></title>
 <style type="text/css" media="screen">
 div {
   margin-bottom: 30px;
   }  
 #divID #sitemap {
   font-size: 140%;
   font-weight: bold;
   color: #f63;
   }
 
 #divID #sitemap li {
   list-style: none; 
   }
     
 #divID #sitemap li ul {
   font-size: 90%;
   color: #000;
   }
 
 </style>

    </head> <body>

    • This is a test.
      • This is a test.
      • This is a test.
        • Part I
        • Part II
      • This is a test.
    • This is a test.

    </body> </html> 

    </source>


    UL border bottom: 1px solid black

       <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> <title></title> <style type="text/css"> li { 

    border-top: 1px solid black;
padding: .3em 0;

    } ul { 

    margin-left: 40px;
padding-left: 0px;
border-bottom: 1px solid black; 
list-style: none;
width: 36%;

    } </style> </head> <body>

    • V
    • S
    • T
    • P

    </body> </html> 

    </source>


    UL list style: none

       <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> <title></title> <style type="text/css"> li { 

    border-top: 1px solid black;
padding: .3em 0;

    } ul { 

    margin-left: 40px;
padding-left: 0px;
border-bottom: 1px solid black; 
list-style: none;
width: 36%;

    } </style> </head> <body>

    • V
    • S
    • T
    • P

    </body> </html> 

    </source>


    UL margin: 0

       <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> <title></title> <style type="text/css"> ul { 

    list-style: none;
margin: 0;
padding: 0 0 0 1em;
text-indent: -1em;

    } li { 

    width: 33%;
padding: 0;
margin: 0 0 0.25em 0;

    } li:before { 

    content: "\00BB \0020";

    } </style> </head> <body>

    • V
    • S
    • T
    • P

    </body> </html> 

    </source>


    UL margin left and padding left

       <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> <title></title> <style type="text/css"> ul { 

    margin-left: 40px;
padding-left: 0px;

    } </style> </head> <body>

    • V
    • S
    • T
    • P

    </body> </html> 

    </source>


    UL padding:m

       <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> <title></title> <style type="text/css"> ul { 

    list-style: none;
margin: 0;
padding: 0 0 0 1em;
text-indent: -1em;

    } li { 

    width: 33%;
padding: 0;
margin: 0 0 0.25em 0;

    } li:before { 

    content: "\00BB \0020";

    } </style> </head> <body>

    • V
    • S
    • T
    • P

    </body> </html> 

    </source>


    UL 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>Unordered list</title>

    </head> <body>

    • water
    • yeast
    • flour
    • oil
    • salt

    </body> </html> 

    </source>


    UL text index: -1em

       <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> <title></title> <style type="text/css"> ul { 

    list-style: none;
margin: 0;
padding: 0 0 0 1em;
text-indent: -1em;

    } li { 

    width: 33%;
padding: 0;
margin: 0 0 0.25em 0;

    } li:before { 

    content: "\00BB \0020";

    } </style> </head> <body>

    • V
    • S
    • T
    • P

    </body> </html> 

    </source>


    UL width: 36%

       <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> <title></title> <style type="text/css"> li { 

    border-top: 1px solid black;
padding: .3em 0;

    } ul { 

    margin-left: 40px;
padding-left: 0px;
border-bottom: 1px solid black; 
list-style: none;
width: 36%;

    } </style> </head> <body>

    • V
    • S
    • T
    • P

    </body> </html> 

    </source>


    Use DIV to wrap a UL

       <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> <title></title> <style type="text/css">

    1. navsite ul {
    list-style: none; 
margin: 0; 
padding: 0;

    } </style> </head> <body>

    </body> </html>

    </source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/List_Style/UL&oldid=5625»