A part from different list item markers, such as circle, lower alpha, you can also use an image as a list item marker. Let's make a web page named liststyleimage.html
<!DOCTYPE html>
<head>
<style type="text/css">
body { background-color:blue;}
ul {list-style-image:url(arrow.png);}
h3 {color:blueviolet;}
</style>
</head>
<body>
<h3>Furniture list</h3>
<ul >
<li>chair</li>
<li>table</li>
<li>Sofa</li>
<li>dining set</li>
<li>recliner</li>
</ul>
</body>
</html>
The output of the above Web page is:
<!DOCTYPE html>
<head>
<style type="text/css">
body { background-color:blue;}
ul {list-style-image:url(arrow.png);}
h3 {color:blueviolet;}
</style>
</head>
<body>
<h3>Furniture list</h3>
<ul >
<li>chair</li>
<li>table</li>
<li>Sofa</li>
<li>dining set</li>
<li>recliner</li>
</ul>
</body>
</html>
The output of the above Web page is:
No comments:
Post a Comment