列表就相当于去超市购物时的那个购物清单，
在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. Django Rest Framework源码剖析(六)-----序列化(serializers)

    一.简介 django rest framework 中的序列化组件,可以说是其核心组件,也是我们平时使用最多的组件,它不仅仅有序列化功能,更提供了数据验证的功能(与django中的form类似). ...

  2. 20155338课程设计个人报告——基于ARM实验箱的Android交友软件的设计与实现

    课程设计个人报告--基于ARM实验箱的Android交友软件的设计与实现 个人贡献 实验环境的搭建 代码调试 在电脑上成功运行 研究程序代码撰写小组报告 一.实验环境 1.Eclipse软件开发环境: ...

  3. mysql安装版多次安装导致安装失败的解决方法（windows）（直接使用免安装方法）

    https://www.cnblogs.com/feilongblog/p/mysql_install_init.html 测试成功 要点:mysqld install MySQL --default ...

  4. [CF983D]Arkady and Rectangles[线段树+可删堆/set]

    题意 你有一个无限大的绘图板,开始颜色是\(0\) , 你将进行\(n\) 次绘图,第\(i\) 次绘图会将左下角为 \((x_1, y_1)\),右上角为\((x_2, y_2)\) 的矩形涂成颜色 ...

  5. SpringCloud+Boot简单例子笔记

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

  6. 有关ADO.NET基础中的基础的熟悉过程

    现在对于ADO.NET基础的理解与记忆并不严谨和完善 所以,只写一点关于自己的理解,嗯,一种去转换思维理解的方法吧,算是吧 希望各位前辈或者同学,积极指出其中的错误和偏差 个人对于刚接触的ADO.NE ...

  7. centos 7：network: 正在打开接口 ens33： 错误：激活连接失败：No suitable device found for this connection.

    Mar :: localhost systemd: Starting LSB: Bring up/down networking... Mar :: localhost network: 正在打开环回 ...

  8. svn commit时报错 File already exists

    第一步: 删除当前文件所在文件夹,提交commit 第二步: 新建刚才删除的文件夹,并将先前需要commit的文件放到此文件夹下,再次commit 提交

  9. 智能合约bug以及修改方案

    截取两篇文章:第一遍文章说的是智能合约能不能修改的问题: ETC转到ETH地址以及转币进ETH智能合约账户能不能转出来? 第0章 引言 如果ETC充值到了ETH地址上,能找回来吗?答案是不一定. ET ...

  10. 20135202闫佳歆--week7 可执行程序的装载--学习笔记

    此为个人学习笔记存档 week 7 可执行程序的装载 一.预处理.编译.链接和目标文件的格式 可执行文件的创建--预处理.编译和链接 cd Code vi hello.c gcc -E -o hell ...