HTML之五分钟带你实现一个清纯校花排行榜
HTML之五分钟带你实现一个清纯校花排行榜
各位小伙伴们大家好，我是萌杰尔，欢迎大家阅读我的网站开发基础系列文章
今天我们讲一讲列表的实现，列表，相信大家已经有个基础的理解了，我们平时碰到的排行榜就是一种列表，那么我们来学习一下吧 (°▽°)八(°▽°)♪
列表又分为有序列表和无序列表
有序列表
有序列表就是带序号的列表
<ol><li>丸子</li><li>xxx</li><li>xxx</li>
</ol>
举个栗子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ol><li>丸子</li><li>xxx</li><li>xxx</li></ol>
</body>
</html>
显示结果如下
- 丸子
- xxx
- xxx
有序列表前面有序号1、2、3、······
我们可以通过给ol标签添加type属性来自定义序号类型
| 值 | 描述 |
|---|---|
| a | 小写英文字母编号 |
| A | 大写英文字母编号 |
| i | 小写罗马数字编号 |
| I | 大写罗马数字编号 |
| 1 | 数字编号（默认） |
通过给ol标签添加reversed属性来规定倒序
| 值 | 描述 |
|---|---|
| reversed | 倒序 |
无序列表
无序列表就是没有序号的列表
<ul><li>丸子</li><li>xxx</li><li>xxx</li>
</ul>
举个栗子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>丸子</li><li>xxx</li><li>xxx</li></ul>
</body>
</html>
显示结果如下
- 丸子
- xxx
- xxx
ul标签同样拥有type属性，但是目前已经废弃，不建议使用，我在这里就不多废话了
好了，各位小伙伴，今天的大有用处的知识到这里就讲完了，你学废了吗
这是我的微信群，欢迎各位大佬加入
HTML之五分钟带你实现一个清纯校花排行榜相关推荐
- 花5分钟用Redis撸一个东京奥运会金牌排行榜
不知道各位最近有没有看东京奥运会啊,昨晚看完是被小日子过得不错的日本人气得不行.好家伙,这届奥运会奥林匹克精神我是没看到,抗日精神硬是给我唤醒了,刚打开了金牌排行榜看了一下,还好暂时还是第一. 虽然说 ...
- 十分钟带你做一个学生管理系统
1.学生管理系统 目录 1.学生管理系统 1.2 学生管理系统实现思路: 1.3 定义学生类 1.4 主界面的代码编写 1.5添加学生代码编写 1.6查看学生代码编写 1.8 删除学生代码编写 1.9 ...
- Python项目实战:爬起7160清纯校花图库
2019独角兽企业重金招聘Python工程师标准>>> 前言 今天为大家介绍一个爬取7160图库,里面有各种各样的美女写真图,利用Python的爬虫技术,大多数用了Beautiful ...
- js一个按钮弹出两个按钮_车内常见按钮，你却一个不认识？一分钟带你认识车内常见按钮...
导读:车内常见按钮,你却一个不认识?一分钟带你认识车内常见按钮 各位点开这篇文章的朋友们,想必都是很高的颜值吧,我们真的是很有缘哦,小编每天都会给大家带来不一样的汽车资讯,如果对小编的文章或者其他的什 ...
- 还在动手画棋盘 ？20分钟带你用Java写一个井字棋！
还在动手画棋盘 ?20分钟带你用Java写一个井字棋! 文章目录 还在动手画棋盘 ?20分钟带你用Java写一个井字棋! 前言 设计过程 1.创建窗体类MyGameWindow 2.创建窗体的构造器 ...
- 5分钟带你读「大清」微积分！160多年前清朝数学家撰写文言文版高等数学
视学算法报道 编辑:小咸鱼 好困 [新智元导读]你有见过160多年前清朝数学家写的微积分书吗?这可能是最难懂的高数教材了,堪称天书!近日,网上流传着一本清朝的微积分课本,其中的所有数学表达式都是 ...
- java编程石头剪刀布图片_石头、剪刀、布！10分钟带你打开深度学习大门，代码已开源...
原标题:石头.剪刀.布!10分钟带你打开深度学习大门,代码已开源 沉沉 发自 宇宙中心 量子位 出品 | 公众号 QbitAI 深度学习技术的不断普及,越来越多的语言可以用来进行深度学习项目的开发,即 ...
- mysql和oracle冲突吗_三分钟带你分清MySQL 和Oracle之间的误区
原标题:三分钟带你分清MySQL 和Oracle之间的误区 来自:华为云开发者社区 摘要:MySQL和Oracle,别再傻傻分不清. MySQL 和Oracle 在开发中的使用是随处可见的,那就简单去 ...
- 干货：五分钟带你看懂NestedScrolling嵌套滑动机制
Android NestedScrolling嵌套滑动机制 Android在发布5.0之后加入了嵌套滑动机制NestedScrolling,为嵌套滑动提供了更方便的处理方案.在此对嵌套滑动机制进行详细 ...
最新文章
- SSH pager-taglib分页的实现
- javaweb:Cookie
- 解决Sublime包管理package control 报错 There are no packages available for installation
- html中本页面路径怎么写,HTML之绝对路径与相对路径
- 回到顶部JavaScript实现
- Java接口和Java抽象类有什么不同
- Spring Boot————简介与Spring时代的承接
- SpringMVC错误：No mapping found for HTTP request with URI [xxxx] in DispatcherServlet
- 被苹果“先捧后杀”的操作系统
- 下标要求数组或指针类型_C语言，数组循环哪家好，指针or下标？
- c语言函数调用及应用举例
- java之上三角矩阵,判断上三角矩阵
- 黑、白盒测试 和 动、静态测试
- 【DeeplabV3+ get_miou_png】DeeplabV3+获取数据集预测结果灰度图
- 千川数据返回值解析（AES）解密
- 嵌入式系统主要应用哪些行业？
- 64位murmurhash 源码
- 遇到.dll文件删不掉怎么办？来这里教你一招删掉。（亲自实用）
- 解析CRM系统如何增强企业核心竞争力？
- 测试你的真实性格软件,测试你最真实的性格