CSS 常用列表样式


CSS没学扎实,复习记录一下。下面是一些常用的属性

  • list-style-image

    指定一个图片作为列表项的标记

    默认值none,可设置为图片的url

    list-style-image:url(...);

    此属性会覆盖list-style-type 通常这两个属性都写,避免url失效,或浏览器不支持而没有小图标

  • list-style-position

    设置列表前的标记位置在列表里面还是外面

    默认值outside,可以设置为inside

    有时候遇到的列表布局问题,就是这个属性导致的。最好用inside

  • list-style-type

    设置列表图标的类型

    默认值disc,详情点击 https://www.w3school.com.cn/cssref/pr_list-style-type.asp

    不想浪费流量请看本文最后 [1]

  • list-style

    简写属性,可以把上面几个属性放在一行写。


  1. none 无标记。

    disc 默认。标记是实心圆。

    circle 标记是空心圆。

    square 标记是实心方块。

    decimal 标记是数字。

    decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)

    lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)

    upper-roman 大写罗马数字(I, II, III, IV, V, 等。)

    lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

    upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

    lower-greek 小写希腊字母(alpha, beta, gamma, 等。)

    lower-latin 小写拉丁字母(a, b, c, d, e, 等。)

    upper-latin 大写拉丁字母(A, B, C, D, E, 等。)

    hebrew 传统的希伯来编号方式

    armenian 传统的亚美尼亚编号方式

    georgian 传统的乔治亚编号方式(an, ban, gan, 等。)

    cjk-ideographic 简单的表意数字

    hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)

    katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)

    hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)

    katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

CSS 常用列表样式的更多相关文章

  1. CSS控制列表样式属性list-style有哪些?怎么用?

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  2. CSS的列表样式和网页背景

    CSS的列表样式 1. 设置title和列表 HTML: <!DOCTYPE html><html lang="en"><head>    &l ...

  3. CSS:列表样式(设置列表项的标志图案/位置)

    通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...

  4. css背景|列表样式

    背景样式 背景区包含内容.padding 和 boder 不包含外边距 background-color 设置元素的背景颜色 background-image 把图像设置为背景,包含内边距和边框,不包 ...

  5. css常用公共样式

    /*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...

  6. CSS 常用自定义样式

    目录: 1. 文本单行显示,并对超出部分截断以省略号代替: 2.列布局或栅格布局:比如:左侧固定宽度,右侧占满剩下的宽度: 章节: 1. 文本单行显示,并对超出部分截断以省略号代替:参见以下代码: d ...

  7. [No000016A]CSS常用三种选择器

    1.HTML Tag p{color:red;} 2.id #myid{color:red;} 3.class .myclass{color:red;} CSS常用文本样式属性 color font- ...

  8. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  9. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

随机推荐

  1. centos8安装zookeeper(单机方式)

    一,下载zookeeper: 1,官网地址 http://zookeeper.apache.org/ 找到这个地址: https://mirrors.tuna.tsinghua.edu.cn/apac ...

  2. 《Kafka笔记》2、环境搭建、Topic管理

    目录 一.Kafka环境搭建和Topic管理 1 单机环境搭建 1.1 环境准备 1.1.1 JDK 安装 1.1.2 配置主机名和ip 1.1.3 关闭防火墙和防火墙开机自启动 1.1.4 zook ...

  3. C++ Primer第5版 第二章课后练习

    练习2.1 C++ 语言规定short 和 int 至少 16 位, long 至少32位, long long 至少64位.带符号类型可以表示整数.负数或0, 无符号类型则仅能表示大于等于0的值Th ...

  4. 第六章 SSH远程服务介绍

    一.相关介绍 1.简介SSH是一个安全协议,在进行数据传输时,会对数据包进行加密处理,加密后在进行数据传输.确保了数据传输安全.那SSH服务主要功能有哪些呢? 1)提供远程连接的服务 linux远程连 ...

  5. js和vue方法的相互调用(iframe父子页面的方法相互调用)。

    项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...

  6. pytest-pyppeteer:在pytest中运行pyppeteer

    pytest-pyppeteer pytest-pyppeteer是我写的一个 pytest 插件,支持在 pytest 中运行pyppeteer,起因是为了解决工作中的一个测试需求,现在将其开源并做 ...

  7. IntelliJ IDEA 2020.2 x64 激活 2020-09-18亲测有效

    idea 激活,查阅许多资源和文章,激活码都失效,无意发现该资源(https://macwk.com/article/jetbrains-crack),亲测有效(2020-09-18),在此记录,以备 ...

  8. nio DirectByteBuffer如何回收堆外内存

    概述 使用了nio框架的应用,比如服务框架,利用nio建立长连接通信,他们会使用DirectByteBuffer来分配堆外内存,也就是本地直接内存,这个内存的回收不由gc直接维护,我们通常所说的gc, ...

  9. c100k

    sysctl -w fs.file-max=10485760 #系统允许的文件描述符数量10msysctl -w net.ipv4.tcp_rmem=1024 #每个tcp连接的读取缓冲区1k,一个连 ...

  10. Java_数组, 懒得整理了 ---------------------> 未完, 待续

    待续 public class TestArray { public static void main(String[] args) { String[] s1 = {"双儿", ...