HTML/CSS/List Style/list style image

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

Simple list-style-type and list-style-image example

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Simple list-style-type and list-style-image example</title>
  <style type="text/css">
    ul.image {
      list-style-image: url("square.gif");
    }
  </style>
</head>
<body>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <ul>
    <li>L.</li>
    <li>L.</li>
  </ul>
  <ul class="image">
    <li>L.</li>
    <li>L.</li>
  </ul>
</body>
</html>



UL list-style-image: url(bullet.gif);

 
<!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-image: url(bullet.gif);
}
</style>
</head>
<body>
  
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>