使用ol,添加图书销售排行榜

如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。

这类信息展示就可以使用<ol>标签来制作有序列表来展示。

语法:

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

举例:

下面是一个热点课程下载排行榜:

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,如下图所示:

示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<ol>
    <li>Rinpe Chen</li>
    <li>Rinpe Chen</li>
    <li>Rinpe Chen</li>
</ol>

</body>
</html>

ps:

<ol>...</ol> ol是ordered lists的缩写, 表示有序(编号)列表

<ul>...</ul> ul是unordered lists的缩写, 生成无序(没有序号)列表

时间: 2024-08-25 11:14:07

使用ol,添加图书销售排行榜的相关文章

微图书销售小程序--测试心得(个人部分)

我们的团队项目是微图书销售小程序,而我负责的是图书详情,创建订单,订单管理者3个大模块的测试. 其实一开始,在微信web开发者工具上模拟,是没有问题的,但是那时真的心态很年轻,一旦进入真机调试里面就发现很多问题和BUG,接下来上测试表格: 开发小组 开发小组 3班6组 灵魂架构者开发小组 指导老师 周军海 测试文档属性 测试系统名称 微信图书销售小程序 测试人 刘明杰 测试日期 2018-12-24 测试状态 [√]正在测试  [  ]错误修改 测试环境 操作系统 (IOS/ANDROID) 版

网上图书商城项目学习笔记-031图书管理模块介绍及添加图书

一.流程分析 1.图书管理模块介绍 2. 3. 4.添加图书第一步 5.添加图书第二步 二.代码 1.view层 (1)body.jsp 1 <body> 2 <h1 align="center">图书管理</h1> 3 <p align="center"> 4 <a href="<c:url value='/admin/AdminBookServlet?method=addPre'/>&q

测试心得:微图书销售小程序

前言 这个学期差不多也将近结束,经过大半个学期,从项目需求的确认和项目文档的编写,到一步步的设计与实现,现在终于到了测试阶段,但是我们在测试阶段也暴露出了很多bug,但是每一个bug的修复都需要进行回归测试,虽然花时间但是这是必要的工作. 模块说明(我负责的部分) 模块 子模块 模块编号 留言模块 查看留言 13 - 1 发送留言 13 - 2 删除会话 13 - 3 模块 子模块 模块编号 销量和数据分析模块 月销量排行榜 12 - 1 周销量排行榜 12 - 2 总销量排行榜 12 - 3

图书销售管理系统成员分工

可行性研究报告的任务分配 1.引言                                         大佬(20160401084)                   DEDRAGON(20160401094) 2.可行性研究的前提                             大佬(20160402122)                   DEDRAGON(20160401094)                                         

图书销售管理系统概要设计,系统数据结构设计分工

 完成人:千城墨白(20160401095)              无法无天(20160401115)  系统数据结构设计 1.逻辑结构设计要点 2.物理结构设计要点 (1) 系统所用到所有数据均存在服务器端,存于SQL Server服务器中: (2) 系统界面的显示属性,如字体属性,样式等使用CSS统一界面: (3) 系统界面中使用的相关图片需要保存在服务器机器上.3. 数据结构与程序的关系: 数据结构的设计确定了程序设计的主要思想,数据结构中的字段对应于程序设计中的各种参数,便于程序与数

测试心得 --基于微信小图书销售小程序

---恢复内容开始--- 随着上个星期所有的页面以及对应的需求全部完成,我们组便快马加鞭直接进入测试 首先是使用 微信web开发者工具 使用真机测试(终于发现这个工具的好处了),因为是刚刚做完不久,在写页面的时候,每个页面在模拟器上显示的非常的好,然后五个人就非常高兴的认为测试只需要一个小时左右就行,然后刚开始半个小时,心里顿时就哇凉哇凉的,由于我们只在模拟器上面看了效果,一到真机测试的时候就出现了大量的问题:字体大小,图片排版,左滑删除等一系列没有预料到的问题,最有趣的是有些问题是针对不同的手

端午小长假--前端基础学起来01

HTML和CSS的关系 1)HTML是网页上面的文字.图片的载体 2)CSS是样式,文字的字体,颜色,边框 3)JavaScript是特效,弹出淡入 HTML标签 1)<h1></h1>是标题标签,<p></p>是段落标签,<img src="1.jpg">是图片标签 2)网页中每一部分的内容都要放在标签中才能显示 3)标签不分大小写,一般都是小写 HTML文件的结构 <HTML>根标签 < head>

HTML+CSS基础课程笔记(MOOC)陆续添加中...

第1章 HTML 介绍 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>制作我的第一个网页</title> 6 </head> 7 <body> 8 <h1>hello world

回归基础从新认识——HTML+CSS

前言 这段时间工作没那么繁杂,索性就想说来套系统的学习,之前去面试的时候,有被问及些基础的知识,居然回答不上来,也不能说是回答不上吧,回答的不全面.前端群上问了那个机构比较好,选择了慕课网.看了一段时间还是觉得不错的. HTML 语义化标签 1. 更容易被搜索引擎收录. 2. 更容易让屏幕阅读器读出网页内容. 文章常用 <p>,添加段落 <hx>,h1.h2.h3.h4.h5.h6,添加标题 <strong>和<em>,但两者在强调的语气上有区别:<e