來(lái)源：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">注冊(cè)</a></li> 5: <li class="topli"><i class="icon-shopping-cart icon-white"></i> <a href="#">我的購(gòu)物車(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">立即注冊(cè)</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>

效果：

導(dǎo)航部分：

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">設(shè)計(jì)師品牌</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="#">時(shí)尚首飾</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="#">時(shí)尚首飾</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="#">時(shí)尚首飾</a></p> 40: </div> 41: </div> 42: </div> 43: </div> 44: </div> body部分效果

導(dǎo)航的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

總結(jié)

以上是生活随笔為你收集整理的仿照某商城首页的源代码及效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。