html:(13):ol-li和div作用

使用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>我的第一个列表信息。</li><li>我的第一个列表信息。</li>
</ol>
</body>
</html>

运行结果

认识div在排版中的作用

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：

<div>…</div>

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>div.hot{font-size:13px;float:left;padding-right:6px;border-right:2px solid blue;}div.new{font-size:13px;float:right;}
</style>
<title>div标签</title>
</head>
<body>
<div><div class="hot"><h2>热门课程排行榜</h2><ol><li>前端开发面试心法 </li><li>零基础学习html</li><li>javascript全攻略</li></ol></div><div class="new"><h2>最新课程排行</h2><ol><li>版本管理工具介绍—Git篇 </li><li>Canvas绘图详解</li><li>QQ5.0侧滑菜单</li></ol></div>
</div>
</body>
</html>

运行结果