Heim  >  Artikel  >  Web-Frontend  >  CSS:列表样式(设置列表项的标志图案/位置)_html/css_WEB-ITnose

CSS:列表样式(设置列表项的标志图案/位置)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:52:223141Durchsuche

通过CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。

代码整理自w3school:http://www.w3school.com.cn 

效果图:

示例代码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Content-Language" content="zh-cn"><title>CSS 列表样式</title>  <style type="text/css">    body {background-color:#eaeaea}    h3 {display:inline;}    ul.squareType {list-style-type:square}    ul.imageStyle {list-style-image:url(images/red_icon.png);}    ul.defPositionInside {list-style-position:inside}    ul.defPositionOutside {list-style-position:outside}    /*设置list-style-image之后,list-style-type将无效。*/    ul.defStyle {list-style:url(images/red_icon.png) square inside}    </style>  <p>CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。</p>  <hr>    <h3>(一)设置列表的列表项标志:list-style-type</h3>  
  • 苹果
  • 橘子
  • 香蕉

(二)设置自定义图标为列表的列表项标志:list-style-image

  • 苹果
  • 橘子
  • 香蕉

(三)设置列表项标志的位置:list-style-position

(1)inside

  • 苹果
  • 橘子
  • 香蕉

(2)outside

  • 苹果
  • 橘子
  • 香蕉

(四)将以上3个列表样式属性合并为一个属性:list-style

  • 苹果
  • 橘子
  • 香蕉


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn