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

来源：http://www.ido321.com/750.html

 

header部分代码

 <div class="top span12">
       <ul>
          <li class="topli"><a href="#" data-target="#login" role="button" data-toggle="modal">登陆</a></li>
          <li class="topli"><a href="#" data-target="#register" role="button" data-toggle="modal">注册</a></li>
          <li class="topli"><i class="icon-shopping-cart icon-white"></i> <a href="#">我的购物车(0)</a></li>
          <li class="topli"><i class="icon-star-empty icon-white"></i> <a href="#">我的收藏</a></li>
          <li class="topli"><i class="icon-question-sign icon-white"></i> <a href="#">帮助中心</a></li>
          <p style="float:right;margin-right:10px;">100%正品保证</p>
       </ul>
</div>

登陆部分：

<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">登陆</h3>
    </div>
    <div class="modal-body">
         <form class="form-horizontal">
             <div class="control-group">
                <label class="control-label" for="inputEmail">用户名：</label>
                <div class="controls">
                    <input type="text" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">密码：</label>
                <div class="controls">
                    <input type="password" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
            <div style="margin-left:60px;">
                <label class="control-label" >
                    <a href="#">忘记密码</a>
                </label>
                <label class="control-label">
                    <a href="#" data-target="#register" role="button" data-toggle="modal" id="aregis">立即注册</a>
                </label>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" id="qdl">确定</button>
    </div>
</div>

效果：

导航部分：

<ul>
   <li class="navli"><a href="#" id="ananshi">男士</a></li>
   <li class="navli"><a href="#" id="anvshi">女士</a></li>
   <li class="navli"><a href="#" class="no">儿童</a></li>
   <li class="navli"><a href="#" class="no">设计师品牌</a></li>
   <li class="navli"><a href="#" style="color:red" class="no">折扣品</a></li>
   <li class="navli" style="float:right">
       <form action="?" method="?" class="input-append">
           <input type="text" value="搜索" placeholder="搜索" class="input-medium">
           <span class="add-on"><i class="icon-search"></i></span>
       </form>
   </li>
/ul>

子菜单

<div class="row-fluid">
   <div class="span9" id="nanshi">
       <div class="row-fluid">
           <div class="span3">
               <div class="box">
                   <img src="./img/header_1.jpg">
               </div>
           </div>
           <div class="span3">
               <div class="boxp">
                   <h5>类别索引</h5>
                 <p><a href="#">服装</a></p>
                 <p><a href="#">包袋</a></p>
                 <p><a href="#">鞋履</a></p>
                 <p><a href="#">配饰</a></p>
                 <p><a href="#">珠宝首饰</a></p>
                 <p><a href="#">时尚首饰</a></p>
               </div>
           </div>
           <div class="span3">
               <div class="boxp">
                   <h5>类别索引</h5>
                 <p><a href="#">服装</a></p>
                 <p><a href="#">包袋</a></p>
                 <p><a href="#">鞋履</a></p>
                 <p><a href="#">配饰</a></p>
                 <p><a href="#">珠宝首饰</a></p>
                 <p><a href="#">时尚首饰</a></p>
               </div>
           </div>
           <div class="span3">
               <div class="boxp">
                   <h5>类别索引</h5>
                 <p><a href="#">服装</a></p>
                 <p><a href="#">包袋</a></p>
                 <p><a href="#">鞋履</a></p>
                 <p><a href="#">配饰</a></p>
                 <p><a href="#">珠宝首饰</a></p>
                 <p><a href="#">时尚首饰</a></p>
               </div>
           </div>
       </div>
   </div>
</div>

body部分效果

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

$("#ananshi").hover(
   function(){
     $(this).parent().css({border:"1px solid #DBD1D1",backgroundColor:"#DBD1D1"});
     /*$('#nanshi').show();*/
     $('#nanshi').show();
      $('#nvshi').hide();
     $('#anvshi').parent().css({border:'none',backgroundColor:'#FFFFFF'});
   },
    function(){
      $('#nanshi').hover(
       function(){
           $("#ananshi").parent().css({border:"1px solid #DBD1D1",backgroundColor:"#DBD1D1"});
       },
       function(){
           $("#ananshi").parent().css({border:'none',backgroundColor:'#FFFFFF'});
           $(this).hide();
       }
     );
   }
 );

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

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