无序列表:

1. unordered list 以<ul>开头,以</ul>结果.

每个list item 以<li> tag开头.

2. 样式: bullet(小黑圆圈)

Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

<ul style="list-style-type:disc"> 表示bullet,小黑点 •

<ul style="list-style-type:circle">空心圆圈 °

<ul style="list-style-type:square"> 实心方块

<ul style="list-style-type:none"> 无marker

备注: style="list-style-type:none"的语法可以换为 type="none",更简单.但支持的样式也更少.

extras:

CJK区域:

一,二,三: style="list-style-type:cjk-ideographic"或者cjk-decimal

天干:甲乙丙丁: cjk-heavenly-stem

地支:子丑寅卯: cjk-earthly-branch

很多种其他marker:

<li style="list-style-type: disc">disc</li>
<li style="list-style-type: circle">circle</li>
<li style="list-style-type: square">square</li>
<li style="list-style-type: decimal">decimal</li>
<li style="list-style-type: decimal-leading-zero">decimal-leading-zero</li>
<li style="list-style-type: lower-roman">lower-roman</li>
<li style="list-style-type: upper-roman">upper-roman</li>
<li style="list-style-type: lower-greek">lower-greek</li>
<li style="list-style-type: lower-latin">lower-latin</li>
<li style="list-style-type: upper-latin">upper-latin</li>
<li style="list-style-type: armenian">armenian</li>
<li style="list-style-type: georgian">georgian</li>
<li style="list-style-type: lower-alpha">lower-alpha</li>
<li style="list-style-type: upper-alpha">upper-alpha</li>
<li style="list-style-type: none">none</li>
<li style="list-style-type: inherit">inherit</li>
<li style="list-style-image: url('eyes.gif')">list-style-image: url('eyes.gif')</li>

最后一个可以用服务器上的图片作为marker.


3. 语法

<ul>内嵌套<li>,如:

<ul>

  <li>list1</li>

  <li>list2</li>

</ul>

<li>内再嵌套list必须先声明一个ol或者ul标签,如果声明多个,按最后面的.

如:

<ul>

  <li>list1

    <ul>

      <li>list1-1</li>

      <li>list1-2</li>

    </ul>

  </li>

  <li>list2</li>

</ul>

  有序列表

1. ol tag

2. list item marker类型

<ul type="none">同无序列表

type="1" 用数字表示

A/a 大小写字母

I/i 大小写罗马字母


[HTML] HTML Lists的更多相关文章

  1. [LeetCode] Intersection of Two Linked Lists 求两个链表的交点

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  2. [LeetCode] Merge k Sorted Lists 合并k个有序链表

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 这 ...

  3. [LeetCode] Merge Two Sorted Lists 混合插入有序链表

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  4. 21. Merge Two Sorted Lists —— Python

    题目: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...

  5. 【leetcode】Intersection of Two Linked Lists

    题目简述: Write a program to find the node at which the intersection of two singly linked lists begins. ...

  6. [LintCode] Intersection of Two Linked Lists 求两个链表的交点

    Write a program to find the node at which the intersection of two singly linked lists begins. Notice ...

  7. [LintCode] Merge Two Sorted Lists 混合插入有序链表

    Merge two sorted (ascending) linked lists and return it as a new sorted list. The new sorted list sh ...

  8. ubuntu 解决 “E: Problem with MergeList /var/lib/apt/lists/”错误

    这种错误的意思:无法解析或打开软件包的列表或是状态文件. 出现的原因:无法解析或打开软件包列表多数情况是安装的软件与本身系统有一些冲突之类的问题,或者曾在更新软件源或下载软件的时候意外中断造成的. 解 ...

  9. No.023:Merge k Sorted Lists

    问题: Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexit ...

  10. No.021:Merge Two Sorted Lists

    问题: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...

随机推荐

  1. 通过ICE轻松部署WES7镜像

    作者:雷志刚 转自:http://lzg-ad.blog.sohu.com/156323256.html 注:该文转自Happymy,感谢他的技术提供和分享. 本文适合的软件版本:CTP,RC 如果大 ...

  2. servlet转发重定向

    1.request.getRequestDispacther("/test.jsp").forword(request,response);     转发   浏览器URL是一个地 ...

  3. EXT的bug 布局border 和 grid的cellediting

    首先 我要的布局是上下两块,并且高度和按自己的喜欢可调节,所以我采用的是border的布局, 上下两块,都放grid列表,上面一块不可编辑,下面这块可编辑,如图 在编辑第二块的时候会出现这个现象 图一 ...

  4. threw exception [Handler processing failed; nested exception is java.lang.NoClassDefFoundError: com/dyuproject/protostuff/MapSchema$MessageFactory] with root cause

    错误记录 前几天朋友问我一个错误,顺便记录一下,关于redis 工具类,protostuff序列化报错. threw exception [Handler processing failed; nes ...

  5. NuGet Install-Package报错解决Package Manager Console error - PowerShell version 2.0 is not supported. Please upgrade PowerShell to 3.0 or greater and restart Visual Studio.

    问题: Package Manager Console error - PowerShell version 2.0 is not supported. Please upgrade PowerShe ...

  6. SpringMVC整合mybatis基于纯注解配置

    Mybatis整合Spring配置 第一部分:配置Spring框架 配置SpringMVC的步骤 配置流程图 导入包(哪些包,基本包5个,1日志依赖包,2webmvc支持包)SpringMVC配置 & ...

  7. 【Data Structure】-NO.117.DS.1 -【Tree-23树】

    [Data Structure]-NO.117.DS.1 -[Tree-23树] Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total ...

  8. One VS Rest

    简单来说就是分类的类别有多个,不再是二分,比如根据某些特征,什么温度.湿度.空气流动情况来预测天气,天气的label不能说是好天气和坏天气两种,而是分晴天.雨天.阴天,雪天等等,对于决策树或者从计算机 ...

  9. PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法

    PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法 1.电脑需要先安装redis服务端环境,并在安装目录下打开客户端redis ...

  10. Android项目第一天,下载安装Android Studio和“我的第一个安卓项目”

    一.AS的下载我是在AS官方网站进行下载的最新版本,如图所示 二.AS的安装过程 点击你下载的安装包安装即可,傻瓜式一站到底. 到这一步时选择第二个按钮, 随后出现如下界面 这个窗口是提示我们设置代理 ...