《HTML5+CSS3+JavaScriptWeb前端开发案例教程》课件 第6章 列表与表格--让网站更规整.pptxVIP

列表与表格--让网站更规整

实现限时抢购页面

案例描述一个限时抢购页面中会有一些可以选购的商品，如何设计这些商品的展示效果呢？HTML5中的列表就是一个特别棒的工具。本案例展示限时抢购页面中的商品列表。

技术准备定义列表

定义列表语法格式dldt名词一/dtdd解释1/dddd解释2/dddd解释3/dddt名词二/dtdd解释1/dddd解释2/dddd解释3/dd…/dl

案例实现

制作抽屉风格的滑出菜单特效

案例描述导航菜单如同地图一样，指引用户到各个功能页面去，因此，导航菜单是网站的必备项目。本案例实现一个抽屉风格的滑出菜单特效。

技术准备无序列表

无序列表语法格式ulli第1项/lili第2项/li…/ul

案例实现

2023年度国内手机销量排名

案例描述某些市场调研机构每年都会公布国内手机的销量排名情况，本案例将实现2023年度国内手机销量排名的列表页面。

技术准备有序列表

有序列表语法格式oltype=序号类型li第1项/lili第2项/lili第3项/li…/ol

案例实现

表格设计购物车页面

案例描述本案例实现一个表格设计购物车页面。

技术准备简单表格表格的合并

简单表格语法格式tabletrtd单元格内的文字/tdtd单元格内的文字/td……/trtrtd单元格内的文字/tdtd单元格内的文字/td……/tr……/table

表格的合并语法格式tdcolspan=跨的列数tdrowspan=跨的行数

案例实现

AI辅助编程——有序列表和表格的应用

内容概览使用有序列表模拟QQ联系人列表使用表格设计员工信息表