Home > Web Front-end > HTML Tutorial > CSS:列表样式(设置列表项的标志图案/位置)_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:52:22
Original
3172 people have browsed it

通过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>  
Copy after login
  • 苹果
  • 橘子
  • 香蕉

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

  • 苹果
  • 橘子
  • 香蕉

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

(1)inside

  • 苹果
  • 橘子
  • 香蕉

(2)outside

  • 苹果
  • 橘子
  • 香蕉

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

  • 苹果
  • 橘子
  • 香蕉


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template