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

╰半橙微兮° 2022-08-12 13:59 152阅读 0赞

来源：[http://www.ido321.com/750.html][http_www.ido321.com_750.html]

header部分代码

1: <div class="top span12">

2:       <ul>

3:          <li class="topli"><a href="#" data-target="#login" role="button" data-toggle="modal">登陆</a></li>

4:          <li class="topli"><a href="#" data-target="#register" role="button" data-toggle="modal">注册</a></li>

5:          <li class="topli"><i class="icon-shopping-cart icon-white"></i> <a href="#">我的购物车(0)</a></li>

6:          <li class="topli"><i class="icon-star-empty icon-white"></i> <a href="#">我的收藏</a></li>

7:          <li class="topli"><i class="icon-question-sign icon-white"></i> <a href="#">帮助中心</a></li>

8:          <p style="float:right;margin-right:10px;">100%正品保证</p>

9:       </ul>

10: </div>

登陆部分：

1: <div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

2:     <div class="modal-header">

3:         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

4:         <h3 id="myModalLabel">登陆</h3>

5:     </div>

6:     <div class="modal-body">

7:          <form class="form-horizontal">

8:              <div class="control-group">

9:                 <label class="control-label" for="inputEmail">用户名：</label>

10:                 <div class="controls">

11:                     <input type="text" id="inputEmail" placeholder="Email">

12:                 </div>

13:             </div>

14:             <div class="control-group">

15:                 <label class="control-label" for="inputPassword">密码：</label>

16:                 <div class="controls">

17:                     <input type="password" id="inputPassword" placeholder="Password">

18:                 </div>

19:             </div>

20:             <div class="control-group">

21:                 <div class="controls">

22:                     <label class="checkbox">

23:                         <input type="checkbox"> Remember me

24:                     </label>

25:                 </div>

26:             </div>

27:             <div style="margin-left:60px;">

28:                 <label class="control-label" >

29:                     <a href="#">忘记密码</a>

30:                 </label>

31:                 <label class="control-label">

32:                     <a href="#" data-target="#register" role="button" data-toggle="modal" id="aregis">立即注册</a>

33:                 </label>

34:             </div>

35:         </form>

36:     </div>

37:     <div class="modal-footer">

38:         <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>

39:         <button class="btn btn-primary" id="qdl">确定</button>

40:     </div>

41: </div>

效果：

![SouthEast][]

导航部分：

1: <ul>

2:    <li class="navli"><a href="#" id="ananshi">男士</a></li>

3:    <li class="navli"><a href="#" id="anvshi">女士</a></li>

4:    <li class="navli"><a href="#" class="no">儿童</a></li>

5:    <li class="navli"><a href="#" class="no">设计师品牌</a></li>

6:    <li class="navli"><a href="#" style="color:red" class="no">折扣品</a></li>

7:    <li class="navli" style="float:right">

8:        <form action="?" method="?" class="input-append">

9:            <input type="text" value="搜索" placeholder="搜索" class="input-medium">

10:            <span class="add-on"><i class="icon-search"></i></span>

11:        </form>

12:    </li>

13: /ul>

子菜单

1: <div class="row-fluid">

2:    <div class="span9" id="nanshi">

3:        <div class="row-fluid">

4:            <div class="span3">

5:                <div class="box">

6:                    <img src="./img/header_1.jpg">

7:                </div>

8:            </div>

9:            <div class="span3">

10:                <div class="boxp">

11:                    <h5>类别索引</h5>

12:                  <p><a href="#">服装</a></p>

13:                  <p><a href="#">包袋</a></p>

14:                  <p><a href="#">鞋履</a></p>

15:                  <p><a href="#">配饰</a></p>

16:                  <p><a href="#">珠宝首饰</a></p>

17:                  <p><a href="#">时尚首饰</a></p>

18:                </div>

19:            </div>

20:            <div class="span3">

21:                <div class="boxp">

22:                    <h5>类别索引</h5>

23:                  <p><a href="#">服装</a></p>

24:                  <p><a href="#">包袋</a></p>

25:                  <p><a href="#">鞋履</a></p>

26:                  <p><a href="#">配饰</a></p>

27:                  <p><a href="#">珠宝首饰</a></p>

28:                  <p><a href="#">时尚首饰</a></p>

29:                </div>

30:            </div>

31:            <div class="span3">

32:                <div class="boxp">

33:                    <h5>类别索引</h5>

34:                  <p><a href="#">服装</a></p>

35:                  <p><a href="#">包袋</a></p>

36:                  <p><a href="#">鞋履</a></p>

37:                  <p><a href="#">配饰</a></p>

38:                  <p><a href="#">珠宝首饰</a></p>

39:                  <p><a href="#">时尚首饰</a></p>

40:                </div>

41:            </div>

42:        </div>

43:    </div>

44: </div>

body部分效果

![SouthEast 1][]

导航的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:  );

完整的效果展示：[http://szshuo.sinaapp.com/szspeak/][http_szshuo.sinaapp.com_szspeak]

完整的代码下载：[http://download.csdn.net/detail/u011043843/7966783][http_download.csdn.net_detail_u011043843_7966783]

[http_www.ido321.com_750.html]: http://www.ido321.com/750.html
[SouthEast]: /images/20220810/d6d1b05163974f33a1d38237e6b40620.png
[SouthEast 1]: /images/20220810/72fb9041a81f4057a427a4fdec0f7e15.png
[http_szshuo.sinaapp.com_szspeak]: http://szshuo.sinaapp.com/szspeak/
[http_download.csdn.net_detail_u011043843_7966783]: http://download.csdn.net/detail/u011043843/7966783