这是一个购物网站，网站的用途是向年轻网民提供时尚服装、首饰和玩具等商品。既然面向的客户群是年轻的一代，那么网站应该给人一种很时尚的感觉。因此，需要给网站增加一些与众不同的交互功能来吸引客户。 本案例能够根据商品分类进行显示，并根据分类显示记录。在浏览中浏览者能够与页面进行多区块动态互动，网站首页模板效果如图1所示，详细页模板效果如图2所示。
图1 网站首页效果
图2 网站详细页效果
整个示例以HTML+CSS+JavaScript+jQuery技术混合进行开发，遵循结构、表现、逻辑和数据完全分离的原则进行设计。
- 结构层由HTML负责，在结构内不包含其他层代码。
- 表现层完全独立，并实现表现动态样式控制。
- 逻辑层使用JavaScript+jQuery技术配合进行开发，充分发挥各自优势，以实现最优化代码编辑原则。
本示例不需要后台服务器技术的支持，因此对于广大初学者来说，可以在本地或远程上自由进行调试和运行。