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…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南 在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
Linux 中如何提取压缩文件 ？
Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...
解读《网络安全法》最新修订，把握网络安全新趋势
《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...
计算机基础知识解析：从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域：无处不在的数字助手 2、 计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...
人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent
安全大模型训练计划：基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标：为安全大模型创建高质量、去偏、符合伦理的训练数据集，涵盖安全相关任务（如有害内容检测、隐私保护、道德推理等）。 1.1 数据收集 描…...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...