CSS--リスト
2377 ワード
1.一般的なリストタイプ
2.画像をリスト項目としてマークする
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title> This is my HTML</title>
<!-- -->
<style type="text/css">
/*** ***/
ul.none {list-style-type: none;}
/*** ***/
ul.disc {list-style-type: disc;}
/*** ***/
ul.circle {list-style-type: circle;}
/*** ***/
ul.square {list-style-type: square;}
/*** ***/
ul.decimal {list-style-type: decimal;}
/*** ***/
ul.lower-alpha {list-style-type: lower-alpha;}
</style>
</head>
<body>
<ul class="none">
<li>"none" </li>
<li> </li>
<li> </li>
</ul>
<ul class="disc">
<li>"disc" </li>
<li> </li>
<li> </li>
</ul>
<ul class="circle">
<li>"circle" </li>
<li> </li>
<li> </li>
</ul>
<ul class="square">
<li>"square" </li>
<li> </li>
<li> </li>
</ul>
<ul class="decimal">
<li>"decimal" </li>
<li> </li>
<li> </li>
</ul>
<ul class="lower-alpha">
<li>"lower-alpha" </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>2.画像をリスト項目としてマークする
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title> This is my HTML</title>
<style type="text/css">
ul {list-style-image: url(file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/1.jpg);}
</style>
</head>
<body>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>