程序员人生 网站导航

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

栏目:互联网时间:2014-09-29 22:16:55

来源: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>
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐