html 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、代码如下：

ul li布局实例

ul, ol, li {list-style: none;margin:0; padding:0;normal;font:14px/24px Arial}

php.cn-1
php.cn-2
php.cn-3

效果如下：

2、解释

以上去掉li ul ol三者的默认list-style样式，同时设置mragin和padding为0，字体大小为14px，行高为24px。为什么不用li自带有list-style-type设置圆点效果？

这是因为不同浏览器有一定差距，避免圆点效果不同，距离左边不同，所以统一取消list-style样式，重新使用背景样式来排版实现。

以上就是对list-style是什么意思?list-style样式属性详解的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。

html list-style的作用,list-style是什么意思?list-style样式属性详解相关推荐

u盘制作大师 linux系统教程,制作用U盘启动的Linux系统的简单步骤详解
制作用U盘启动的Linux系统的简单步骤详解最近听朋友说误删除了Linux系统里的文件,于是系统进不了,里面保存着很多重要的数据,这该怎么办?虽然可以把硬盘取出挂载其他Linux系统运行,也可跳过控 ...
计算机各键的名称和作用,space是什么键键盘键位名称及功用详解
键盘是操作计算机必备的输入设备,很多用户天天使用着键盘,那么你对键盘的真的熟悉吗?知道space是什么键吗?可能还有很多用户对键盘的很多键位的名称和作用都不知道,下面就为大家详细的介绍键盘键位名称及功 ...
计算机常用命令ipconfg,ipconfig命令有什么作用？几个常用的ipconfig命令使用方法详解...
ipconfig命令有什么作用?在使用Windows系统的过程中,我们经常会使用CMD命令提示符.而ipconfig是命令提示符比较常用的命令之一,很多用户不知道如何使用ipconfig命令,下面装机 ...
在计算机中配置了网关作用是什么意思,网关有什么用（网关详解网关作用大全）...
网关有什么用(网关详解&网关作用大全) 很多小伙伴在学习或看资料的时候,经常会遇到"默认网关"这个概念,但很多小伙伴不知道这个默认网关到底指的是什么,今天小编正好有时间,可 ...
list:style属性详解
关于list-style属性,自己以前就会用一个 list-style:none;用来消除li列表前面的小点点下面详解list-style属性 list-style-type是设置列表前的标记取值 ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
mysql中外键的作用是什么_mysql外键基本功能与用法详解
本文实例讲述了mysql外键基本功能与用法.分享给大家供大家参考,具体如下: 本文内容: 什么是外键外键的增加外键的修改和删除外键的约束模式首发日期:2018-04-12 什么是外键: 外键就 ...
双显卡只用独显好吗_显卡有什么作用独显和双显卡笔记本哪个好【详解】
现在笔记本电脑成为了我们生活中比较常见的一种数码产品, 显卡是笔记本电脑中十分重要的一个配件,很多消费者在选购笔记本的时候都会产生一些疑虑:独显笔记本和双显卡笔记本有什么区别?哪种更好一些?本文就为 ...
【Mark 常用方法】Html中＜form＞标签作用和属性详解
敲代码时偶然冒出这样的疑问, 一通搜索后发现, 网上大都写的十分复杂, 对初学者十分不友好. 因此我站在初学者的角度, 对二者的区别做了汇总和精炼, 总结如下: 1.action,值:URL,规定当提 ...

html list-style的作用,list-style是什么意思?list-style样式属性详解

html list-style的作用,list-style是什么意思?list-style样式属性详解相关推荐

最新文章

热门文章