列表就相当于去超市购物时的那个购物清单,
在HTML也可以创建列表,在网页中一共有三种列表:
1.无序列表
2.有序列表
3.定义列表

无序列表

- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项,
一个li就是一个列表项

通过type属性可以修改无序列表的项目符号
可选值:
disc,默认值,实心的圆点
square,实心的方块
circle,空心的圆

注意:默认的项目符号我们一般都不使用!!
如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置

ul和li都是块元素

有序列表

有序列表和无序列表类似,只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性,可以指定序号的类型
可选值:

1,默认值,使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
ol也是块元素

列表之间都是可以互相嵌套,可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<!--
作者:1213854220@qq.com
时间:2017-04-10
描述:无序列表
-->
<ul type="circle">
<li>今夕何夕兮,搴舟中流。</li>
</ul>
<ul type="disc">
<li>今日何日兮,得与王子同舟。</li>
</ul>
<ul type="square">
<li>蒙羞被好兮,不訾诟耻。</li>
</ul>
<!--
作者:1213854220@qq.com
时间:2017-04-10
描述:有序列表
-->
<ol type="">
<li>今夕何夕兮,搴舟中流。</li>
<li>今夕何夕兮,搴舟中流。</li>
</ol>
<ol type="a">
<li>今日何日兮,得与王子同舟。</li>
<li>今日何日兮,得与王子同舟。</li>
</ol>
<ol type="A">
<li>蒙羞被好兮,不訾诟耻。</li>
<li>蒙羞被好兮,不訾诟耻。</li>
</ol>
<ol type="i">
<li>心几烦而不绝兮,得知王子</li>
<li>心几烦而不绝兮,得知王子</li>
</ol>
<ol type="i">
<li>山有木兮木有枝,心悦君兮君不知。</li>
<li>山有木兮木有枝,心悦君兮君不知。</li>
</ol>
<!--
作者:1213854220@qq.com
时间:2017-04-10
描述:无序嵌套有序
-->
<ul type="circle">
<li>
<ol>
<li type="">今夕何夕兮</li>
<li>搴舟中流。</li>
</ol>
<li>今夕何夕兮,搴舟中流。</li>
</ul> <ol type="A">
<li>
<ul>
<li>今夕何夕兮</li>
<li>搴舟中流。</li>
</ul>
<li>今夕何夕兮,搴舟中流。</li>
</ol>
</body> </html>

结果:

前端学习 -- Css -- 有序列表和无序列表的更多相关文章

  1. 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  2. 9月11日上午HTML有序列表、无序列表、网页的格式和布局

    样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...

  3. 有序列表和无序列表、流、格式布局:position

    列表方块: 有序列表和无序列表 ol/ul 例如<ol: style:"list-style:""  "> 1.<ol: style:&quo ...

  4. Python中将字典转换为有序列表、无序列表的方法

    说明:列表不可以转换为字典 1.转换后的列表为无序列表 a = {'a' : 1, 'b': 2, 'c' : 3} #字典中的key转换为列表 key_value = list(a.keys()) ...

  5. Markdown中有序列表和无序列表

    最近有用户问我,在简书写 Markdown, 一条有序列表 item 之后接一条无序列表 item,为什么 parse 的结果,第二个 item 依旧是作为有序列表的第二项显示,带有有序列表的列表符号 ...

  6. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  7. 前端学习 -- Css -- 定义列表

    定义列表用来对一些词汇或内容进行定义 使用dl来创建一个定义列表 dl中有两个子标签 dt : 被定义的内容 dd : 对定义内容的描述 同样dl和ul和ol之间都可以互相嵌套 <!DOCTYP ...

  8. html有序列表和无序列表

    css控制UL LI 的样式详解(推荐) CSS: 代码如下: #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} 代码如 ...

  9. 前端学习——css实用技术

    一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...

随机推荐

  1. excel的宏与VBA入门(二)——数据类型与变量

    一.属性与方法 1.属性 上面单击对象,下面即显示对应的属性: 2.方法 双击左上的对象,即可看到相应的方法: 二.数据类型 到 Boolean True 或 False , 到 , ,,, 到 ,, ...

  2. Python3入门(二)——Python开发工具Pycharm安装与配置

    一.概述 与IDEA同一家——Jetbrains出品的IDE,强大之处不再赘述 二.安装 点击下载一个合适的版本 参考网友的激活方式激活:https://blog.csdn.net/u01404481 ...

  3. ubuntu安装微信客户端

    安装linux微信: apt-get install git git clone https://github.com/geeeeeeeeek/electronic-wechat.git cd ele ...

  4. GATT scan的流程

    BLE scan 在bluedroid的实现中,有两个接口:一个是discovery,一个是ble observe,这两者有什么区别呢? 这里追了一下代码发现,inquiry 是上层调用search ...

  5. TensorFlow训练MNIST数据集(1) —— softmax 单层神经网络

    1.MNIST数据集简介 首先通过下面两行代码获取到TensorFlow内置的MNIST数据集: from tensorflow.examples.tutorials.mnist import inp ...

  6. linux下SpringBoot Jar包自启脚本配置

    今天整理服务器上SpringBoot项目发现是自启的,于是想看看实现.翻看离职同事的交接文档发现一个***.service文件内容如下 [Unit] Description=sgfront After ...

  7. 【Unity Shader】(三) ------ 光照模型原理及漫反射和高光反射的实现

    [Unity Shader](三) ---------------- 光照模型原理及漫反射和高光反射的实现 [Unity Shader](四) ------ 纹理之法线纹理.单张纹理及遮罩纹理的实现 ...

  8. Unity特殊路径

    Resources: Resources文件可以在根目录下,也可以在子目录下,只要叫Resources就好.Resources目录下所有资源将被打包进游戏存放资源的archive中,Resources ...

  9. 广州区块链系统or积分联盟

    区块链技术开发至今已有十年,从概念的现世到如今初步应用,区块链开发公司在各个领域开始发光发热,很多人都想参与其中,通过区块链开发实现企业转型来适应未来市场,也有一些初创者希望借此实现创业意图,但在诸多 ...

  10. docker 安装 kali

    1.安装 docker pull kalilinux/kali-linux-docker 2.运行容器 docker run -t -i kalilinux/kali-linux-docker /bi ...