在我们的工作学习中,大多数人使用列表标签的时候总一般的选择是把list-type设置成none。不过可能很多人对于这个属性的细节并没有很深的了解。甚至会把list-type和list-type-style混淆。那么,今天我们就来看看css的这个属性的一些细节。

  list-type定义:用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象(如li对象)。

  这个属性有:1、list-type-image  2、list-type-position  3、list-type-style

  •   list-type-image

  说明: 设置或检索作为对象的列表项标记的图像。若此属性值为 none 或指定 url 地址的图片不能被显示时,list-style-type 属性将发生作用。

  取值:默认值是none,也可以自己指定图片。

  •   list-type-position

  说明: 设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁( margin-left )被设置为 0 ,则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。

  取值:默认值是outside,outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐。也可设置为:inside。inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐

  •   list-type-style

  说明: 设置或检索对象的列表项所使用的预设标记。若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时,此属性将发生作用。

  取值:

disc :  CSS1 实心圆

circle :  CSS1 空心圆

square :  CSS1 实心方块

decimal :  CSS1 阿拉伯数字

lower-roman :  CSS1 小写罗马数字

upper-roman :  CSS1 大写罗马数字

lower-alpha :  CSS1 小写英文字母

upper-alpha :  CSS1 大写英文字母

none :  CSS1 不使用项目符号

armenian :  CSS2 传统的亚美尼亚数字

cjk-ideographic :  CSS2 浅白的表意数字

georgian :  CSS2 传统的乔治数字

lower-greek :  CSS2 基本的希腊小写字母

hebrew :  CSS2 传统的希伯莱数字

hiragana :  CSS2 日文平假名字符

hiragana-iroha :  CSS2 日文平假名序号

katakana :  CSS2 日文片假名字符

katakana-iroha :  CSS2 日文片假名序号

lower-latin :  CSS2 小写拉丁字母

upper-latin :  CSS2 大写拉丁字母

浅谈css样式之list-type的更多相关文章

  1. 浅谈CSS样式png、gif、jpg图片优化的方法

    一.PNG.GIF.JPG图片对比 在我们进行图像优化技术前,需要学习有关的图片格式的一些技术细节,每个图形格式都有自己的优势和拖弱点,知道他们会使你得到更好的视觉质量和压缩品质. 网页图片优化是网页 ...

  2. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  3. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  4. 浅谈css的预编译---less语言

    正如各位所知道的一样,css是一门标记性语言,语法相对简单,对使用者的要求也比较低 .不过可乐不知道友友们有没有发现,在使用css的时候需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤 ...

  5. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  6. 浅谈CSS盒子模型

    [摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...

  7. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  8. 浅谈css常用伪类用法

    着重写一下after和before的用法: css样式搞定:标签元素+伪类after a.'class名':after{//我的样式名称是这个,可以写成你自己的样式名称 content: '已打包'; ...

  9. 浅谈CSS中的定位知识

    1,静态定位(static) 表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 2,相对定位(relative) 将移动元素盒,但是它在文档流中的原始空间会保留下来: 相对定位元素有如 ...

随机推荐

  1. 关于 typeof 的暂时性死区,了解一下

    将知识转化为能力,核心是掌握20%行业核心技能,把学习培养成习惯,持续深耕,用能力解决问题,方能持续成长!那么基础好,就是必须条件. 最近看 数据类型,知道数据类型判断有三种方式,typeof 是其中 ...

  2. numpy.array 合并和分割

    # 导包 import numpy as np numpy.array 的合并 .concatenate() 一维数组 x = np.array([1, 2, 3]) # array([1, 2, 3 ...

  3. [BZOJ] DZY Loves Math 系列 I && II

    为了让自己看起来有点事干 ,做个套题吧..不然老是东翻翻西翻翻也不知道在干嘛... \(\bf 3309: DZY \ Loves \ Math\) 令 \(h=f*\mu\) 很明显题目要求的就是\ ...

  4. [考试反思]0829NOIP模拟测试33:仰望

    ,160,160,160... 凑和吧,但是莫名开心. 然而这次没有什么想讲的. T1,等比数列求和,XX题,水极,20分钟找规律,找错,快速幂又打错,没检查,10分. T2,想复杂了,想了很久效率很 ...

  5. 使用Typescript重构axios(三)——实现基础功能:处理get请求url参数

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  6. Python实现王者荣耀小助手(一)

    简单来说网络爬虫,是指抓取万维网信息的程序或者脚本,Python在网络爬虫有很大优势,今天我们用Python实现获取王者荣耀相关数据,做一个小助手: 前期准备,环境搭建: Python2.7 sys模 ...

  7. JDBC报错:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone

    报错原因:查阅资料发现这都是因为安装mysql的时候时区设置的不正确 mysql默认的是美国的时区,而我们中国大陆要比他们迟8小时,采用+8:00格式 解决方法: 1.修改MySQL的配置文件,MyS ...

  8. python内置模块collections介绍

    目录 python内置模块collections介绍 1.namedtuple 2.deque 3.defaultdict 4.OrderedDict 5.ChainMap 6.Counter 7.小 ...

  9. php Yaf_Loader::import引入文件报错的解决方法

    php Yaf_Loader::import引入文件报错的解决方法 改下配置文件就行<pre>yaf.use_spl_autoload=1</pre> 也可以PHP动态修改 毕 ...

  10. sqlite修改表、表字段等与sql server的不同之处

    sqlite中只支持 ALTER TABLE 命令的 RENAME TABLE 和 ADD COLUMN. 其他类型的 ALTER TABLE 操作如 DROP COLUMN,ALTER COLUMN ...