三、CSS样式—

三、CSS样式——列表

概念：

　　CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

属性	描述
list-style	简写列表项
list-style-image	列表项图像
list-style-position	列表标志位置
list-style-type	列表类型

 1 <!--index.html-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <link rel="stylesheet" type="text/css" href="style.css">
 8 </head>
 9 <body>
10     <ul class="style-image">
11         <li>苹果</li>
12         <li>苹果</li>
13         <li>苹果</li>
14         <li>苹果</li>
15     </ul>
16     <p>看一下效果</p>
17     <ul class="ul1">
18         <li>苹果</li>
19         <li>苹果</li>
20         <li>苹果</li>
21         <li>苹果</li>
22     </ul>
23     <ul class="ul2">
24         <li>苹果</li>
25         <li>苹果</li>
26         <li>苹果</li>
27         <li>苹果</li>
28     </ul>
29 </body>
30 </html>

 1 /*style.css*/
 2 .style-image{
 3     /*list-style-type: armenian;*/
 4     list-style-image: url("1.JPG");
 5 }
 6 
 7 .ul1{
 8     list-style-position: inside;
 9 }
10 .ul2{
11     list-style-position: outside;
12 }