仿照某商城首页的源代码及效果来源：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: },