列表就相当于去超市购物时的那个购物清单，
在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. 20155308《信息安全系统设计基础 嵌入式C语言课堂考试补博客

    20155308<信息安全系统设计基础 嵌入式C语言课堂考试补博客 知识点 置位 ?bits = bits | (1 << 7) ; /* sets bit 7 */ bits |= ...

  2. 20155311《网络对抗》Web安全基础实践

    20155311<网络对抗>Web安全基础实践 基础问题回答 SQL注入攻击原理,如何防御? 原理:SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL ...

  3. sprintboot 和swagger2整合生成文档

    1.创建springboot 工程 2.引入maven依赖 <dependency> <groupId>io.springfox</groupId> <art ...

  4. PostgreSQL内部结构与源代码研究索引页

    磨砺技术珠矶,践行数据之道,追求卓越价值 luckyjackgao@gmail.com 返回顶级页:PostgreSQL索引页 本页记录所有本人所写的PostgreSQL的内部结构和源代码研究相关文摘 ...

  5. Hadoop日记Day14---MapReduce源代码回顾总结

    一.回顾单词统计源码 package counter; import java.net.URI; import org.apache.hadoop.conf.Configuration; import ...

  6. Hadoop开发第3期---Hadoop的伪分布式安装

    一.准备工作 1. 远程连接工具的安装 PieTTY 是在PuTTY 基础上开发的,改进了Putty 的用户界面,提供了多语种支持.Putty 作为远程连接linux 的工具,支持SSH 和telne ...

  7. python 网络爬虫requests模块

    一.requests模块 requests模块是python中原生的基于网络请求的模块,其主要作用是用来模拟浏览器发起请求.功能强大,用法简洁高效. 1.1 模块介绍及请求过程 requests模块模 ...

  8. L017-linux系统定时任务crond入门小节

    L017-linux系统定时任务crond入门小节 oh my god!how old are you? 怎么老是你?没错,我又来了,哈哈哈,今天是我的生日呢,在这么重要的日子里,必须要更一篇学习小节 ...

  9. Elasticsearch Java Rest Client API 整理总结 (一)——Document API

    目录 引言 概述 High REST Client 起步 兼容性 Java Doc 地址 Maven 配置 依赖 初始化 文档 API Index API GET API Exists API Del ...

  10. Ubuntu侧边任务栏自动隐藏

    设置>>Dock>>{自动隐藏Dock}选项打开