level 6
商淘软件
楼主
3．首页样式更改。
3.4．衣联效果部分。
布局讲解如图3.11：
图3.11 仿衣联网效果布局
其中左侧蓝色版块静态html布局如图3.12：
图3.12. 5个推荐店铺静态html结构
五个店铺已ul、li布局，每个li均绑定一个名为“.pic-turn”的样式，li当中以dl、dd布局展示4个推荐的商品，dl绑定样式“.content”，5个li分别按照序号绑定样式pic0、pic1、pic2、pic3、pic4（程序猿都是从0开始数数的），首先给dl设置“display:none”的样式，然后分别在鼠标移入（onmouseenter）和鼠标移出（onmouseleave）事件改变样式。
左侧蓝色版块css布局如图3.13：
图3.13 店铺推荐css
左侧蓝色版块JS结构如图3.14：
图3.14店铺推荐实现JS
首先监听$("#recommendDesc.store-list ul li")元素的鼠标移入事件，使用$(this).index()获取当前鼠标移动到的店铺序号（此处代码比较垃圾，大家将就下，能实现效果），根据序号确定对对应序号的div进行animate动画操作，使用“find('.modal-bg').css("background-color","rgba(0,0,0,0.*)");”来对不同的版块进行不同透明度的黑色遮罩。并使用“$(this).find(".modal-bg").hide();”去除当前鼠标移动到的li遮罩效果。使用“$(this).siblings().each()”方法循环给其他li设置遮罩层显示。
其次监听$("#recommendDesc.store-list ul li")的鼠标移出事件，鼠标移出事件执行“$(this).find(".content").hide();”将推荐4个商品的div隐藏即可。
最后监听“$("#recommendDesc.store-list")”整体div的移出事件，在移出事件中将各li位置移回到原位，并将所有div的遮罩层隐藏。到此衣联网效果左侧的特效静态效果就算完成。
右侧红色上下滚动的html代码如图3.15：
图3.15 右侧红色静态滚动html
整体结构以div布局，样式绑定为“.recommend-goods-list”。Div当中以h3作为样式标题，标题名称“买啦买来”可以修改为其他的（例如销售排行榜、评价排行版等）。产品滚动版块使用div绑定样式“.scroll-box”（重要点），产品列表以ul、li循环，推荐商品显示部分数量为3个。此处建议推荐10个商品，进行无缝循环推荐。
右侧红色上下滚动的css代码如图3.16：
图3.16 右侧红色静态滚动css
其中css关键点在整体div布局“relative”，“.scroll-box”部分布局为absolute。这样可以现在滚动盒子位置，不会出现滚动图标压标题的现象；“.scroll-box”中的li布局为“relative”，li当中的元素布局为“absolute”（个人习惯，方便产品布局）。
右侧红色上下滚动的JS代码如图3.17：
图3.17 右侧红色静态滚动JS
3.5.腰带广告过渡。
如图3.18，清楚上一版块的浮动，添加一个宽度为“100%”的腰带广告作为顶部推荐特效后楼层效果的过渡（若有必要，单图片后续可扩展为轮播）。
图3.18 腰带广告过渡
3.6.楼层推荐效果。
楼层推荐效果布局如图3.19：
图3.19 首页楼层布局
楼层导航版块的每个楼层共包括“楼层序号”、“楼层标题”、“推荐分类列表”、“三个推荐店铺”、“推荐店铺图片背景”、“店铺遮罩层”、“店铺标题”、“店铺描述”、“进入店铺链接”、“每个店铺的四个推荐商品”。
楼层推荐效静态html代码如图3.20：
图3.20 楼层效果静态html
楼层整体以div布局，div绑定“.floor”样式，h3作为楼层标题导航，ul、li循环楼层对应的推荐分类（系统后台分类有是否推荐属性、楼层由一级分类循环而得到，故推荐分类为此分类下的二级分类列表，建议推荐每个一级分类下的二级分类推荐数量少于10）；店铺以div布局，并绑定“.block”样式，店铺均左浮动，店铺内部4个推荐商品已ul、li布局，两行两列。
楼层推荐效静态css代码如图3.21：
图3.21 首页楼层css
3.7．商城精品版块。
商城精品版块即为在首页展示8个精品商品——精品可在后台设置，布局以UI、LI布局，由于没涉及到动效，故没有JS。商城精品和商城推荐的CSS如图
3.22，商城精品版块html如图3.23：
图3.22 商城精品和商城推荐CSS
图3.23 商城精品html
3.8. 商城推荐版块。
商城精品版块即为在首页展示8个精品商品——精品可在后台设置，布局以UI、LI布局，由于没涉及到动效，故没有JS。商城推荐版块html如图3.24：
图3.24 商城推荐版块
3.8. 添加网站标识图标列表。
在index.html底部引入footer.html代码上一行添加引入网站标识图标列表的代码：<includefile="./Apps/Home/View/default/indexensure.html" />
网站标识图标的html代码及效果如图3.25：
图3.25 网站标识图标代码及效果
3.9.底部导航。
修改原来footer.html部分后台可自定义，更改为和自己开发的网站相关的信息即可。
2017年02月22日 10点02分
1
3.4．衣联效果部分。
布局讲解如图3.11：
图3.11 仿衣联网效果布局其中左侧蓝色版块静态html布局如图3.12：
图3.12. 5个推荐店铺静态html结构五个店铺已ul、li布局，每个li均绑定一个名为“.pic-turn”的样式，li当中以dl、dd布局展示4个推荐的商品，dl绑定样式“.content”，5个li分别按照序号绑定样式pic0、pic1、pic2、pic3、pic4（程序猿都是从0开始数数的），首先给dl设置“display:none”的样式，然后分别在鼠标移入（onmouseenter）和鼠标移出（onmouseleave）事件改变样式。
左侧蓝色版块css布局如图3.13：
图3.13 店铺推荐css左侧蓝色版块JS结构如图3.14：
图3.14店铺推荐实现JS首先监听$("#recommendDesc.store-list ul li")元素的鼠标移入事件，使用$(this).index()获取当前鼠标移动到的店铺序号（此处代码比较垃圾，大家将就下，能实现效果），根据序号确定对对应序号的div进行animate动画操作，使用“find('.modal-bg').css("background-color","rgba(0,0,0,0.*)");”来对不同的版块进行不同透明度的黑色遮罩。并使用“$(this).find(".modal-bg").hide();”去除当前鼠标移动到的li遮罩效果。使用“$(this).siblings().each()”方法循环给其他li设置遮罩层显示。
其次监听$("#recommendDesc.store-list ul li")的鼠标移出事件，鼠标移出事件执行“$(this).find(".content").hide();”将推荐4个商品的div隐藏即可。
最后监听“$("#recommendDesc.store-list")”整体div的移出事件，在移出事件中将各li位置移回到原位，并将所有div的遮罩层隐藏。到此衣联网效果左侧的特效静态效果就算完成。
右侧红色上下滚动的html代码如图3.15：
图3.15 右侧红色静态滚动html整体结构以div布局，样式绑定为“.recommend-goods-list”。Div当中以h3作为样式标题，标题名称“买啦买来”可以修改为其他的（例如销售排行榜、评价排行版等）。产品滚动版块使用div绑定样式“.scroll-box”（重要点），产品列表以ul、li循环，推荐商品显示部分数量为3个。此处建议推荐10个商品，进行无缝循环推荐。
右侧红色上下滚动的css代码如图3.16：
图3.16 右侧红色静态滚动css其中css关键点在整体div布局“relative”，“.scroll-box”部分布局为absolute。这样可以现在滚动盒子位置，不会出现滚动图标压标题的现象；“.scroll-box”中的li布局为“relative”，li当中的元素布局为“absolute”（个人习惯，方便产品布局）。
右侧红色上下滚动的JS代码如图3.17：
图3.17 右侧红色静态滚动JS3.5.腰带广告过渡。
如图3.18，清楚上一版块的浮动，添加一个宽度为“100%”的腰带广告作为顶部推荐特效后楼层效果的过渡（若有必要，单图片后续可扩展为轮播）。
图3.18 腰带广告过渡3.6.楼层推荐效果。
楼层推荐效果布局如图3.19：
图3.19 首页楼层布局楼层导航版块的每个楼层共包括“楼层序号”、“楼层标题”、“推荐分类列表”、“三个推荐店铺”、“推荐店铺图片背景”、“店铺遮罩层”、“店铺标题”、“店铺描述”、“进入店铺链接”、“每个店铺的四个推荐商品”。
楼层推荐效静态html代码如图3.20：
图3.20 楼层效果静态html楼层整体以div布局，div绑定“.floor”样式，h3作为楼层标题导航，ul、li循环楼层对应的推荐分类（系统后台分类有是否推荐属性、楼层由一级分类循环而得到，故推荐分类为此分类下的二级分类列表，建议推荐每个一级分类下的二级分类推荐数量少于10）；店铺以div布局，并绑定“.block”样式，店铺均左浮动，店铺内部4个推荐商品已ul、li布局，两行两列。
楼层推荐效静态css代码如图3.21：
图3.21 首页楼层css3.7．商城精品版块。
商城精品版块即为在首页展示8个精品商品——精品可在后台设置，布局以UI、LI布局，由于没涉及到动效，故没有JS。商城精品和商城推荐的CSS如图
3.22，商城精品版块html如图3.23：
图3.22 商城精品和商城推荐CSS图3.23 商城精品html3.8. 商城推荐版块。
商城精品版块即为在首页展示8个精品商品——精品可在后台设置，布局以UI、LI布局，由于没涉及到动效，故没有JS。商城推荐版块html如图3.24：
图3.24 商城推荐版块3.8. 添加网站标识图标列表。
在index.html底部引入footer.html代码上一行添加引入网站标识图标列表的代码：<includefile="./Apps/Home/View/default/indexensure.html" />
网站标识图标的html代码及效果如图3.25：
图3.25 网站标识图标代码及效果3.9.底部导航。
修改原来footer.html部分后台可自定义，更改为和自己开发的网站相关的信息即可。
![[哈哈]](/static/emoticons/u54c8u54c8.png)
![[滑稽]](/static/emoticons/u6ed1u7a3d.png)