初学者不喜欢 ul 标签的最重要一点莫过于其前面的黑点了，每次写个无序列表其前面总有一个黑点是个很讨厌的事，去掉黑点的话自然是要用到 list-style：none；这条css 属性设置了。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #289c97 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; min-height: 23.0px }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #4f5d66 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

　　ul{list-style：none；}

</style>

</head>

<body>

<ul>

<li>11111</li>

<li>22222</li>

<li>33333</li>

<li>44444</li>

<li>55555</li>

</ul>

</body>

</html>

这样一来，li 标签前面的黑色点就会消失，可是有时候我们需要所有的 li 标签都处于同一行上要怎么做呢？自然是用 display：inline-block；来改变其行块属性了，也有人喜欢用浮动--float：left；但是浮动往往伴随着清浮动，怪麻烦，所以我个人认为还是改变行块属性比较好

关于 ol 标签的设置，默认 ol 标签内的 li 前面是带数字的，然而这个是可以修改的，代码如下：

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #289c97 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; min-height: 23.0px }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #4f5d66 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

</style>

</head>

<body>

<ol>

<li>11111</li>

<li>22222</li>

<li>33333</li>

<li>44444</li>

<li>55555</li>

</ol>

</body>

</html>

如果这样，默认 li 前面是数字123……n，如果我们改变ol 的 type 属性，则可以修改

type 可选的属性值有“1”、“a”、“A”、“i”、“I”，如果 type 为1，那么 li 前面的数字跟默认相同，从1开始的自然数，如果属性值为“a”，那么 li 前面是 abcd……，这里要注意的一点是，当26个英文字母用完后，后面会继续排，如图：

“A”与此相同，至于“i”和“I”则是罗马数字的排序。

ul 和 ol 标签的相关设置的更多相关文章

  1. CTabCtrl控件标签的相关设置

    原文链接: http://blog.csdn.net/happyhell/article/details/6012177 1. 获得CTabCtrl标签高度:CRect rc; CTabCtrl *p ...

  2. 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  3. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

  4. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  5. HTML知识点总结之ul，ol，li标签

    HTML列表分为有序列表,无序列表和描述列表.我们常用的是有序列表(ol)与无序列表(ul). 有序列表 <ol>标签就可以定义一个有序列表,之所以称其为有序列表,是因为可以使列表具有排序 ...

  6. Html ul、dl、ol 标签

    Html ul.dl.ol 标签 <html> <body> <!-- ul 标签指定字符断点,左边带一个“·”点--> <ul> <!-- li ...

  7. boby标签中相关标签

    有关字体相关的标签 h1~h6   字体大小 标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题.具有 align属 ...

  8. html - body标签中相关标签

    body标签中相关标签   今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  9. 语义化HTML：ul、ol和dl

    一.语义化元素   1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in wh ...

随机推荐

  1. MySQL复制相关变量

    server_id是必须设置在master和每个slave上的唯一标识ID,其取值范围 是1~4294967295之间,且同一个复制组之内不能重复 server_uuid:server_uuid会在G ...

  2. 华硕笔记本电脑Win10改Win7设置U盘启动

    华硕笔记本电脑Win10改Win7设置U盘启动 尝试开机按ESC选择前面没有UEFI项的USB启动: 1,在BIOS设置里advanced菜单,把 Lgeacy USB support选择为enabl ...

  3. 如何学习java

    1.打牢基础 千里之行始于足下,只有牢固的基础才能走的更远,现在大公司越来越看中一个人的基础如何,他们看中的是你未来的发展潜力,有足够好的基础素养才能实现更多的可能. 2.多敲多练 说实话,光去看代码 ...

  4. C# Ioc ASP.NET MVC Dependency Injection

    ASP.NET MVC Dependency Injection 同志们,非常快速的Ioc注册接口和注入Mvc Controller,步骤如下: 安装Unity.Mvc NuGet Package 在 ...

  5. SpringMVC和Struts2的比较

    整体的框架机制     1.Struts2的入口是StrutsPrepareAndExecuteFilter,SpringMVC的入口是通过DispatcherServlet实现.     2.Str ...

  6. 单元测试系列：JUnit单元测试规范

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6762032.html Junit测试代 ...

  7. Dell服务器R320在Centos6.5系统上安装MegaCli管理主板集成磁盘阵列卡

    折腾了两天啊,我的神啊,,终于可以安装了 针对Dell服务器的R320版本主板集成的磁盘阵列卡,需要下载MegaCli 8或更新版本 下载链接: http://pan.baidu.com/s/1mgB ...

  8. ConcurrentHashMap、CopyOnWriteArrayList、LinkedHashMap

    HashMap中未进行同步考虑,而Hashtable在每个方法上加上了synchronized,锁住了整个Hash表,一个时刻只能有一个线程操作,其他的线程则只能等待,在并发的环境下,这样的操作导致H ...

  9. 使用VS Code开发asp.net core (下)

    第一部分: https://www.cnblogs.com/cgzl/p/8450179.html 本文是基于Windows10的. Debugging javascript 打开wwwroot/js ...

  10. coredump故障分析

    如果一个程序运行3天后才会出错,这个时候 难道需要我们一直用GDB调试程序3天吗? 这个时候我们就需要使用到core  dump: 1.Core Dump又叫核心转存.当程序在运行过程中发生异常, 这 ...