The marker and the image can be specified : list style « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. list style

The marker and the image can be specified

   
      <!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: lightyellow;
          border: 1px solid gold;
          padding: 5px;
          margin: 2px;
      }

      li#marker-image {
          list-style: square url('http://www.java2s.com/style/logo.png');
      }

              
              </style>
          </head>
          <body>
              <ul>

                  <li id='marker-image'>
                      The marker and the image can be specified.
                  </li>
              </ul>
          </body>
      </html>








Related examples in the same category

1.'list-style' Example
2.list-style: inside url('exploded_folder.gif')
3.list-style: disc outside url('download.gif')
4.list-style: square url('arrow.png') outside
5.list-style: square url('arrow.png') outside;
6.list-style: url('arrow.png') inside;
7.list-style: square inside;
8.list-style: square url('arrow.png');
9.list style: disc outside url('download.gif');
10.list style with image
11.list-style all values
12.The image and the position can be specified
13.You can specify only a marker
14.You can specify only the position.
15.You can specify only a marker image
16.The marker and the position can be specified
17.list-style: url('arrow.png') inside
18.list-style: square inside
19.list-style: square url('arrow.png')
20.list-style: url('arrow.png')
21.list-style: circle
22.list-style: inside
23.LI display: inline;
24.LI padding: 0 19px;
25.LI line-height: 25px;
26.LI based top menu
27.LI Menu