level 6
商淘软件
楼主
3．首页样式更改。
3.1.首页结构。
如图3.1，WSTMall系统首页共包含5个html页面。
图3.1 首页代码结构
3.2.顶部导航及轮播部分更改。
其中顶部导航代码在header_nav.html页面当中；本次开发由于没有webApp模块，故去掉进入手机版的链接入口—注释代码31至34行，如图3.2。
图3.2 注释进入WebApp链接
打开header_common.html页面，注释29行至40行“闪电配送”、“社区自提”的小图标，如图3.3。打开“项目名/Apps/Home/View/default/css/common.css”中“#wst-nvg-cart”样式位置，修改原top:-8px为top:-77px。打开样式为“.wst-cart-box”的位置，修改原top:36px为top:-33px。注释border-top:0px；注释“项目名/Apps/Home/View/default/css/head.css”中样式为“.headNav .navCon”的背景色（background-color: #000;）。
图3.3 注释闪电配送、社区自提图标
打开common.css中“.wst-slide-controls”样式位置，修改left:1000px为left:50%;修改top:-40px为top:-50px;添加margin-left:-100px;使轮播的数字小图标居中，如图3.4。
图3.4 轮播图标居中
在Home模块的css文件夹目录下，新建一个a1_common.css，作为个人二次开发的公共css；新建一个a1_index.css，用于对首页的css做补充。
将原来1920*360的轮播改为1920*400的轮播（当然，此处更改只是个人觉得360太“短”而已....），具体更改则为在a1_common.css中写入如图3.5的代码（作用为覆盖原来css）即可，为此将导航高度修改，代码如图3.6.
图3.5 覆盖原来轮播css
图3.6 修改导航高度
删除原来楼层导航效果，添加一个如图3.7的效果（仿照衣联网）； 楼层效果改为如图3.8效果；添加如图3.9展示8个商城精品；添加如图3.10展示8个商城推荐商品。
图3.7 衣联网效果
图3.8 新增楼层效果
图3.9 商城精品
图3.10商城推荐
其中图3.7效果在本次二次开发左边可收缩部分用作展示5个推荐店铺，并且每个店铺展示4个商品。右侧上下循环滚动用作展示商城销售量排行（暂定滚动10个商品）。
图3.8楼层效果展示此种楼层分类下的三个推荐店铺、此楼层的子分类链接（不超过十个）、每个店铺推荐4个商品、点击进入店铺查看更多可以进入到对应的店铺。
图3.9、3.10分别根据从后台取到各自分类的前八个商品展示（数据库商品表已存在“是否精品：isAdminBest字段”，“是否推荐：isAdminRecom字段”）。查询存储并首页循环即可。
下一部分讲解首页的这几个模块的静态代码实现。
2017年02月22日 10点02分
1
3.1.首页结构。
如图3.1，WSTMall系统首页共包含5个html页面。
图3.1 首页代码结构3.2.顶部导航及轮播部分更改。
其中顶部导航代码在header_nav.html页面当中；本次开发由于没有webApp模块，故去掉进入手机版的链接入口—注释代码31至34行，如图3.2。
图3.2 注释进入WebApp链接打开header_common.html页面，注释29行至40行“闪电配送”、“社区自提”的小图标，如图3.3。打开“项目名/Apps/Home/View/default/css/common.css”中“#wst-nvg-cart”样式位置，修改原top:-8px为top:-77px。打开样式为“.wst-cart-box”的位置，修改原top:36px为top:-33px。注释border-top:0px；注释“项目名/Apps/Home/View/default/css/head.css”中样式为“.headNav .navCon”的背景色（background-color: #000;）。
图3.3 注释闪电配送、社区自提图标打开common.css中“.wst-slide-controls”样式位置，修改left:1000px为left:50%;修改top:-40px为top:-50px;添加margin-left:-100px;使轮播的数字小图标居中，如图3.4。
图3.4 轮播图标居中在Home模块的css文件夹目录下，新建一个a1_common.css，作为个人二次开发的公共css；新建一个a1_index.css，用于对首页的css做补充。
将原来1920*360的轮播改为1920*400的轮播（当然，此处更改只是个人觉得360太“短”而已....），具体更改则为在a1_common.css中写入如图3.5的代码（作用为覆盖原来css）即可，为此将导航高度修改，代码如图3.6.
图3.5 覆盖原来轮播css图3.6 修改导航高度删除原来楼层导航效果，添加一个如图3.7的效果（仿照衣联网）； 楼层效果改为如图3.8效果；添加如图3.9展示8个商城精品；添加如图3.10展示8个商城推荐商品。
图3.7 衣联网效果图3.8 新增楼层效果图3.9 商城精品图3.10商城推荐其中图3.7效果在本次二次开发左边可收缩部分用作展示5个推荐店铺，并且每个店铺展示4个商品。右侧上下循环滚动用作展示商城销售量排行（暂定滚动10个商品）。
图3.8楼层效果展示此种楼层分类下的三个推荐店铺、此楼层的子分类链接（不超过十个）、每个店铺推荐4个商品、点击进入店铺查看更多可以进入到对应的店铺。
图3.9、3.10分别根据从后台取到各自分类的前八个商品展示（数据库商品表已存在“是否精品：isAdminBest字段”，“是否推荐：isAdminRecom字段”）。查询存储并首页循环即可。
下一部分讲解首页的这几个模块的静态代码实现。
![[哈哈]](/static/emoticons/u54c8u54c8.png)