提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css list-style属性怎样用【css教程】,css,list-style属性

list-style属性是css的一个简写属性,用于在一个声明中设置一切的列表属性。能够设置的列表属性有:列表项标记的范例、标记位置、图象标记;能够不设置个中的某个值,比方 "list-style:circle inside;" 也是许可的。

css list-style属性怎样用?

list-style属性在一个声明中设置一切的列表属性。

申明:

该属性是一个简写属性,涵盖了一切其他列表款式属性。

因为它应用到一切 display 为 list-item 的元素,所以在一般的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它能够应用到任何元素,并由 list-item 元素继续。

能够按递次设置以下属性:list-style-type,list-style-position,list-style-image。

● list-style-type:设置列表项标记的范例。

● list-style-position:设置在那边安排列表项标记。

● list-style-image:运用图象来替代列表项的标记。

能够不设置个中的某个值,比方 "list-style:circle inside;" 也是许可的。未设置的属性会运用其默认值。

解释:一切浏览器都支撑 list-style 属性。

css list-style属性的运用示例

示例1:差别的列表项标记

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul.a {list-style:circle;}
ul.b {list-style:square;}
ol.c {list-style:upper-roman;}
ol.d {list-style:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</body>
</html>

效果图:

示例2:指定列表项标记的图象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul 
{
list-style:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

效果图:

以上就是css list-style属性怎样用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css list-style属性怎样用【css教程】,css,list-style属性"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线