CSS ?? ???
?? HTML ??? ?????:
1. ??? ???? ?? ?? - ?? ??? ?? ???(?: ?? ??? ?, ?? ?? ?)?? ?????.
2. ? ??? ?? - ?? ??? ??? ??? ?????.
CSS? ??? ???????.
CSS? ul ? li ???? ?? ??? ??
ul ? li ??? ?????. CSS ????? ???? ??? ?????. CSS?? ?? ??? ????? ???? ????? ????. ????? ???? ???? ?? ??? ?? ??, ?? ??? ??? ??, ?? ??? ?? ?? ? ?? ??? ??? ????.
1. list-style-type ??
list-style-type ??? li ??? ??? ??? ???? ? ?????. ?? ? ?? ?? ?????. list-style-type ??? ?? ??? ?????. ?? ??? ??? ????. (????? ???? ?? ?? ? ??)
list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper -roman
list-style-type ???? ?? ?? ?? ????. ???? ?? ????? ???? ?? ? ? ??? ?????.
??: ??? ??? ???? ???. ???: ??? ?. ?: ?? ? ?. ????: ????. ???(demical): ???? ??. lower-alpha : ?? ???. upper-alpha : ?? ???. ??? ?? ??: ??? ?? ??. Upper-Roman: ??? ?? ??.
list-style-type ??? ???? ?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;}
</style>
</head>
<body>
<ul>
<li>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
</ul>
</body>
</html>List-style-image ??
list-style-image ??? ??? ?? ?? ?? ??? ???? ? ?????. ?? ?? ??? ????? ?? ?? ??? ??? ????.
List-style-image:none/url
list-style-image ??? ? ?? ?? ?? ? ????.
??: ?? ???? ????. url: ??? ???? ?????.
??? ???????:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-image:url(http://php.cn/style/images/sqpurple.gif);}
</style>
</head>
<body>
<ul>
<li>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
</ul>
</body>
</html>3. list-style-position ??
list-style -position ??? ???? ??? ?? ?? ??? ???? ? ???? ?????. ?? ?? ?? ?? ??? ?? ?? ??? ?????.
?? ??? ??: ??/??
??: ??? ??? ??? ?? ?????. ??: ??? ??? ??? ??? ?????.
list-style-position ?? ?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;list-style-position:outside;}
</style>
</head>
<body>
<ul>
<li>這里是使用list-style-position屬性值為outside的示例。請注意換行以后項目符號的位置。
這里是使用list-style-position屬性值為outside的示例。請注意換行以后項目符號的位置。
這里是使用list-style-position屬性值為outside的示例。請注意換行以后項目符號的位置。</li>
<li>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
</ul>
</body>
</html>4. list-style ??
list- style ??? li ???? ????? ???? ????? ?? ?? ??? ??? ????.
li-style:list-style-type/list-style- image/list-style-position
? ?? ??? ?? ?? ? ????. ?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style:url( inside;}
</style>
</head>
<body>
<ul>
<li>這里是使用list-style屬性的示例。請注意換行以后項目符號的位置。
這里是使用list-style屬性的示例。請注意換行以后項目符號的位置。
這里是使用list-style屬性的示例。請注意換行以后項目符號的位置。</li>
<li>這里是列表內(nèi)容</li>
</ul>
</body>
</html>???? ??? ???
?? ?? ?????? ?? ?? ??? ??? ?????:
ul
{
?? ??? ??: ??;
??: 0px;
??: 0px;
}
ul li
{
?? ???: url(sqpurple.gif);
?? ??: no-repeat;
?? ??: 0px 5px;
padding -left: 14px;
}
?? ??:
ul:
?? ?? ??? ???? ??? ?? ??? ??? ?????.
??? ??? 0px? ??(???? ???)
all li in ul:
???? URL? ???? ? ?? ????? ?????(?? ??). )
??? ?? ?? ???? ??(?? 0px, ?? ? ??? 5px)
padding-left ??? ???? ??? ???? ?????
