10、网页布局学习指南

网页布局学习指南

1. 多页面文件差异分析

在构建多页面网站时，不同文件间存在多处差异。以三个文件为例：
- 第11行：三个文件的差异体现在 div 元素的 id 值上。
- 第13行：每个文件包含的 h1 元素内部文本不同，这些文本将显示在各页面的标题栏。
- 第16行： p 元素内的文本变化用于提示当前所在页面。
- 第17行：影响最大的变化。设置了 a 元素并使其指向其他页面，因包含 data - role="button" ， a 元素自动呈现为按钮样式。 multi_page1.html 通过此链接到 multi_page2.html ， multi_page2.html 链接到 multi_page3.html ， multi_page3.html 再链接回 multi_page1.html ，形成循环。
- 第20行： h4 元素内的文本根据页面编号更改，页面加载时将显示在页脚栏。

虽然使用多个文件创建网站前期工作和设置较多，但在单页面维护和独立事件触发方面有很大优势。

2. 使用网格对齐内容

jQuery Mobile使用网格系统来帮助内容对齐，这有助于创建跨设备的体验，消除处理