电商网站模块化布局项目总结

发表于

电商网站模块化布局整体规划

因为电商类网站内容较多，更新较快，提倡结构及样式的可复用性，因此我采用模块化布局的思路进行构建。预览

制作过程

HTML结构部分

整体结构主要有五部分，分别是：header、nav、search、content和footer。其中，content部分又分为两部分：main 和 sidebar。其中包含各个可复用section、option以及tab组件。

CSS部分

  1. 初始化样式–reset
  2. 定义公共样式–public
  3. 定义整体布局样式–layout
  4. 定义header部分样式
  5. 定义nav部分样式
  6. 定义search部分样式
  7. 定义content部分样式（其中包含各组件样式）
  8. 定义footer部分样式

javaScript部分

主要包含7个功能：

  1. 切换搜索框功能
    切换搜索栏选项，搜索框内文字随之改变。

  2. update轮播功能
    update内容自动滚动，也可通过上下按钮进行切换。

  3. 选项卡切换功能
    点击或鼠标移入选项卡，切换内容。

  4. 自动播放焦点图片
    自动播放焦点图片，并随之更新描述信息，同时加入鼠标移入暂停播放，移除自动播放功能。

  5. 日历提醒信息
    鼠标移入显示当天活动信息。

  6. BBS高亮显示
    通过改变class实现样式切换。

  7. HOT用户鼠标提示效果
    鼠标移入图片，显示相关用户介绍信息。

详细实现过程可查看源代码。

总结

问题及解决方案

问题1：文字和图片同时存在时，使用line-height与height相等，文字为何没有居中？
原因分析：因为浏览器默认vertical-align属性将图片底部与文字的baseline对齐。
解决方案：第一种：只需将图片的vertical-align属性设置为top或middle即可。第二种：将文字或图片浮动。

问题2：如何用CSS绘制三角形？
分析：主要靠巧妙使用border-color属性中的transparent值
代码如下：

1
2
3
4
5
6
7
.triangle-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #f00;
}

可改变不同的border-width值以及border的方位来呈现不同效果。
另外，也可通过引入字体图标来实现各种icon效果。

问题3：什么时候考虑使用模块化？如何进行模块化？
解决方案：
何时考虑模块化：一般情况出现两次类似的布局及内容结构就可以考虑模块化，出现三次就应该进行模块化。
模块化的思路是：先提取公用样式，私有样式通过命名空间来定义。

心得体会

通过制作电商网站首页，我有以下几点

  1. 模块化思路贯穿始终：其中包括，结构模块化、布局模块化、JS组件化。
  2. 要有清晰明确的文件目录规划
  3. 先着手整体结构及布局，再逐步细化
  4. 样式精简，公共样式合并。
  5. 使用CSS Sprite将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分，来减少网络请求，实现性能优化。