HTML/CSS/CSS Attributes and Javascript Style Properties/list style

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

list-style: disc outside url("download.gif")

   <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>
       <title></title>
       <style type="text/css">
           ul {
               font-family: sans-serif;
               list-style: disc outside url("ulImage.gif");
           }
       </style>
   </head>
   <body>
  • jpg
  • exe
  • zip
   </body>

</html> 

</source>


"list-style" Example

   <source lang="html4strict">

<html> <head> </head> <body>

  • Item 1.
  • Item 2.
  • Item 3.
  • Item 4.
  • Item 5.

</body> </html> 


     </source>


list-style: inside url("exploded_folder.gif")

   <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>
       <title></title>
       <style type="text/css">
           li {
               list-style-image: url("collapsed_folder.gif");
           }
           li + li + li + li + li {
               list-style: inside url("exploded_folder.gif");   
           }
       </style>
   </head>
   <body>
  • My Pictures
  • My Music
  • My Documents
  • My Computer
  • Control Panel
   </body>

</html> 

</source>


list-style: square url("arrow.png") outside

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

   <head>
       <title>list-style</title>
       <style rel="stylesheet" type="text/css">

li { 

   background: pink;

} li#arrow { 

   list-style: square url("arrow.png") outside;

} 

       </style>
   </head>
   <body>
  • All three styles can be provided. 
   </body>

</html> 

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