当前位置： 首页 > news >正文

HTML CSS 基础复习笔记 - 列表使用

news 2025/10/31 22:34:59

用于自己复习

自定义列表

示例代码
<!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>床前明月光&#xff0c;疑…...

编程日记 2024/7/7 15:33:39

017-GeoGebra基础篇-微积分函数求解圆弧面积问题

基础篇慢慢的走进尾声&#xff0c;今天给大家带来一个小项目&#xff0c;是关于高中数学微积分部分的展示&#xff0c;这个项目主要包含了函数的介绍、函数与图形绘制的区别、区域函数图像的绘制、积分函数的应用、动态文本的调用、嵌套滑动条的应用等等&#xff0c;以及其他常…...

编程日记 2024/7/7 15:32:38

Element中的选择器组件Select （一级选择组件el-select）

简述&#xff1a;在 Element UI 中&#xff0c;ElSelect&#xff08;或简称为 Select&#xff09;是一个非常常用的选择器组件&#xff0c;它提供了丰富的功能来帮助用户从一组预定义的选项中选择一个或多个值。这里来简单记录一下 一. 组件和属性配置 <el-selectv-model&q…...

编程日记 2024/7/7 15:31:37

数值分析笔记（五）线性方程组解法

三角分解法 A的杜利特分解公式如下&#xff1a; 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 ) /…...

编程日记 2024/7/7 15:30:36

IDEA中Maven的配置

目录 1. 安装maven 2. 配置环境变量 3. IDEA中配置Maven 4. 配置仓库目录 1. 安装maven 官网下载地址&#xff1a;Maven – Download Apache Maven 下载后&#xff0c;将zip压缩包解压到某个目录即可。 2. 配置环境变量 变量名称随意&#xff0c;通常为M2_HOME&#xff…...

编程日记 2024/7/7 15:27:31

成人高考本科何时报名-深职训学校帮您规划学习之路

你有想过继续深造自己的学历吗&#xff1f;也许你已经工作多年&#xff0c;但总觉得学历是一块心病&#xff0c;想要通过成人高考本科来提升自己。不用着急&#xff0c;今天我们来聊一聊成人高考本科的报名时间&#xff0c;以及深职训学校如何帮助你顺利完成报名。 深圳成人高…...

编程日记 2024/7/7 15:26:30

C++ STL 协程(Coroutines)

一：什么是协程(Coroutines)： 协程是轻量级线程，可以暂停和恢复执行，协程拥有自己的暂停点状态，协程暂停时，将当前状态保存起来，在恢复执行时会恢复之前保存的状态。 二：例子： #include <coroutine> #include <iostream>void doTheWork() {std::cout <…...

编程日记 2024/7/7 15:25:29

虚拟机下基于海思移植QT（一）——虚拟机下安装QT

0.参考资料 1.海思Hi3516DV300 移植Qt 运行并在HDMI显示器上显示 2.搭建海思3559A-Qt4.8.7Openssl开发环境 1.报错解决 通过下面命令查询 strings /lib/x86_64-linux-gnu/libc.so.6 | grep GLIBC_通过命令行没有解决&#xff1a; sudo apt install libc6-dev libc6参考解决…...

编程日记 2024/7/7 15:22:24

计算机网络部分知识点整理

停止等待协议的窗口尺寸为 1。 √以太网标准是IEEE802.3TCP/IP四层&#xff0c;OSI模型有7层&#xff0c;地址解析协议 ARP 在 OSI 参考七层协议属于数据链路层&#xff0c;在TCP/IP 协议属于网络层&#xff0c;ARP作用&#xff1a;将 IP 地址映射到第二层地址&#xff0c;交换…...

编程日记 2024/7/7 15:21:23

【Qt】Qt概述

目录 一. 什么是Qt 二. Qt的优势 三. Qt的应用场景 四. Qt行业发展方向 一. 什么是Qt Qt是一个跨平台的C图形用户界面应用程序框架&#xff0c;为应用程序开发者提供了建立艺术级图形界面所需的所有功能。 Qt是完全面向对象的&#xff0c;很容易扩展&#xff0c;同时Qt为开发…...

编程日记 2024/7/7 15:20:22

读书笔记-《魔鬼经济学》

这是一本非常有意思的经济学启蒙书&#xff0c;作者探讨了许多问题&#xff0c;并通过数据找到答案。 我们先来看看作者眼中的“魔鬼经济学”是什么&#xff0c;再选一个贴近我们生活的例子进行阐述。 01 魔鬼经济学 中心思想&#xff1a;假如道德代表人类对世界运转方式的期…...

编程日记 2024/7/7 15:18:19

2024.7.7总结

今天是惊心动魄的一天&#xff0c;记录一下吧! 昨天晚上害怕早上闹铃响了听不到&#xff0c;担心有意外出现&#xff0c;错过回家的车票&#xff0c;于是便在晚上设置了3个闹铃&#xff0c;6:50&#xff0c;7:00&#xff0c;7:05然后也关了静音。没想到&#xff0c;早上按照正…...

编程日记 2024/7/7 15:14:13

uniapp做小程序内打开地图展示位置信息

使用场景&#xff1a;项目中需要通过位置信息打开地图查看当前位置信息在地图那个位置&#xff0c;每个酒店有自己的经纬度和详细地址&#xff0c;点击地图按钮打开内置地图如图 方法如下&#xff1a; <view class"dttu" click"openMap(info.locationY,info.…...

编程日记 2024/7/7 15:12:11

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;}}} };...

编程日记 2024/7/7 15:11:09

Unity | Shader基础知识(第十七集：学习Stencil并做出透视效果)

目录 一、前言 二、了解unity预制的材质 三、什么是Stencil 四、UGUI如何使用Stencil&#xff08;无代码&#xff09; 1.Canvas中Image使用Stencil制作透视效果 2.学习Stencil 3.分析透视效果的需求 五、模型如何使用Stencil 1.shader准备 2.渲染顺序 3.Stencil代码语…...

编程日记 2024/7/7 15:09:07

【3D-＞2D转换（1）】LSS（提升，投放，捕捉）

Lift, Splat, Shoot 这是一个端到端架构&#xff0c;直接从任意数量的摄像头数据提取给定图像场景的鸟瞰图表示。将每个图像分别“提升&#xff08;lift&#xff09;”到每个摄像头的视锥&#xff08;frustum&#xff09;&#xff0c;然后将所有视锥“投放&#xff08;splat&a…...

编程日记 2024/7/7 15:08:03

MyBatis 框架核心及面试知识要点

1、什么是 MyBatis? MyBatis 是一款优秀的支持自定义 SQL 查询、存储过程和高级映射的持久层框架&#xff0c;消除了 几乎所有的 JDBC 代码和参数的手动设置以及结果集的检索 。 MyBatis 可以使用 XML,或注解进 行配置和映射&#xff0c;MyBatis 通过将参数映射到配置的 SOL,形…...

编程日记 2024/7/7 15:07:02

《linux系统内核设计与实现》-实现最简单的字符设备驱动

开发linux内核驱动需要以下4个步骤&#xff1a; 1 编写hello驱动代码 驱动代码如下 helloDev.c&#xff0c;这是一个最小、最简单的驱动&#xff0c;去掉了其他的不相干代码&#xff0c;尽量让大家能了解驱动本身。 #include <linux/module.h> #include <linux/mod…...

编程日记 2024/7/7 15:03:57

【MotionCap】pycharm 远程在wsl2 ubuntu20.04中root的miniconda3环境

pycharm wsl2 链接到pycharmsbin 都能看到内容，/root 下内容赋予了zhangbin 所有，pycharm还是看不到/root 下内容。sudo 安装了miniconda3 引发了这些问题 由于是在 root 用户安装的miniconda3 所以安装路径在/root/miniconda3 里 这导致了环境也是root用户的，会触发告警 WA…...

编程日记 2024/7/7 15:01:55

[BJDCTF 2nd]简单注入

sqlsqlsqlsqlsql又来喽 过滤了单双引号&#xff0c;等于符号&#xff0c;还有select等&#xff0c;但是这里没有二次注入 。扫描发现hint.txt 看出题人的意思是&#xff0c;得到密码即可获得flag。 select * from users where username$_POST["username"] and passw…...

编程日记 2024/7/7 15:00:53

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/10/31 11:15:14

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/10/30 15:53:58

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/10/29 10:32:27

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/10/31 14:35:14

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/10/27 3:03:38

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/8/22 22:34:43

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/10/28 23:16:46

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/10/30 21:32:50

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/10/30 4:32:03