ul 和 ol 标签的相关设置
初学者不喜欢 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 标签的相关设置的更多相关文章
- CTabCtrl控件标签的相关设置
原文链接: http://blog.csdn.net/happyhell/article/details/6012177 1. 获得CTabCtrl标签高度:CRect rc; CTabCtrl *p ...
- 前端 HTML body标签相关内容 常用标签 列表标签 ul,ol,li
列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...
- ol,ul,dl,table标签的基本语法
ol,ul,dl,table标签的基本语法 有序列表: 无序列表: 自定义列表: <ol> <ul> < ...
- html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...
- HTML知识点总结之ul,ol,li标签
HTML列表分为有序列表,无序列表和描述列表.我们常用的是有序列表(ol)与无序列表(ul). 有序列表 <ol>标签就可以定义一个有序列表,之所以称其为有序列表,是因为可以使列表具有排序 ...
- Html ul、dl、ol 标签
Html ul.dl.ol 标签 <html> <body> <!-- ul 标签指定字符断点,左边带一个“·”点--> <ul> <!-- li ...
- boby标签中相关标签
有关字体相关的标签 h1~h6 字体大小 标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题.具有 align属 ...
- html - body标签中相关标签
body标签中相关标签 今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
- 语义化HTML:ul、ol和dl
一.语义化元素 1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in wh ...
随机推荐
- TP手册学习第四内置天
比较标签: eq:等于 heq:恒等于 gt:大于 lt:小于 (前面加上n则为否,如neq表示不等于)使用方法:{gt name="name" value= ...
- mysql数据库表字段使用DESC等关键字报错及解决方法
<!-- desc是MySQL数据库的关键字,作为字段名直接使用会报错 --><sql id="Base_Column"> id,mol,ip,port,n ...
- .NET 异步多线程,Thread,ThreadPool,Task,Parallel,异常处理,线程取消
今天记录一下异步多线程的进阶历史,以及简单的使用方法 主要还是以Task,Parallel为主,毕竟用的比较多的现在就是这些了,再往前去的,除非是老项目,不然真的应该是挺少了,大概有个概念,就当了解一 ...
- ASP.NET Core Web APi获取原始请求内容
前言 我们讲过ASP.NET Core Web APi路由绑定,本节我们来讲讲如何获取客户端请求过来的内容. ASP.NET Core Web APi捕获Request.Body内容 [HttpPos ...
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](九)
前言 童鞋们,大家好 我是专注.NET开发者社区建设的实践者Rector. 首先,为自己间隔了两个星期五再更新本系列文章找个不充分的理由:Rector最近工作,家庭的各种事务所致,希望大家谅解. 本文 ...
- SQL Server判断小数位数
项目中需要写一规则,目的是判断数值的小数位数,可以分为2中情况. 1.直接以小数点为分界点,小数点后的数据表示小数的位数,此种情况比较简单,直接使用CHARINDEX函数就可以搞定 其中CHARIND ...
- iOS-生成二维码图片【附中间带有小图标二维码】(QRCode)
生成二维码图片也是项目中常用到的,二维码的扫描Git上有很多好用的,这里主要说下二维码的生成 1.普通二维码 方法 /** 生成二维码 QRStering:字符串 imageFloat:二维码图片大小 ...
- CentOS7 Nvidia Docker环境
最近在搞tensorflow的一些东西,话说这东西是真的皮,搞不懂.但是环境还是磕磕碰碰的搭起来了 其实本来是没想到用docker的,但是就一台配置较好电的服务器,还要运行公司的其他环境,vmware ...
- dlib下训练自己的物体检测器--手的检测
之前我们在Linux上安装了dlib(http://www.cnblogs.com/take-fetter/p/8318602.html),也成功的完成了之前的人脸检测程序, 今天我们来一起学习怎样使 ...
- 大白话说Java反射:入门、使用、原理
文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java反射:入门.进阶.原理> 反射之中包含了一个「反」字,所以想要解释反射就必须先从「正」开始解释. 一般情况下,我们使用某个类时 ...