首頁 > web前端 > html教學 > CSS:列表样式(设置列表项的标志图案/位置)_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:52:22
原創
3160 人瀏覽過

通过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

  • 苹果
  • 橘子
  • 香蕉


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板