CSS ?? ???
CSS ?? ???
CSS ??
CSS ?? ?? ??? ??? ????.
?? ?? ??? ??? ??? ???? ????? ??
??? ?? ???? ??? ?? ?? ?? ??
???? ??? ?? ?? ??
??
HTML?? ? ??? ????. ?? ??:
??? ???? ?? ?? - ?? ??? ?? ???(?: ?? ??? ?, ?? ?? ?)?? ?????.
??? ??? ?? - ?? ??? ?? ?? ??
? CSS? ???? ?? ???? ??? ? ??? ???? ?? ?? ???? ??? ? ????.
1． ?? ??
?? ??? ? ?? ?? ?? ???? ??? ?????.
?? ??? ??? ????.
list-style-type: ????
???? ? ??:
·???: ??
·?: ?? ? ?
·???: ????
·decimal: ???
·lower-roman: ??? ????
·upper - roman : ???? ???
·lower-alpha : ??? ???
·upper-alpha : ??? ???
·none : ?? ?? ??
< ?? ????? ???? ?? ?????.????
2． ??? ?? ??? ??? ?? ??? ??? ??? ????? ??? ? ??? ?????. ?? ??? ??? ????. list-style-image: URL URL? ??? ??? ???? ? ???? ??? ??? ???? ??? ??? ? ????. ?? ?? ?? ?? ??. 3． ?? ?? ?? ??? ??? ???? ??? ?????. ?? ??? ??? ????. list-style-position: ???? ???? ? ??: ·inside: BOX ?? ??? ?????. ·??: BOX ?? ??? ????? ??? ??? ?????: BOX ??. BOX? ??? ??? ???? ??? ???? ????? ?????. ??? ??? ??? ???????.???? ?? ?? ??? ??
???? ?? ?? ??? ????? ?? ??? ??? ??? ?????.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>無序列表實例:</p>
<ul class="a">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
<ul class="b">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
<p>有序列表實例:</p>
<ol class="c">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ol>
<ol class="d">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ol>
</body>
</html>?? ?? ?????. ??????? ??? ?? ???? ????. IE? Opera? Firefox, Chrome ? Safari?? ?? ?? ??? ??? ?????. ?? ????? ??? ??? ??? ????? ???? ?? ???? ???? ???.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
</body>
</html>?? ??:
ul:
?? ??? ??? ?? ?? ?? ?? ???? ??
?? ? ??? 0px? ??(???? ???)
ul? ?? li:
??? URL ??, ? ?? ????? ?????(?? ??)
??? ?? ???? ?????(?? 0px, ?? ? ??? 5px)
??? ??? ???? ???? ?????. ?? ??
?? ?? ??
?? ?? ??? ?? ???? ??? ? ????. ?? ?? ????? ???.
??? ?? ?? ???? ?? ??? ??? ????.
list-style-type
list-style-position(??? ??? ?? CSS ?? ? ??)
list-style-image
? ? ? ??? ???? ???? ??? ??? ???? ?? ??? ??? ?? ????.
?? CSS ?? ??
?? ??>
?? ??? ?? ?????. ???? ?? ?? ??? ?????List-Style-IMAGE ??? ??? ???? ?? ??? ?????. list-style-position ???? ?? ?? ??? ??? ???????. ~ ~
