HTML&CSS基础-无序列表和有序列表

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>无序列表和有序列表</title>

        <style type="text/css">

            /**

             *     去掉项目符号

             */

    /*        ul{

                list-style:none;

            }*/

        </style>

    </head>

    <body>

        <!--

            列表就相当于去超时购物时的那个购物清单，在HTML也可以创建列表，在网页中一共有三种列表：

                1>.无序列表

                2>.有序列表

                3>.定义列表

        -->

        <!--

            无序列表:

                使用ul标签开来创建一个无序列表

                使用li标签在ul标签中创建一个一个的列表项,每一个li标签的内容就是一共列表项

            通过type属性可以修改无序列表的项目符号，有以下可选值:

                disc:

                    默认值，实心的圆点

                square:

                    实心的方块

                circke：

                    空心的圆

            温馨提示:

                默认的项目符号我们一般都不使用，都会手动用css去掉默认的项目符号，因为默认的项目符号在Google，Mozilla Firefox，IE实现的大小标准均不统一。

                如果需要设置项目符号，则可以采用为li设置图片背景的方式来设置。

            ul和li都是块元素

        -->

        <ul>

            <li><<西游记>></li>

            <li><<三国演义>></li>

            <li><<水浒传>></li>

            <li><<红楼梦>></li>

        </ul>

        <!--

            有序列表和无序列表类似，只不过他使用ol标签来代替ul

            有序列表使用有序的序号作为项目符号

            通过type属性值,可以指定序号的类型，有以下可选值:

                1:

                    默认值，使用阿拉伯数字

                a/A:

                    采用小写或大写字母作为序号

                i/I:

                    采用小写或大写字母的罗马数字作为需要

            ol也是块元素。

        -->

        <ol type="I">

            <li><<西游记>></li>

            <li><<三国演义>></li>

            <li><<水浒传>></li>

            <li><<红楼梦>></li>

        </ol>

        <!--

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

        -->

        <p>菜单</p>

        <ul>

            <li>

                鱼香肉丝

                <ol>

                    <li>鱼</li>

                    <li>香</li>

                    <li>肉丝</li>

                </ol>

            </li>

            <li>

                宫保鸡丁

                <ul>

                    <li>宫保</li>

                    <li>鸡丁</li>

                </ul>

            </li>

            <li>青椒肉丝</li>

        </ul>

    </body>

</html>

二.浏览器打开以上代码渲染结果

python自动化运维之路~DAY4的更多相关文章

  1. 【Python自动化运维之路Day4】

    abs()  取绝对值all()  所有为真,则为真,否则为假any()  至少有一个为真,就为真,否则为假callable()   判断函数是否可以被调用,如果可以返回True,否则返回False ...

  2. python自动化运维之路~DAY5

    python自动化运维之路~DAY5 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块的分类 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数 ...

  3. 《Python自动化运维之路》 业务服务监控(二)

    文件内容差异对比方法 使用diffie模块实现文件内容差异对比.dmib作为 Python的标准库模块,无需安装,作用是对比文本之间的差异,且支持输出可读性比较强的HTML文档,与 Linux下的di ...

  4. Python自动化运维之路-01

    python的主要应用 python的擅长领域 学python有没有前途?python的语言排名 语言选择 运维会了开发后可以干什么? python的最大优势就是什么都能做. 课程概述 毕业目标 周五 ...

  5. 【Python自动化运维之路Day9】Socket

    socket也可以认为是套接字是一种源IP地址和目的IP地址以及源端口号和目的端口号的组合.网络化的应用程序在开始任何通讯之前都必须要创建套接字.就像电话的插口一样,没有它就没办法通讯. socket ...

  6. 【Python自动化运维之路Day7】

    1. configparser模块 import configparser config = configparser.ConfigParser() #先把config应用一下configparser ...

  7. 【Python自动化运维之路Day6】

    1.递归思考题,阶乘 使用递归方式(函数)计算: 1*2*3*4*5*6*7*8*9*10的值 def func(num): if num==1: return 1 return num*func(n ...

  8. 【Python自动化运维之路Day2】

    1. 常量命名规则 在Python中,会在变量命名上标明某变量是常量,通常采用全是大写的方式来标明,如: CONNECT= '127.0.0.1' PORT = ' 2.Python编译 python ...

  9. 《Python自动化运维之路》 系统基础信息模块(一)

    系统性能收集模块Psutil 目录: 系统性能信息模块psutil 系统性能信息模块psutil psutil能够轻松实现获取系统运行的进程和系统利用率包括(CPU,内存,磁盘 和网络)等.主要用于系 ...

随机推荐

  1. 申港集中运营平台Linux测试环境架构搭建

    架构图 服务一览 ESB安装 ESB全称为Enterprise Service Bus,即企业服务总线.ESB提供了网络中最基本的连接中枢,是构筑企业神经系统的必要元素.ESB的出现改变了传统的软件架 ...

  2. laravel orm 中的一对多关系 hasMany

    个人对于laravel orm 中对于一对多关系的理解 文章表 article,文章自然可以评论,表 comment 记录文章的评论,文章和评论的关系就是一对多,一篇文章可以有多个评论. 在 comm ...

  3. SLAM中的变换（旋转与位移）表示方法

    1.旋转矩阵 注:旋转矩阵标题下涉及到的SLAM均不包含位移. 根据同一点P在不同坐标系下e(e1,e2,e3)e'(e1',e2',e3')的坐标a(a1,a2,a3)a'(a1',a2',a3') ...

  4. 软件工程_7th weeks

    内聚和耦合(学习笔记) 一.内聚 内聚是一个模块内部各成分之间相关联程度的度量.把内聚按紧密程度从低到高排列次序为: 1.偶然内聚:指一个模块内各成分为完成一组功能而组合在一起,它们相互之间即使有关系 ...

  5. python 协程库gevent学习--源码学习(一)

    总算还是要来梳理一下这几天深入研究之后学习到的东西了. 这几天一直在看以前跟jd对接的项目写的那个gevent代码.为了查错,基本上深入浅出了一次gevent几个重要部件的实现和其工作的原理. 这里用 ...

  6. jquery 選擇器

    jquery 選擇器有: 元素選擇器: $("p")選擇所有<p> $("p.intro")選擇所有class=“intro”的<p> ...

  7. verilog 数据格式

    基数格式(通常为无符号数)[size]'base value size常量的位数 base数制o:8 b:2 d:10 h:16 https://wenku.baidu.com/view/f63daa ...

  8. 一本通1546【NOIP2011】选择客栈

    1546:NOIP2011 选择客栈 时间限制: 1000 ms         内存限制: 524288 KB 题目描述 丽江河边有 n 家很有特色的客栈,客栈按照其位置顺序从 1 到 n 编号. ...

  9. 自学Zabbix12.4 Zabbix命令-zabbix_sender

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix12.4 Zabbix命令-zabbix_sender 1. zabbix_sen ...

  10. 洛谷 P4074 [WC2013]糖果公园 解题报告

    P4074 [WC2013]糖果公园 糖果公园 树上待修莫队 注意一个思想,dfn序处理链的方法,必须可以根据类似异或的东西,然后根据lca分两种情况讨论 注意细节 Code: #include &l ...