在css中,有专门的为列表设计的样式,使用这些样式可以用图片来代替列表前的符号,也可以用不同的方式来显示
列表前的标号,还可以设置列表文字的排列方式和间距
1.用图片代替符号
在css中可以使用list-style-p_w_picpath属性来修饰死板的标号,使列表变得更加生动.
list-style-p_w_picpath属性可以作用在<li><ol>与<ul>标签
语法代码:list-style-p_w_picpath:none || url ;
- 在css中,有专门的为列表设计的样式,使用这些样式可以用图片来代替列表前的符号,也可以用不同的方式来显示
- 列表前的标号,还可以设置列表文字的排列方式和间距
- 1.用图片代替符号
- 在css中可以使用 list-style-p_w_picpath属性来修饰死板的标号,使列表变得更加生动.
- list-style-p_w_picpath属性可以作用在<li><ol>与<ul>标签
- 语法代码:list-style-p_w_picpath:none || url ;
- 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- 2. <html>
- 3. <head>
- 4. <title>文本样式</title>
- 5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- 6. <link href="" type="text/css" rel="stylesheet"/>
- 7. <style type="text/css">
- 8. <!--
- 9. body{font-size: 10pt;font-family: 宋体;color: black;}
- 10. h3{text-align: center;}
- 11. div.left {position: absolute;left:50%;}
- 12. div.right {position: absolute;right:50%;}
- 13.
- 14.
- 15.
- 16.
- 17. -->
- 18. </style>
- 19. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- 20. </head>
- 21. <body>
- 22. <div class="right">
- 23.
- 24. 以下是没有使用样式的无序列表:
- 25. <ul>
- 26. <li>list-style:该属性是复合属性</li>
- 27. <li>list-style-p_w_picpath:该属性用于指定图片</li>
- 28. <li>list-style-position:该属性用来指定符号显示方式</li>
- 29. <li>list-style-type:该属性用于列表的标志样式</li>
- 30. <li>marker-offset:该属性用于列表之间的间距</li>
- 31. </ul>
- 32. 以下是使用无序的无序列表:
- 33. <ul class="mystyle">
- 34. <li>list-style:该属性是复合属性</li>
- 35. <li>list-style-p_w_picpath:该属性用于指定图片</li>
- 36. <li>list-style-position:该属性用来指定符号显示方式</li>
- 37. <li>list-style-type:该属性用于列表的标志样式</li>
- 38. <li>marker-offset:该属性用于列表之间的间距</li>
- 39. </ul>
- 40. 以下是作用在无序列表的列表项无序列表:
- 41. <ul>
- 42. <li class="mystyle">list-style:该属性是复合属性</li>
- 43. <li>list-style-p_w_picpath:该属性用于指定图片</li>
- 44. <li class="mystyle">list-style-position:该属性用来指定符号显示方式</li>
- 45. <li>list-style-type:该属性用于列表的标志样式</li>
- 46. <li class="mystyle">marker-offset:该属性用于列表之间的间距</li>
- 47. </ul>
- 48. </div>
- 49. <div class="left">
- 50. 以下是没有使用样式的有序列表:
- 51. <ol>
- 52. <li>list-style:该属性是复合属性</li>
- 53. <li>list-style-p_w_picpath:该属性用于指定图片</li>
- 54. <li>list-style-position:该属性用来指定符号显示方式</li>
- 55. <li>list-style-type:该属性用于列表的标志样式</li>
- 56. <li>marker-offset:该属性用于列表之间的间距</li>
- 57. </ol> 以下是没有使用样式的无序列表:
- 58. <ol class="mystyle">
- 59. <li>list-style:该属性是复合属性</li>
- 60. <li>list-style-p_w_picpath:该属性用于指定图片</li>
- 61. <li>list-style-position:该属性用来指定符号显示方式</li>
- 62. <li>list-style-type:该属性用于列表的标志样式</li>
- 63. <li>marker-offset:该属性用于列表之间的间距</li>
- 64. </ol> 以下是没有使用样式的无序列表:
- 65. <ol >
- 66. <li>list-style:该属性是复合属性</li>
- 67. <li>list-style-p_w_picpath:该属性用于指定图片</li>
- 68. <li>list-style-position:该属性用来指定符号显示方式</li>
- 69. <li>list-style-type:该属性用于列表的标志样式</li>
- 70. <li>marker-offset:该属性用于列表之间的间距</li>
- 71. </ol>
- 72.
- 73. </div>
- 74. </body>
- 75. </html>
2.丰厚列表前的标号
在HTML中的列表标号,只能是一个黑点或者数字显得很单调,在css中list-style-type属性可以用来指定符号的形式.
3.列表间距
在css中,可以用marker-offset属性来设置列表的间距,这个间距不是每个列表项之间的间距,而是指主容器与标记容器之间的间距.可以把<ol>与<ul>看成是主容器,把li看成是标记容器.marker-offset设置的是这二个容器之间的间距.
4.标号显示方式
当在列表中使用文本样式时,可以使用list-style-position属性来指定符号的显示方式.
list-style-position: outside || inside
