•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

list-style是什么意义?list-style款式属性详解【html5教程】,list-style,list-style样式

摘要: 本篇文章给人人带来的内容是关于list-style是什么意义?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网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号