<html>

<head>

<style type="text/css">

ul.none {list-style-type: none}

ul.disc {list-style-type: disc}

ul.circle {list-style-type: circle}

ul.square {list-style-type: square}

ul.decimal {list-style-type: decimal}

ul.decimal-leading-zero {list-style-type: decimal-leading-zero}

ul.lower-roman {list-style-type: lower-roman}

ul.upper-roman {list-style-type: upper-roman}

ul.lower-alpha {list-style-type: lower-alpha}

ul.upper-alpha {list-style-type: upper-alpha}

ul.lower-greek {list-style-type: lower-greek}

ul.lower-latin {list-style-type: lower-latin}

ul.upper-latin {list-style-type: upper-latin}

ul.hebrew {list-style-type: hebrew}

ul.armenian {list-style-type: armenian}

ul.georgian {list-style-type: georgian}

ul.cjk-ideographic {list-style-type: cjk-ideographic}

ul.hiragana {list-style-type: hiragana}

ul.katakana {list-style-type: katakana}

ul.hiragana-iroha {list-style-type: hiragana-iroha}

ul.katakana-iroha {list-style-type: katakana-iroha}

</style>

</head>

<body>

<ul class="none">

<li>"none" 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="disc">

<li>Disc 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="circle">

<li>Circle 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="square">

<li>Square 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="decimal">

<li>Decimal 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="decimal-leading-zero">

<li>Decimal-leading-zero 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="lower-roman">

<li>Lower-roman 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="upper-roman">

<li>Upper-roman 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="lower-alpha">

<li>Lower-alpha 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="upper-alpha">

<li>Upper-alpha 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="lower-greek">

<li>Lower-greek 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="lower-latin">

<li>Lower-latin 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="upper-latin">

<li>Upper-latin 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="hebrew">

<li>Hebrew 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="armenian">

<li>Armenian 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="georgian">

<li>Georgian 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="cjk-ideographic">

<li>Cjk-ideographic 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="hiragana">

<li>Hiragana 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="katakana">

<li>Katakana 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="hiragana-iroha">

<li>Hiragana-iroha 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="katakana-iroha">

<li>Katakana-iroha 类型</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

</body>

</html>
  • "none" 类型
  • 茶
  • 可口可乐
  • Disc 类型
  • 茶
  • 可口可乐
  • Circle 类型
  • 茶
  • 可口可乐
  • Square 类型
  • 茶
  • 可口可乐
  • Decimal 类型
  • 茶
  • 可口可乐
  • Decimal-leading-zero 类型
  • 茶
  • 可口可乐
  • Lower-roman 类型
  • 茶
  • 可口可乐
  • Upper-roman 类型
  • 茶
  • 可口可乐
  • Lower-alpha 类型
  • 茶
  • 可口可乐
  • Upper-alpha 类型
  • 茶
  • 可口可乐
  • Lower-greek 类型
  • 茶
  • 可口可乐
  • Lower-latin 类型
  • 茶
  • 可口可乐
  • Upper-latin 类型
  • 茶
  • 可口可乐
  • Hebrew 类型
  • 茶
  • 可口可乐
  • Armenian 类型
  • 茶
  • 可口可乐
  • Georgian 类型
  • 茶
  • 可口可乐
  • Cjk-ideographic 类型
  • 茶
  • 可口可乐
  • Hiragana 类型
  • 茶
  • 可口可乐
  • Katakana 类型
  • 茶
  • 可口可乐
  • Hiragana-iroha 类型
  • 茶
  • 可口可乐
  • Katakana-iroha 类型
  • 茶
  • 可口可乐

将图片作为列表图标

<html>

<head>

<style type="text/css">

ul

{

list-style-image: url('/i/eg_arrow.gif')

}

</style>

</head>

<body>

<ul>

<li>咖啡</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

</body>

</html>

  • 咖啡
  • 茶
  • 可口可乐

CSS 全部的列表样式类型的更多相关文章

  1. CSS Ul（列表样式）

    CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...

  2. css中的列表样式

    在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...

  3. CSS如何设置列表样式属性

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  4. CSS如何设置列表样式属性，看这篇文章就够用了

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

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

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

  6. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  7. CSS 常用列表样式

    CSS 常用列表样式 CSS没学扎实,复习记录一下.下面是一些常用的属性 list-style-image 指定一个图片作为列表项的标记 默认值none,可设置为图片的url list-style-i ...

  8. CSS背景样式和列表样式

    background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...

  9. CSS 列表样式详解

    CSS列表用于前端的列表排列. CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列 ...

随机推荐

  1. java规范与标准？

    所谓规范,即指由很多人同时遵守的行为或理论. java的规范并不是指其中一种,而是有很多种,比如java编码规范,java命名规范,java虚拟机规范等等,甚至于一个编码规范都有很多种,不同的公司.组 ...

  2. 1433端口无法连接（sql server 数据库无法访问问题）解决思路

    登录远程SQL服务器一 看ping 服务器IP能否ping通. 这个实际上是看和远程sql server 2000服务器的物理连接是否存在.如果不行,请检查网络,查看配置,当然得确保远程sql ser ...

  3. 迅为IMX6开发板支持4G全网通模块GPS模块

    IMX6开发板特点 处理器:IMX6开发板支持4G全网通模块GPS模块. 核心板配置:2GB DDR3内存  16GB EMMC 存储,扩展引脚多达320个:运行温度-20 ℃到+80 ℃之间. 核心 ...

  4. Android（java）学习笔记197：ContentProvider使用之内容观察者02

    下面通过3个应用程序之间的交互说明一下内容观察者: 一. 如下3个应用程序为相互交互的: 二.交互逻辑图: 三.具体代码: 1.   16_数据库工程: (1)数据库帮助类BankDBOpenHelp ...

  5. ALTER USER - 改变数据库用户帐号

    SYNOPSIS ALTER USER name [ [ WITH ] option [ ... ] ] where option can be: [ ENCRYPTED | UNENCRYPTED ...

  6. WPF小记 -- 使用Path自己画图标，点击命中(焦点)丢失问题

    在Template中,Path外面的Grid需添加Background属性值.否则点击范围会受限制,例如:Click,在RadioButton的Height和With范围内点击,命中率<1. & ...

  7. react router activeclassName 没有显示

    import React, {Component} from 'react' import {NavLink, Switch, Route, Redirect} from 'react-router- ...

  8. python 调用exe程序

    #!/usr/bin/python #-*- coding:utf-8 -*- import os, subprocess import tkMessageBox import msg_box def ...

  9. Linux从入门到适应（三）：Ubuntu16.04将python从3.5升级到3.6

    1 将python从默认的python2.7更换为python3.5 : sudo update-alternatives --install /usr/bin/python python /usr/ ...

  10. [Luogu] P1156 垃圾陷阱

    题目描述 卡门――农夫约翰极其珍视的一条Holsteins奶牛――已经落了到“垃圾井”中.“垃圾井”是农夫们扔垃圾的地方,它的深度为D(2≤D≤100)英尺. 卡门想把垃圾堆起来,等到堆得与井同样高时 ...