概念:
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 }