list-style: square url('arrow.png') outside; : list style « CSS « HTML / CSS






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

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

   

<!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 type='text/css'>
li {
    background: mistyrose;
}
li#arrow {
    list-style: square url('arrow.png') outside;
}
li#arrow-inside {
    list-style: url('arrow.png') inside;
}
li#marker-inside {
    list-style: square inside;
}
li#marker-image {
    list-style: square url('arrow.png');
}
li#arrow-only {
    list-style: url('arrow.png');
}
li#marker {
    list-style: circle;
}
li#position {
    list-style: inside;
}
</style>


    </head>
    <body>
        <ul>
            <li id='arrow'>
                All three styles can be provided.
            </li>
            <li id='arrow-inside'>
                The image and the position.
            </li>
            <li id='marker-inside'>
                The marker and the position.
            </li>
            <li id='marker-image'>
                The marker and the image.
            </li>
            <li id='arrow-only'>
                Just the image.
            </li>
            <li id='marker'>
                Just the marker.
            </li>
            <li id='position'>
                Just the position.
            </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: url('arrow.png') inside;
6.list-style: square inside;
7.list-style: square url('arrow.png');
8.list style: disc outside url('download.gif');
9.list style with image
10.list-style all values
11.The image and the position can be specified
12.You can specify only a marker
13.You can specify only the position.
14.You can specify only a marker image
15.The marker and the position can be specified
16.The marker and the image 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