百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

html开发笔记09- 列表(无序、有序)

myzbx 2025-02-17 13:13 10 浏览

一、列表说明:列表是在页面上有很多列同时存在的信息,分为无序列表和有序列表。

1、无序列表概念:用来放置一些对于顺序无关紧要的内容,例如下面的新闻内容。

2、有序列表概念:有序列表用于存放内容不能错乱的信息,比如下面的阿里云内容。

3、自定义列表:自定义列表用于正文之外的框框栏栏之类的。

二、列表样式:

三、无序列表
  • 标签

    列表标签是用 ul 表示,但是不是单独使用的,需要和 li 标签配合使用,并且列表标签也有属性,用法:

      ,属性有多个值:

      disc :小圆点,默认属性

      circle :小圆圈

      square :实心方块

      none :不要任何符号

      源码:↓

      Title

      • 这是列表a
      • 这是列表b
      • 这是列表c

      四、有序列表:

      1、有序列表使用

        表示,也需要和 li 标签配合使用

        1. 这是列表a
        2. 这是列表b
        3. 这是列表c

        2、有序列表属性:

        有序列表的默认编号是数字编号,例如 1 2 3 4 依次排列,而数字编号也可以改成 a b c d 或 A B C D 这样的编号,

        方法在于属性值,可以从标签中这样写

          代表使用小写字母排序。

          type=" " 可用属性有:

          默认:数字类型排序

          a :小写字母序号

          A :大写字母序号

          I :罗马数字序号

          3、起始属性:start

          起始属性是说你可以自己决定,编号时从哪个序号开始向下排序,并不一定是从 1 开始或a开始

          写法:

            ,这个 start="2" 就是从第几开始向下排序的意思。

            1. 这是列表
            2. 这是列表

            五、自定义列表:dl 、dt 、dd

            自定义列表用于定义一些除了正文之外的列表,比如 页面下面的列表,或者页面某个地方的需要自己定义的样式的列表。

            1、自定义列表标签:

            dl :用于定义列表的范围。

            dt :用于定义列表的标题。

            dd :用于定义列表的小标题。

            2、自定义列表注意事项:

            dt 和 dd 是同级别的标签,不是父子关系!

            3、自定义列表写法:

            线下门店

            小米之家

            服务网点

            授权体验店

    相关推荐

    Django零基础速成指南:快速打造带用户系统的博客平台

    #python##服务器##API##编程##学习#不是所有教程都值得你花时间!这篇实战指南将用5分钟带你解锁Django核心技能,手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...

    iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点

    这款Bootstrap半越狱工具终于更新,离上一次更新已相隔很久,现在推出1.2.9版本,主要为内置两点功能进行更新,也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的,建议你更新。注意!...

    iOS 16.x Bootstrap 1.2.3 发布,支持运行清理工具

    本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的,想体验半越狱的果粉,请继续往下看。--知识点科普--Bootstrap...

    SpringBoot整合工作流引擎Acticiti系统,适用于ERP、OA系统

    今日推荐:SpringBoot整合工作流引擎Acticiti的源码推荐理由:1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...

    SpringCloud自定义Bootstrap配置指南

    在SpringCloud中自定义Bootstrap配置需要以下步骤,以确保在应用启动的早期阶段加载自定义配置:1.添加依赖(针对新版本SpringCloud)从SpringCloud2020...

    Python使用Dash开发网页应用(三)(python网页开发教程)

    PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容,例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用,很大的一个原因是不熟悉...

    Oxygen XML Editor 27.1 中的新功能

    OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中,AIPositronAssistant得到了增强,包括用于...

    【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力

    一、结论写在前面论文提出了Mini-Gemini,一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围,发掘VLM的潜在能力。其核心是补...

    谐云课堂 | 一文详解分布式改造理论与实战

    01微服务与分布式什么是分布式?首先,我们对上图提到的部分关键词进行讲解。单体,是指一个进程完成全部的后端处理;水平拆分,是同一个后端多环境部署,他们都处理相同的内容,使用反向代理来均衡负载,这种也叫...

    基于Abaqus的手动挡换挡机构可靠性仿真

    手动挡,也称手动变速器,英文全称为Manualtransmission,简称MT,即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置,改变传动比,从而达到变速的目的。家用轿车主要采用软轴连接的换挡...

    【pytorch】目标检测:彻底搞懂YOLOv5详解

    YOLOv5是GlennJocher等人研发,它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型,其参数量依次上升,当然了其效果也是越来越好。从2020...

    超实用!50个非常实用的PS快捷键命令大全分享

    今天,给大家介绍50个非常实用的快捷键命令大全,大家伙都是设计师,关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键:正常(Shift+Option+N),正片叠底(Shif...

    Pohtoshop中深藏不露的小技巧(科目一考试技巧记忆口诀看完必过)

    邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧,可以帮助到大家在设计时减少不必要的麻烦,提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美,可以...

    Ganglia监控安装总结(监控安装工作总结)

    一、ganglia简介:Ganglia是一个跨平台可扩展的,高性能计算系统下的分布式监控系统,如集群和网格。它是基于分层设计,它使用广泛的技术,如XML数据代表,便携数据传输,RRDtool用于数据...

    谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能

    AdobeXD的美化栏具有将设计视图美化的功能,它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...