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

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

阅读量：4286 次

发布时间：2019-05-27

本文共 2706 字，大约阅读时间需要 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:  );

完整的效果展示：

完整的代码下载：

你可能感兴趣的文章

C语言socket编程(十一)CFNetworking框架/CFSocket////CFStream属于CoreFoundation

查看>>

java 基础IO/inputStream/outputStream/buffInputStrem/buffOutputStrem

查看>>

java 多线程一

查看>>

java基础/IO流/、序列化和反序列化、浅复制和深复制

java／AJAX/JSON/XML／JQUERY

查看>>

iOS加载控制器的三种方式/loadNibName与initwithNibName的区别

java/session/cookie/jsp(一)

查看>>

java/jsp/cookie/session/EL\context和request的生命周期(二)

查看>>

java/jsp/page/include/talib/javaBean、BeanUtils

查看>>

java/JSTL/EL函数/标签

查看>>