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

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

来源: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>

效果:

导航部分:

   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部分效果

导航的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://download.csdn.net/detail/u011043843/7966783

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