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

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

WBOY
发布: 2016-06-24 11:52:22
原创
3173 人浏览过

通过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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板