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

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

   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:    },