在我们的工作学习中,大多数人使用列表标签的时候总一般的选择是把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. 【翻译】Prometheus 2.12.0 新特性

    Prometheus 2.12.0 现在(2019.08.17)已经发布,在上个月的 2.11.0 之后又进行了一些修正和改进. 在当前的 6 周发布周期中,每一个 Prometheus 版本都有比较 ...

  2. [考试反思]1106csp-s模拟测试103: 渺茫

    7点之前上不了博客,用gedit写的.谅解一下. 看起来不是特别惨?但是被sdfz爆踩了...而且其实并不能说“不是特别惨”吧90分算个啥啊?还凑不出个T2的AC难易度评估错误,T2是最简单的没看出来 ...

  3. [考试反思]0815NOIP模拟测试22

    40分,15名. 1-4:120 75 70 70 35分20名...总之差距极小不想说了 昨天教练说:以后的考试还是联赛知识点,但是难度比联赛高. 没听进去,以为是对于所有人而言的,也就是T1难度变 ...

  4. 「Luogu 1349」广义斐波那契数列

    更好的阅读体验 Portal Portal1: Luogu Description 广义的斐波那契数列是指形如\(an=p \times a_{n-1}+q \times a_{n-2}\)的数列.今 ...

  5. Python实现获取IP代码

    代码如下: # -*- coding: utf-8 -*- #!/usr/bin/env python # @Time : 2018/5/30 11:05 # @Desc : 获取ip # @File ...

  6. python的变量内存管理

    一.变量的引用机制 当你在python中定义一个值,如x = 500时,python会在内存中开辟一个小地方用于存储数值. x = 500 #定义一个变量 print(id(x)) #打印该变量的内存 ...

  7. vue登录功能和将商品添加至购物车实现

     2.1: 学子商城--用户登录 用户登录商城用户操作行为,操作用户输入用户名和密码 点击登录按钮,一种情况登录成功 一种情况登录失败 "用户名或密码有误请检查" 2.2:如何实现 ...

  8. pssh系列工具

    一.pssh简介及安装 首先我们来了解下什么是pssh,它是干嘛用的?pssh是一个python编写可以在多台服务器上执行命令的工具,也可以实现文件复制.换而言之就是一个批量管理多台服务器的一个小工具 ...

  9. LeetCode 5264 在受污染的二叉树中查找元素 Find Elements in a Contaminated Binary Tree

    地址 https://leetcode-cn.com/contest/weekly-contest-163/problems/find-elements-in-a-contaminated-binar ...

  10. hash值生成表后缀(分表方案)

    //businessId分表目标值,tableSize:表数量,tableSuffix:表后缀 public static String getTableSuffix(String businessI ...