按照页面属性的不同，页面可以分为首页、专题页。
首页除了基础楼层外，还包括头部焦点区域。头部焦点区域主要存放一些核心的内容和导航功能。包括搜索区、导航区、焦点区。结构如下图：
- 搜索区：可以进行商品搜索定位，一般会放在最上方。一般通用的内容也会放在这个区域，如网站logo，登陆信息等。
- 导航区：主要是类目导航，负责流量分流和引导的作用。
- 焦点区：由于在首屏的正中位置，所以是流量的爆发区。一般会放置大幅的广告和主推商品。
- 楼层：常规商品放置区域，一般按照品类每层包含不同的分类商品。
- 其他：首页考虑到内容较多，一般电商平台都会在PC端增加直通电梯的浮层用于用户直接定位到具体楼层查看商品。而移动端则没有。
需要注意的是由于移动端的手机尺寸原因，同一层一般不会出现多个组件而是采用一层一组件的方式。相比较而言PC端的布局和组合更为复杂一些，内容陈列也更为丰富。首页的结构主要由这四部分组成，不过搭配上也会根据平台情况而已，比如部分移动端在楼层上还会有一些促销区，理论上这也属于楼层，只是形式和内容上有了进一步的延伸。
专题页则更专注于某个维度（如品牌、类目、商家等）的商品聚合。专题页的核心诉求是为了能够加速和提高用户的购买转化率。页面强调爆点和吸引眼球，所以结构更简单。主要分为三个部分：头图、领券区、商品陈列楼层。具体结构如下图：
- 头图区：负责放置专题主题的头图，用来突显主题概念，增加页面氛围。
- 领券区：非必须区域，一般促销专题页会放置领券区域以便刺激消费。
- 楼层：楼层也叫商品陈列展示区，用来陈列不同类型的商品。有时候专题页的商品较多也可以增加导航条用来区分定位到具体楼层，这里就不单独区分导航区域了。
上面章节我们已经讲解了页面的组成元素，接下来我们看下所有的元素的具体内容是什么。
首先我们来看下样式的概念，样式是指把所有段落、间距甚至包括字体设定的内容以一种标准的规则输出出来。在页面加载的时候使用同一的样式规则来排版布局。网页的样式目前主流的是通过DIV CSS的方式完成布局的。具体的语法在这里不做详述，我们主要看下对于布局来说的一些空间定义。如下图：
- 边框：指组件或者区域可以看到的边界，边框可以显示也可以不显示。视觉上的边界就是通过边框来区分的。
- 外边距：组件或区域的边框之外需要保持的空白距离。
- 内边距：组件或区域的边框和元素之间需要保持的空白距离。
- 尺寸（高度、宽度）：指组件或区域中的元素部分所占用的面积，面位为高度X宽度。
- 元素区域:即我们所能盛放内容的区域，所有的图片、文字、链接等内容数据都是在这个区域显示的。
