[TOC]
## 步骤 1 : 先看完整页面效果
![](../images/tmallall.jpg)
## 步骤 2 : 页头信息展示
1. 未登录状态
请登录连接,免费注册连接,购物车是0件。
![](https://box.kancloud.cn/e6beb8dbcd5dd82f7fd66a3943ec8172_1893x32.png)
2. 已登录状态
用户名称,退出超链以及购物车中的数量
![](https://box.kancloud.cn/0fb1b89d6d28b6bedb7a6f71620f09dd_1896x34.png)
## 步骤 3 : 在横向导航栏上提供4个分类连接
![](https://box.kancloud.cn/bd22bcfb9e1c5bb11287e911e1c0534f_440x50.png)
## 步骤 4 : 在纵向导航栏上提供全部17个分类连接
![](https://box.kancloud.cn/b3bf49fc83bed1d70161130b8ad9dd19_202x547.png)
## 步骤 5 : 当鼠标移动到某一个纵向分类连接的时候,显示这个分类下的推荐商品
![](https://box.kancloud.cn/8219d56993aac44589affd904c4477b2_1034x555.png)
## 步骤 6 : 按照每种分类显示5个商品的方式,显示所有17种分类
![](https://box.kancloud.cn/ca9fa227ad32e44a3b8221f2e4737116_1023x902.png)