CSS列表用于前端的列表排列。

CSS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

list-style-type:设置列表标志类型。

1:无序列表实例

ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
  <p>无序列表实例:</p>

    <ul class="a">
<li>射雕英雄传</li>
<li>笑傲江湖</li>
<li>倚天屠龙记</li>
</ul> <ul class="b">
<li>鹿鼎记</li>
<li>天龙八部</li>
<li>神雕侠侣</li>
</ul>

效果:

2:有序列表实例

ol.c {list-style-type:decimal-leading-zero;}
ol.d {list-style-type:lower-alpha;}
<p>有序列表实例:</p>

   <ol class="c">
<li>射雕英雄传</li>
<li>笑傲江湖</li>
<li>倚天屠龙记</li>
</ol> <ol class="d">
<li>鹿鼎记</li>
<li>天龙八部</li>
<li>神雕侠侣</li> </ol>

效果:

还可以设置为图片,通过  list-style-image

ul.cc{

    list-style-image: url("http://www.w3school.com.cn/i/eg_arrow.gif")

}
<ul class="cc">
<li>三国演义</li>
<li>红楼梦</li>
</ul>

效果:

在前端开发中,就可以通过列表 以上的知识来完成网站中相应的列表模块了。

CSS 列表样式详解的更多相关文章

  1. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  2. css控制UL LI 的样式详解

    用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...

  3. css控制UL LI 的样式详解(推荐)

    代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...

  4. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  5. 此博客使用的CSS样式详解!

    此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...

  6. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  7. [转]CSS vertical-align属性详解 作者:黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  8. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  9. Linux "ls -l"文件列表权限详解

    ls Linux "ls -l"文件列表权限详解 1.使用 ls -l 命令 执行结果如下(/var/log) : drwxr-x--- root adm -- : apache2 ...

随机推荐

  1. javascript飞机大战-----001分析

    1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...

  2. .net配置404错误页面

    如果你的网站出现一堆让人看不懂的报错,那么你就不是一个合格的程序员,也不是一个合格的站长. 下面的方面可以帮助你的网站远离让人头大的页面. 第一步:配置web.config 打开web.config, ...

  3. AngularJS 指令的 Scope (作用域)

    参考:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的 ...

  4. K-均值聚类(K-means)算法

    https://www.cnblogs.com/ybjourney/p/4714870.html 最近在看<机器学习实战>这本书,因为自己本身很想深入的了解机器学习算法,加之想学pytho ...

  5. 使用Navicat连接Mysql报错:can not get hostname for your address

    以管理员的身份使用cmd命令运行netsh winsock reset即可!

  6. go-004-数据结构

    在 Go 编程语言中,数据类型用于声明函数和变量. 数据类型的出现是为了把数据分成所需内存大小不同的数据,编程的时候需要用大数据的时候才需要申请大内存,就可以充分利用内存. Go 语言按类别有以下几种 ...

  7. 关于RxJava背压

    http://flyou.ren/2017/04/05/%E5%85%B3%E4%BA%8ERxJava%E8%83%8C%E5%8E%8B/?utm_source=tuicool&utm_m ...

  8. CentOS 7 开放端口

    因为CentOS升级到7之后,发现无法使用iptables控制Linuxs的端口,因为CentOS 7使用firewalld代替了原来的iptables.下面记录如何使用firewalld开放Linu ...

  9. Mybatis入门和简单Demo

    一.Mybatis的诞生 回顾下传统的数据库开发,JDBC和Hibernate是使用最普遍的技术,但这两种ORM框架都存在一定的局限性: JDBC:最原生的技术,简单易学,执行速度快,效率高,适合大数 ...

  10. 关于Oracle误操作--数据被Commit后的数据回退恢复(闪回)

    今天操作Oracle数据库时,做一个Update数据时,不小心少写了个where,看这粗心大意的. 于是乎,把所有的员工工号都给更新成一个同一个工号了.这是一个悲催的故事. 因为工号是Check了好多 ...