在我们的工作学习中,大多数人使用列表标签的时候总一般的选择是把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. noip11 string

    这道题改题时我打了个玄学复杂度的暴力,然后我成功的造了一组数据hack掉了自己的代码.... 通过观察,我们可以很容易的发现在操作几次后,整个序列就会变成一块一块相同的字母. 于是我们可以对我们的暴力 ...

  2. noip模拟9 达哥随单题

    T1.随 看题第一眼,就瞄到最下面 孙金宁教你学数学  ?????原根?目测神题,果断跳过. 最后打了个快速幂,愉快的收到了达哥送来的10分. 实际上这题暴力不难想,看到一个非常小的mod应该就能想到 ...

  3. 高可用架构的实现--dubbo+zookeeper+maven+tomcat

    最近在做分布式的服务架构搭建,因为自己确实很喜欢搞这种技术类的研究,所以在公司需要的时候主动承担了这项光荣而艰巨的任务.公司搭建的架构主要目的是需要支持后端接口的多用户的高并发访问,希望能够达到每秒并 ...

  4. NOIP原题 斗地主(20190804)

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关 系根据牌的数码表示如下:3<4&l ...

  5. Selenium +Chrome浏览器如何模拟手机操作

    Selenium +Chrome浏览器如何模拟手机操作 进入手机模式 打开谷歌浏览器,按F12,进入开发者模式,点击Toggle device toolbar,进入手机模式 设置Chrome的手机模式 ...

  6. 通俗地说逻辑回归【Logistic regression】算法(二)sklearn逻辑回归实战

    前情提要: 通俗地说逻辑回归[Logistic regression]算法(一) 逻辑回归模型原理介绍 上一篇主要介绍了逻辑回归中,相对理论化的知识,这次主要是对上篇做一点点补充,以及介绍sklear ...

  7. 『题解』Codeforces9D How many trees?

    更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description In one very old text file there was wr ...

  8. 『题解』洛谷P5436 【XR-2】缘分

    Problem Portal Portal1:Luogu Description 一禅希望知道他和师父之间的缘分大小.可是如何才能知道呢? 一禅想了个办法,他先和师父约定一个正整数\(n\),接着他们 ...

  9. 更新linux时候提示“由于没有公钥,无法验证下列签名".

    本文链接:https://blog.csdn.net/loovejava/article/details/21837935 新安装的Ubuntu在使用sudo apt-get update更新源码的时 ...

  10. 原来JS是这样的 - 原型链

    上一篇提到属性描述符 [[Get]] 和 [[Put]] 以及提到了访问描述符 [[Prototype]],看它们的特性就会很容易的让人想到经典的面向对象风格体系中对类操作要做的事情,但带一些 int ...