商城支付向导列表实现实验记录一、实验目标本次实验的核心是掌握HTML列表的嵌套用法实现“商城支付向导”的层级结构页面用列表清晰展示支付方式和网银支付步骤。二、实现过程1. 搭建基础页面先写好HTML的基本结构设置页面标题和字符编码确保页面正常加载。2. 外层无序列表搭建用ul作为外层容器分为“支付方式”和“网银在线支付步骤”两个大模块。3. 嵌套子列表实现◦ 在“支付方式”的li中嵌套了无序列表列出货到付款、财付通、支付宝、网银在线4种方式形成二级层级。◦ 在“网银在线支付步骤”的li中嵌套了有序列表用字母序号A-E列出完整操作流程清晰展示步骤顺序。4. 结构调整通过合理的标签嵌套让不同层级的列表自动缩进还原设计图的排版效果。三、遇到的难点与解决方法1. 列表嵌套层级混乱问题一开始把子列表写在了父li外面导致缩进错误层级不清晰。解决明确规则——子列表必须放在父li标签内部浏览器才能识别层级并自动缩进调整后排版立刻对齐了。2. 有序列表序号样式不符问题网银步骤默认是数字序号而设计图里是字母序号。解决在ol标签中添加typeA属性即可让序号以A、B、C的形式显示完美匹配设计效果。3. 页面排版杂乱问题不同模块之间没有分隔页面显得拥挤。解决在两个模块之间添加了hr水平线标签让模块区分更清晰和示例效果一致。四、实验总结这次实验让我熟练掌握了HTML列表的嵌套逻辑也学会了通过type属性修改有序列表的序号样式理解了列表在信息分类、步骤展示中的实用场景。后续可以尝试给列表添加CSS样式让支付向导页面更美观。HTHTML列表实验学习笔记一、实验目标掌握HTML无序列表、有序列表及嵌套列表的基础用法实现不同层级的列表排版效果。二、实现过程1. 无序列表使用ul标签搭配li实现了水果列表香蕉、苹果、橘子默认生成圆点符号。2. 有序列表使用ol标签搭配li实现了带数字序号的列表爷爷、爸爸、孙子自动生成编号。3. 嵌套列表将有序列表嵌入无序列表的li标签内实现“章节小节”的层级结构完成第1章、第2章的目录排版。三、遇到的问题与解决1. 嵌套列表层级混乱一开始子列表没有缩进调整后将子列表写在父li内实现了正确的层级缩进。2. 图片无法显示页面中图片位置显示异常检查后发现是本地路径问题需确保图片文件与HTML文件在同一目录使用相对路径引用。四、总结通过本次实验我熟练掌握了HTML列表的基本语法与嵌套逻辑理解了列表在信息分类、目录排版中的应用。后续可以尝试为列表添加CSS样式让排版更美观。ML列表与图片实验记录HTML表格实验笔记一、实验目的掌握HTML基础表格创建与单元格合并用法。二、实现过程1. 基础表格用tabletrth/td制作师生人数统计表添加边框、居中样式。2. 合并单元格用colspan/rowspan实现跨列、跨行合并完成自定义表格布局。三、遇到的问题与解决1. 数据错位检查每行单元格数量一致用border-collapse: collapse合并边框。2. 合并后变形按需求删除被合并单元格分步添加合并属性。3. 标签错误严格按table→tr→th/td结构编写同步闭合标签。四、总结学会了基础表格搭建和单元格合并理解了表格布局的核心逻辑后续可以学习CSS美化表格。