提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > list-style是什么意义?list-style款式属性详解【html5教程】,list-style,list-style样式

本篇文章给人人带来的内容是关于list-style是什么意义?list-style款式属性详解,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

一、list-style作用与用途

list-style是设置列表li的款式。比方li前面为阿拉伯数字、圆点、实心圆、图片、空心圆、小写英文字母、大写英文字母、传统的亚美尼亚数字等。

二、语法

1、语法:

list-style : list-style-image || list-style-position || list-style-type

我们晓得html语法划定li必须在ul或ol内运用,那末对ul或ol能够设置list-style-image引入图片作为li的前面规划素材。但平常div css规划时刻不采纳这类方法来设置li的前面图片素材,平常对li直接设置背景图片,如许兼容更好,更容易掌握。

我们运用比较多是list-style的list-style-type属性来设置li默许前面款式。

2、list-style-type的值与诠释

以下能够本身下来测试看看种种值结果。

参数:

三、规划平常做法

平常在一个网页规划时刻最先CSS就要把ul ol li三者列表list-style款式去掉,也是为了兼容各大浏览器,作废列表标签默许list-style。

作废ul li ol的list-style款式代码:

ul,ol,li{list-style:none}

在网页中要对列表前设置圆点,再经由过程对li设置Background背景图片即可。

1、代码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ul li规划实例</title>
<style>
ul, ol, li {list-style: none;margin:0; padding:0;normal;font:14px/24px Arial}
</style>
</head>
<body>
<ul class="ab">
<li>ki4.cn-1</li>
<li>ki4.cn-2</li>
<li>ki4.cn-3</li>
</ul>
</body>
</html>

结果以下:

2、诠释

以上去掉li ul ol三者的默许list-style款式,同时设置mragin和padding为0,字体大小为14px,行高为24px。为何不必li自带有list-style-type设置圆点结果?

这是由于差别浏览器有肯定差异,防止圆点结果差别,间隔左侧差别,所以一致作废list-style款式,从新运用背景款式来排版完成。

以上就是对list-style是什么意义?list-style款式属性详解的悉数引见,假如您想相识更多有关CSS3教程,请关注ki4网。

以上就是list-style是什么意义?list-style款式属性详解的细致内容,更多请关注ki4网别的相干文章!

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

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"list-style是什么意义?list-style款式属性详解【html5教程】,list-style,list-style样式"

最新评论

    暂无留言哦~~

博客简介

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

友情链接

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

服务热线:
 

 QQ在线交流

 旺旺在线