温州网站建设方案报价,郑州住房和城乡建设官网,建筑企业上市公司有哪些,做商城网站的使用ol#xff0c;添加图书销售排行榜
如果想在网页中展示有前后顺序的信息列表#xff0c;怎么办呢#xff1f;如#xff0c;当当网上的书籍热卖排行榜#xff0c;如下图所示。这类信息展示就可以使用ol标签来制作有序列表来展示。 语法#xff1a;
ol添加图书销售排行榜
如果想在网页中展示有前后顺序的信息列表怎么办呢如当当网上的书籍热卖排行榜如下图所示。这类信息展示就可以使用ol标签来制作有序列表来展示。 语法
olli信息/lili信息/li......
/ol
举例
下面是一个热点课程下载排行榜
olli前端开发面试心法 /lili零基础学习html/liliJavaScript全攻略/li
/ol
ol在网页中显示的默认样式一般为每项li前都自带一个序号序号默认从1开始如下图所示 !DOCTYPE HTML
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8
title p标签/title
/head
body
olli我的第一个列表信息。/lili我的第一个列表信息。/li
/ol
/body
/html
运行结果 认识div在排版中的作用
在网页制作过程过中可以把一些独立的逻辑部分划分出来放在一个div标签中这个div标签的作用就相当于一个容器。
语法
div…/div
确定逻辑部分
什么是逻辑部分它是页面上相互关联的一组元素。如网页中的独立的栏目版块就是一个典型的逻辑部分。如下图所示图中用红色边框标出的部分就是一个逻辑部分就可以使用div标签作为容器。 !DOCTYPE HTML
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8
stylediv.hot{font-size:13px;float:left;padding-right:6px;border-right:2px solid blue;}div.new{font-size:13px;float:right;}
/style
titlediv标签/title
/head
body
divdiv classhoth2热门课程排行榜/h2olli前端开发面试心法 /lili零基础学习html/lilijavascript全攻略/li/ol/divdiv classnewh2最新课程排行/h2olli版本管理工具介绍—Git篇 /liliCanvas绘图详解/liliQQ5.0侧滑菜单/li/ol/div
/div
/body
/html
运行结果
