一,效果圖。 二,代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 樣式列表(url)</title> <style> ul.a { list-style: circle; } ul.b { list-style: ...
一,效果圖。
二,代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 樣式列表(url)</title>
<style>
ul.a {
list-style: circle;
}
ul.b {
list-style: square;
}
ol.c {
list-style: upper-roman;
}
ol.d {
list-style: lower-alpha;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
</style>
</head>
<body>
<p>example of unordered</p>
<ul class="a">
<li>coffee</li>
<li>tea</li>
<li>coca coca</li>
</ul>
<ul class="b">
<li>coffee</li>
<li>tea</li>
<li>coca coca</li>
</ul>
<p>example of ordered lists:</p>
<ol class="c">
<li>coffee</li>
<li>tea</li>
<li>coco coco</li>
</ol>
<ol class="d">
<li>coffee</li>
<li>tea</li>
<li>cocoa cocoa</li>
</ol>
<ul>
</ul>
</body>
</html>
參考資料:《菜鳥教程》