HTML CSS 基础复习笔记 - 列表使用
用于自己复习
自定义列表
示例代码
<!DOCTYPE html>
<html>
<head><title>Definition List Example</title>
</head>
<body><h1>古诗</h1><dl><dt>静夜思</dt><dd>床前明月光,疑是地上霜。举头望明月,低头思故乡。</dd><dt>草</dt><dd>离离原上草,一岁一枯荣。野火烧不尽,春风吹又生。</dd><dt>春晓</dt><dd>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。</dd></dl>
</body>
</html>
效果:
代码简要说明
dl代表的是 Definition List,表示自定义列表
dt代表是Definition Term,表示定义(术语)标题
dd代表是Definition Description,表示定义描述
有序列表
示例代码
<!DOCTYPE html>
<html>
<head><title>Definition List Example</title><style>ol {list-style-type: decimal;list-style-position: inside;/* list-style-image: url(dove.png); */}</style>
</head>
<body><h1>古诗</h1><ol start="2" reversed type="1"><li>静夜思 - 床前明月光,疑是地上霜。举头望明月,低头思故乡。</li><li>草 - 离离原上草,一岁一枯荣。野火烧不尽,春风吹又生。</li><li value="21">春晓 - 春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。</li><li>登鹳雀楼 - 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。</li><li>江雪 - 千山鸟飞绝,万径人踪灭。孤舟蓑笠翁,独钓寒江雪。</li></ol>˙
</body>
</html>
效果
代码简要说明
ol代表order list,有序列表
li代表 list item,即每一个项
其中:ol拥有属性 start是指序号起始值,reversed是序号反转,type是指序号类型,与style中的style作用基本一致,均指序号类型,可选值为 - 1、A、a、I、i
li中的value属性,特指该项的序号为21,后面以此为起始值
样式属性中
list-style-type: decimal; 代表使用数字类型
可选值 - decimal、decimal-leading-zero、lower-roman、upper-roman、lower-alpha、upper-alpha、lower-greek、upper-latin、lower-latin、none
list-style-position: inside (或是 outside); 代表项目符号是出现在列表项内、外
无序列表
示例代码
<!DOCTYPE html>
<html>
<head><title>Definition List Example</title><style>ul {list-style-type: square;list-style-position: inside;list-style-image: url(item.jpg);}</style>
</head>
<body><h1>古诗</h1><ul><li>静夜思 - 床前明月光,疑是地上霜。举头望明月,低头思故乡。</li><li>草 - 离离原上草,一岁一枯荣。野火烧不尽,春风吹又生。</li><li>春晓 - 春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。</li><li>登鹳雀楼 - 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。</li><li>江雪 - 千山鸟飞绝,万径人踪灭。孤舟蓑笠翁,独钓寒江雪。</li></ul>˙
</body>
</html>
效果
代码简要说明
ul指的是unorder list 即无序列表,没有上述ul拥有的属性,同样,li也不具备value属性。
样式属性中
list-style-type: square; 代表项目符号使用方形
可选值 - disc、circle、square、none
list-style-position: outside / inside;
list-style-image: url(item.jpg); 代表使用图片作为项目符号
相关文章:
HTML CSS 基础复习笔记 - 列表使用
用于自己复习 自定义列表 示例代码 <!DOCTYPE html> <html> <head><title>Definition List Example</title> </head> <body><h1>古诗</h1><dl><dt>静夜思</dt><dd>床前明月光,疑…...
017-GeoGebra基础篇-微积分函数求解圆弧面积问题
基础篇慢慢的走进尾声,今天给大家带来一个小项目,是关于高中数学微积分部分的展示,这个项目主要包含了函数的介绍、函数与图形绘制的区别、区域函数图像的绘制、积分函数的应用、动态文本的调用、嵌套滑动条的应用等等,以及其他常…...
Element中的选择器组件Select (一级选择组件el-select)
简述:在 Element UI 中,ElSelect(或简称为 Select)是一个非常常用的选择器组件,它提供了丰富的功能来帮助用户从一组预定义的选项中选择一个或多个值。这里来简单记录一下 一. 组件和属性配置 <el-selectv-model&q…...
数值分析笔记(五)线性方程组解法
三角分解法 A的杜利特分解公式如下: u 1 j a 1 j ( j 1 , 2 , ⋯ , n ) , l i 1 a i 1 / u 11 ( i 2 , 3 , ⋯ , n ) , u k j a k j − ∑ m 1 k − 1 l b m u m j ⇒ a k j ( j k , k 1 , ⋯ , n ) , l i k ( a i k − ∑ m 1 k − 1 l i n u m k ) /…...
IDEA中Maven的配置
目录 1. 安装maven 2. 配置环境变量 3. IDEA中配置Maven 4. 配置仓库目录 1. 安装maven 官网下载地址:Maven – Download Apache Maven 下载后,将zip压缩包解压到某个目录即可。 2. 配置环境变量 变量名称随意,通常为M2_HOMEÿ…...
成人高考本科何时报名-深职训学校帮您规划学习之路
你有想过继续深造自己的学历吗?也许你已经工作多年,但总觉得学历是一块心病,想要通过成人高考本科来提升自己。不用着急,今天我们来聊一聊成人高考本科的报名时间,以及深职训学校如何帮助你顺利完成报名。 深圳成人高…...
C++ STL 协程(Coroutines)
一:什么是协程(Coroutines): 协程是轻量级线程,可以暂停和恢复执行,协程拥有自己的暂停点状态,协程暂停时,将当前状态保存起来,在恢复执行时会恢复之前保存的状态。 二:例子: #include <coroutine> #include <iostream>void doTheWork() {std::cout <…...
虚拟机下基于海思移植QT(一)——虚拟机下安装QT
0.参考资料 1.海思Hi3516DV300 移植Qt 运行并在HDMI显示器上显示 2.搭建海思3559A-Qt4.8.7Openssl开发环境 1.报错解决 通过下面命令查询 strings /lib/x86_64-linux-gnu/libc.so.6 | grep GLIBC_通过命令行没有解决: sudo apt install libc6-dev libc6参考解决…...
计算机网络部分知识点整理
停止等待协议的窗口尺寸为 1。 √以太网标准是IEEE802.3TCP/IP四层,OSI模型有7层,地址解析协议 ARP 在 OSI 参考七层协议属于数据链路层,在TCP/IP 协议属于网络层,ARP作用:将 IP 地址映射到第二层地址,交换…...
【Qt】Qt概述
目录 一. 什么是Qt 二. Qt的优势 三. Qt的应用场景 四. Qt行业发展方向 一. 什么是Qt Qt是一个跨平台的C图形用户界面应用程序框架,为应用程序开发者提供了建立艺术级图形界面所需的所有功能。 Qt是完全面向对象的,很容易扩展,同时Qt为开发…...
读书笔记-《魔鬼经济学》
这是一本非常有意思的经济学启蒙书,作者探讨了许多问题,并通过数据找到答案。 我们先来看看作者眼中的“魔鬼经济学”是什么,再选一个贴近我们生活的例子进行阐述。 01 魔鬼经济学 中心思想:假如道德代表人类对世界运转方式的期…...
2024.7.7总结
今天是惊心动魄的一天,记录一下吧! 昨天晚上害怕早上闹铃响了听不到,担心有意外出现,错过回家的车票,于是便在晚上设置了3个闹铃,6:50,7:00,7:05然后也关了静音。没想到,早上按照正…...
uniapp做小程序内打开地图展示位置信息
使用场景:项目中需要通过位置信息打开地图查看当前位置信息在地图那个位置,每个酒店有自己的经纬度和详细地址,点击地图按钮打开内置地图如图 方法如下: <view class"dttu" click"openMap(info.locationY,info.…...
leetcode 283.移动零
leetcode 283.移动零 自己刷题并且进行记录一下 题解 c class Solution { public:void moveZeroes(vector<int>& nums) {int count 0;for (int i 0; i < nums.size(); i) {if(nums[i] ! 0) {nums[count] nums[i];if (count !i) {nums[i] 0;}count;}}} };...
Unity | Shader基础知识(第十七集:学习Stencil并做出透视效果)
目录 一、前言 二、了解unity预制的材质 三、什么是Stencil 四、UGUI如何使用Stencil(无代码) 1.Canvas中Image使用Stencil制作透视效果 2.学习Stencil 3.分析透视效果的需求 五、模型如何使用Stencil 1.shader准备 2.渲染顺序 3.Stencil代码语…...
【3D->2D转换(1)】LSS(提升,投放,捕捉)
Lift, Splat, Shoot 这是一个端到端架构,直接从任意数量的摄像头数据提取给定图像场景的鸟瞰图表示。将每个图像分别“提升(lift)”到每个摄像头的视锥(frustum),然后将所有视锥“投放(splat&a…...
MyBatis 框架核心及面试知识要点
1、什么是 MyBatis? MyBatis 是一款优秀的支持自定义 SQL 查询、存储过程和高级映射的持久层框架,消除了 几乎所有的 JDBC 代码和参数的手动设置以及结果集的检索 。 MyBatis 可以使用 XML,或注解进 行配置和映射,MyBatis 通过将参数映射到配置的 SOL,形…...
《linux系统内核设计与实现》-实现最简单的字符设备驱动
开发linux内核驱动需要以下4个步骤: 1 编写hello驱动代码 驱动代码如下 helloDev.c,这是一个最小、最简单的驱动,去掉了其他的不相干代码,尽量让大家能了解驱动本身。 #include <linux/module.h> #include <linux/mod…...
【MotionCap】pycharm 远程在wsl2 ubuntu20.04中root的miniconda3环境
pycharm wsl2 链接到pycharmsbin 都能看到内容,/root 下内容赋予了zhangbin 所有,pycharm还是看不到/root 下内容。sudo 安装了miniconda3 引发了这些问题 由于是在 root 用户安装的miniconda3 所以安装路径在/root/miniconda3 里 这导致了环境也是root用户的,会触发告警 WA…...
[BJDCTF 2nd]简单注入
sqlsqlsqlsqlsql又来喽 过滤了单双引号,等于符号,还有select等,但是这里没有二次注入 。扫描发现hint.txt 看出题人的意思是,得到密码即可获得flag。 select * from users where username$_POST["username"] and passw…...
java项目的一些功能(完善登录功能、注册接口参数校验、完善分页查询、完善日期格式、更新文章分类和添加文章分类的分组校验、自定义校验、文件上传 )
目录 完善登录功能 注册接口参数校验 完善分页查询 完善日期格式 更新文章分类和添加文章分类的分组校验 编辑 自定义校验 文件上传 完善登录功能 对前端传过来的明文密码进行md5加密处理 password DigestUtils.md5DigestAsHex(password.getBytes()); 这样既可 注…...
Mac安装AndroidStudio连接手机 客户端测试
参考文档:https://www.cnblogs.com/andy0816/p/17097760.html 环境依赖 需要java 1.8 java安装 略 下载Android Studio 地址 下载 Android Studio 和应用工具 - Android 开发者 | Android Developers 本机对应的包进行下载 安装过程 https://www.cnblogs.c…...
Git 完整的提交规范教程
约定式提交规范 本文中的关键词 “必须(MUST)”、“禁止(MUST NOT)”、“必要(REQUIRED)”、“应当(SHALL)”、“不应当(SHALL NOT)”、“应该(S…...
【TB作品】51单片机 Proteus仿真 00001仿真实物PID电机调速系统
实验报告:Proteus 仿真 PID 电机调速系统 一、实验背景 PID(比例-积分-微分)控制器广泛应用于工业控制系统中,用于调节各种物理变量。本实验的目的是通过 Proteus 仿真软件设计并实现一个 PID 电机调速系统,以控制直…...
【LInux】从动态库的加载深入理解页表机制
💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄🍝 🍛 🍤 📃个人主页 :阿然成长日记 …...
IDEA与通义灵码的智能编程之旅
1 概述 本文主要介绍在IDEA中如何安装和使用通义灵码来助力软件编程,从而提高编程效率,创造更大的个人同企业价值。 2 安装通义灵码 2.1 打开IDEA插件市场 点击IDEA的设置按钮,下拉选择Plugins,如下: 2.2 搜索通义灵码 在搜索框中输入“通义灵码”,如下: 2.3 安…...
多表查询sql
概述:项目开发中,在进行数据库表结构设计时,会根据业务需求及业务模块之间的关系,分析并设计表结构,由于业务之间相互关联,所以各个表结构之间也存在着各种联系,分为三种: 一对多多对多一对一 一、多表关系 一对多 案例:部门与…...
移动端UI风格营造舒适氛围
移动端UI风格营造舒适氛围...
摸鱼大数据——Spark SQL——DataFrame详解一
1.DataFrame基本介绍 DataFrame表示的是一个二维的表。二维表,必然存在行、列等表结构描述信息表结构描述信息(元数据Schema): StructType对象字段: StructField对象,可以描述字段名称、字段数据类型、是否可以为空行: Row对象列: Column对象ÿ…...
【Java探索之旅】初识多态_概念_实现条件
文章目录 📑前言一、多态1.1 概念1.2 多态的实现条件 🌤️全篇总结 📑前言 多态作为面向对象编程中的重要概念,为我们提供了一种灵活而强大的编程方式。通过多态,同一种操作可以应用于不同的对象,并根据对象…...
[Day 26] 區塊鏈與人工智能的聯動應用:理論、技術與實踐
數據科學與AI的整合應用 數據科學(Data Science)和人工智能(AI)在現代技術世界中扮演著至關重要的角色。兩者的整合應用能夠為企業和研究人員提供強大的工具,以更好地理解、預測和解決各種複雜的問題。本文將深入探討…...
算法 —— 滑动窗口
目录 长度最小的子数组 无重复字符的最长子串 最大连续1的个数 将x减到0的最小操作数 找到字符串中所有字母异位词 最小覆盖子串 长度最小的子数组 sum比target小就进窗口,sum比target大就出窗口,由于数组是正数,所以相加会使sum变大&…...
【设计模式】工厂模式(定义 | 特点 | Demo入门讲解)
文章目录 定义简单工厂模式案例 | 代码Phone顶层接口设计Meizu品牌类Xiaomi品牌类PhoneFactory工厂类Customer 消费者类 工厂方法模式案例 | 代码PhoneFactory工厂类 Java高级特性---工厂模式与反射的高阶玩法方案:反射工厂模式 总结 其实工厂模式就是用一个代理类帮…...
Linux之计划和日志
计划任务 计划任务概念解析 在Linux操作系统中,除了用户即时执行的命令操作以外,还可以配置在指定的时间、指定的日期执行预先计划好的系统管理任务(如定期备份、定期采集监测数据)。通过安装at和crontabs这两个系统服务实现一次性、周期性计划任务的功能,并分别通过at、…...
C++ 多态篇
文章目录 1. 多态的概念和实现1.1 概念1.2 实现1.2.1 协变1.2.2 析构函数1.2.3 子类虚函数不加virtual 2. C11 final和override3.1 final3.2 override 3. 函数重载、重写与隐藏4. 多态的原理5. 抽象类6.单继承和多继承的虚表6.1 单继承6.2 多继承 7. 菱形继承的虚表(了解)7.1 菱…...
【LVGL-SquareLine Studio】
LVGL-SquareLine Studio ■ SquareLine Studio-官网下载地址■ SquareLine Studio-参考博客■ SquareLine Studio-安装■ SquareLine Studio-汉化■ SquareLine Studio-■ SquareLine Studio-■ SquareLine Studio-■ SquareLine Studio-■ SquareLine Studio- ■ SquareLine S…...
mysqli 与mysql 区别和联系, 举例说明
mysqli是一种PHP的扩展,用于与MySQL数据库进行交互。它提供了一套面向对象的接口,可以更方便地操作数据库。MySQL是一种关系型数据库管理系统,用于存储和管理数据。 区别: mysqli是MySQL的扩展,而不是单独的数据库管…...
【SpringCloud应用框架】Nacos安装和服务提供者注册
第二章 Spring Cloud Alibaba Nacos之Nacos安装和服务提供者注册 文章目录 Nacos介绍为何使用Nacos?一、Nacos下载和安装1. 下载2. 安装Linux/Unix/MacWindows 二、Nacos服务提供者注册1. Nacos代替Eureka2. Nacos服务注册中心3. 引入Nacos Discovery进行服务注册/发…...
英语学习交流小程序的设计
管理员账户功能包括:系统首页,个人中心,用户管理,每日打卡管理,备忘录管理,学习计划管理,学习资源管理,论坛交流 微信端账号功能包括:系统首页,学习资源&…...
实现Java多线程中的线程间通信
实现Java多线程中的线程间通信 大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 1. 线程间通信的基本概念 在线程编程中,线程间通信是指多个线程之间通过共享内存或消息传递的方式进行交…...
C++模板元编程(一)——可变参数模板
这个系列主要记录C模板元编程的常用语法 文章目录 引言语法应用函数模板可变参数的打印可变参数的最小/最大函数 类模板 参考文献 引言 在C11之前,函数模板和类模板只支持含有固定数量的模板参数。C11增强了模板功能,允许模板定义中包含任意个(包括0个)…...
kafka中
Kafka RocketMQ概述 RabbitMQ概述 ActiveMQ概述 ZeroMQ概述 MQ对比选型 适用场景-从公司基础建设力量角度出发 适用场景-从业务场景出发 Kafka配置介绍 运行Kafka 安装ELAK 配置EFAK EFAK界面 KAFKA常用术语 Kafka常用指令 Kafka中消息读取 单播消息 group.id 相同 多播消息 g…...
Android 获取当前电池状态
在 API 级别 23 上获取充电状态 要在 API 级别 23 上获取电池的当前状态,只需使用电池管理器系统服务: BatteryManager batteryManager (BatteryManager) getSystemService(BATTERY_SERVICE); boolean isCharging batteryManager.isCharging();使用 S…...
【JVM 的内存模型】
1. JVM内存模型 下图为JVM内存结构模型: 两种执行方式: 解释执行:JVM是由C语言编写的,其中有C解释器,负责先将Java语言解释翻译为C语言。缺点是经过一次JVM翻译,速度慢一点。JIT执行:JIT编译器…...
【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【17】认证服务01—短信/邮件/异常/MD5
持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【17】认证服务01 环境搭建验证码倒计时短信服务邮件服务验证码短信形式:邮件形式: 异常机制MD5参考 环境搭建 C:\Windows\System32\drivers\etc\hosts 192.168.…...
geom buffer制作
1. auto buffer_geom line_string->buffer(15);//buffer //这个是x和y各扩大段15个单位 auto buffer_geom line_string->buffer(15);//buffer //这个是x和y各扩大段15米 获取buffer坐标 auto boundary buffer_geom->getBoundary(); auto boundary_coords boun…...
微软正在放弃React
最近,微软Edge团队撰写了一篇文章,介绍了微软团队如何努力提升Edge浏览器的性能。但在文中,微软对React提出了批评,并宣布他们将不再在Edge浏览器的开发中使用React。 我将详细解析他们的整篇文章内容,探讨这一决定对…...
U盘非安全退出后的格式化危机与高效恢复策略
在数字化时代,U盘作为数据存储与传输的重要工具,其数据安全备受关注。然而,一个常见的操作失误——U盘没有安全退出便直接拔出,随后再插入时却遭遇“需要格式化”的提示,这不仅让用户措手不及,更可能意味着…...
安卓虚拟位置修改
随着安卓系统的不断更新,确保软件和应用与最新系统版本的兼容性变得日益重要。本文档旨在指导用户如何在安卓14/15系统上使用特定的功能。 2. 系统兼容性更新 2.1 支持安卓14/15:更新了对安卓14/15版本的支持,确保了软件的兼容性。 2.2 路…...
大数据面试题之Presto[Trino](5)
目录 Presto的扩展性如何? Presto如何与Hadoop生态系统集成? Presto是否可以连接到NoSQL数据库? 如何使用Presto查询Kafka中的数据? Presto与Spark SQL相比有何优势和劣势? Presto如何与云服务集成࿱…...