仿照某商城首页的源代码及效果-白红宇

仿照某商城首页的源代码及效果

阅读量：5815 次

发布时间：2019-06-18

本文共 2783 字，大约阅读时间需要 9 分钟。

来源：

header部分代码

1:

2:

3:          登陆

4:          注册

5:           我的购物车(0)

6:           我的收藏

7:           帮助中心

100%正品保证

9:

10:

登陆部分：

1:

2:

3:

4:         登陆

5:

6:

7:

8:

9:                 用户名：

10:

11:

12:

13:

14:

15:                 密码：

16:

17:

18:

19:

20:

21:

22:

23:                          Remember me

24:

25:

26:

27:

28:

29:                     忘记密码

30:

31:

32:                     立即注册

33:

34:

35:

36:

37:

38:

39:

40:

41:

效果：

导航部分：

1:

2:    男士

3:    女士

4:    儿童

5:    设计师品牌

6:    折扣品

7:

8:

9:

10:

11:

12:

13: /ul>

子菜单

1:

2:

3:

4:

5:

6:

7:

8:

9:

10:

11:                    类别索引

12:

13:

14:

15:

16:

17:

18:

19:

20:

21:

22:                    类别索引

23:

24:

25:

26:

27:

28:

29:

30:

31:

32:

33:                    类别索引

34:

35:

36:

37:

38:

39:

40:

41:

42:

43:

44:

body部分效果

导航的js,用了一种比较笨的方法

1: $("#ananshi").hover(

2:    function(){

3:      $(this).parent().css({border:"1px solid #DBD1D1",backgroundColor:"#DBD1D1"});

4:      /*$('#nanshi').show();*/

5:      $('#nanshi').show();

6:       $('#nvshi').hide();

7:      $('#anvshi').parent().css({border:'none',backgroundColor:'#FFFFFF'});

8:    },

9:     function(){

10:       $('#nanshi').hover(

11:        function(){

12:            $("#ananshi").parent().css({border:"1px solid #DBD1D1",backgroundColor:"#DBD1D1"});

13:        },

14:        function(){

15:            $("#ananshi").parent().css({border:'none',backgroundColor:'#FFFFFF'});

16:            $(this).hide();

17:        }

18:      );

19:    }

20:  );

完整的效果展示：

完整的代码下载：

转载于:https://www.cnblogs.com/ido321/p/3994129.html

你可能感兴趣的文章

当我们谈深度学习时，我们用它落地了什么？阿里云内容安全功能全新升级

中国AI崛起，独角兽深兰科技亮相3E北京国际人工智能大会

查看>>

Jboot v2.0-rc.12 发布，优化细节问题

查看>>

解决VS2013 git客户端遇到的一些问题

查看>>

路径前面的符号意思（~/,./,../,/）

查看>>

[转载]程序员的激情其实是一种痛苦

查看>>

科技变革，未来已来，第六届全球软件案例研究峰会成功落幕

查看>>

Ubuntu16.04安装deb文件时提示：此软件来自第三方且可能包含非自由组件

查看>>

【前沿情报】量子计算里程碑式突破：成功模拟45位量子计算机

查看>>

阿里研究院副院长杨健：数字经济不能再造鸿沟

查看>>

高效CNN推理库、多款AlphaGo实现…你们喜欢的Github项目精选又来了！

Android高级第十一讲之不同系统间的区别