甘睿星心得4

本周完成了商城首页，商品搜索结果，商品详情，订单与购物车这几个页面。首页采用了扁平化的设计。在首页的开头，引用了Bootstrap的一个Jquery插件，运用在一个带有carousel 和slide类的div中，这插件是一个图片轮播插件，支持自动轮播，设置的轮播间隔为2650。要轮播的内容包含在一个带有carousel-inner类的div中。此轮播插件由Js控制，当鼠标移到图片上的时候，会停止自动轮播，点击左右按钮，可以手动切换轮播的图片。此插件宽度占满整个屏幕宽度。接下来，插件下面的内容被包含在一个container类中，内容居中。轮播插件下，是几个热门商品的介绍，用了扁平式设计，Web安全色进行配色。接下来有三个分栏进行热门商品的分类，分别为手机、笔记本电脑、平板电脑，用了Bootstrap提供的类nav和nav-pills，点击不同的分类会显示不同的商品。然后分栏下用了普通网格布局，推荐热门的商品。商品搜索结果采用了thumbnail类（缩略图）来显示每一个结果。商品详情，订单与购物车采用了普通的栅格布局。