一、 实验需求分析
1.顶部导航条,分为系统名称综述、简述、分类、搜索框。
2.录播大图5张,使用bootstrap 使用class=”carousel slide”
.
3.轮播图下每个tab标签与导航二级子菜单联动,使用class=”feature-divider”.每部分子内容包括对皮包名称、皮包品牌简介,以及皮包公司简介。
4.四个二级子菜单右边为用户登录模板,包含用户名,密码,记住我,登录按钮,左下角有忘记密码链接。其中当光标放置sign in 按钮时,按钮发生动态变化。
5.四个二级子菜单与用户登录模板使用栅格结构实现两列布局与响应式。四个二级子菜单class=”col-md-9”
, 用户登录模板class=”col-md-3”
。
6.二级菜单下将皮包展示分为四列布局,使用栅格结构,每个div
下有产品图片、分类名称、以及“点我浏览”超链接按钮。其中产品图片设置为圆形。
7.底部版权信息有
© 2020 ZUA. All Rights Reserved | Design by 杨静妍
字样。
二、功能模块
模块 | 功能描述 |
---|---|
导航栏 | 分为综述、简介、分类、搜索 |
轮播图 | 五大皮包品牌:啄木鸟、古驰、思林、迪奥,LV,并在每个品牌下设置超链接,点击“首页”按钮即可跳转相应官方网站 |
二级菜单 | 轮播图下每个tab标签与导航二级子菜单联动,每部分子内容包括对皮包名称、皮包品牌简介,以及皮包公司简介。 |
登录 | 四个二级子菜单右边为用户登录模板,包含用户名,密码,记住我,登录按钮,实现登录功能 |
四列布局 | 二级菜单下将皮包展示分为四列布局,使用栅格结构,有产品图片、分类名称、以及“点我浏览”按钮。 |
核心模块代码
网页截图
六、实验总结
前端常用模板网站
代码等我上传到GitHub上再展示