<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. C++ 引用、指针

    一.引用 1.引用的作用:给变量起一个别名,是c++对c的扩充.原名和别名有相同的地址,根本上就是同一个东西,只是名字不一样.c++的引用机制主要是为了用作函数参数,增强函数传递数据的能力,比如swa ...

  2. Flask框架 之模版

    一.过滤器 safe:禁用转义: <p>{{ '<em>hello</em>' | safe }}</p> capitalize:把变量值的首字母转成大 ...

  3. CAD使用SetxDataString写数据(com接口)

    主要用到函数说明: MxDrawEntity::SetxDataString 写一个字符串扩展数据,详细说明如下: 参数 说明 [in] BSTR val 字符串值 szAppName 扩展数据名称 ...

  4. 二维码之zxing仿新浪微博二维码

    在前言中最后部分,提到了二维码开发工具资源ZXing.网上有它最新1.7版的源码,感兴趣的可以下载下来看看,要打包生成core比较麻烦,网上有相关教程.嫌麻烦的朋友,可以去我的资源里下载Java版的c ...

  5. 微信小程序中自定义modal

    微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...

  6. 时间戳显示格式为几天前、几分钟前、几秒前---vue过滤器

    //时间显示问题(几天前.几分钟前)Vue.filter('fomatTime', function (valueTime) { if(valueTime){ var newData = Date.p ...

  7. BZOJ4318: OSU! (概率DP)

    题意:一个串 给出每个字符为1的可能性 否则为0 一段连续的1能获得长度的立方的收益 问总收益的期望 题解:设x_i为到第i位时连续的1的期望长度 由i-1递推来的贡献 如果这一位是0没有贡献 如果是 ...

  8. Linux C下变量和常量的存储的本质

    源代码 #cat main.c #include <stdio.h> int i = 100; int main(void) { func(); return 0; } #cat func ...

  9. 解决mysql时区问题以及SSL问题

    看了下网上的教程,觉得都太麻烦啦,这里推荐个简单的! 解决时区问题 只需要加上serverTimezone=UTC即可,如下: spring.datasource.url=jdbc:mysql://1 ...

  10. 【Mysql数据库】学习笔记

    一.数据库的创建 create database database_name  DEFAULT CHARACTER SET utf8; //创建一个数据库 drop database database ...