1.一个header和footer 和一个登陆modal框：
<title>网站常见东西练习</title> </head> <body> <!-- 导航 --> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-logo" href="#"> <img src="images/logo.png" /> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-send"></span> 在线代码</a></li> <li><a href="#"><span class="glyphicon glyphicon-download-alt"></span> jquery下载</a></li> <li><a href="#"><span class="glyphicon glyphicon-paperclip"></span> 在线手册</a></li> <li><a href="#"><span class="glyphicon glyphicon-comment"></span> 微博</a></li> <li><a href="#" data-toggle="modal" data-target="#loginModal"> <span class="glyphicon glyphicon-log-in"></span> 登陆</a> </li> <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li> </ul> </div> </div> </nav> <!-- footer --> <nav class="foot navbar-inverse navbar-fixed-bottom"> <ul class="list-inline"> <li class="footer-ss"><a href="#">版权声明</a></li> <li class="footer-ss"><a href="#">在线反馈</a></li> <li class="footer-ss"><a href="#">帮助中心</a></li> <li class="footer-ss">Copyright © 2012-2015 jQuery插件库Version 3.0.0. 备案号:沪ICP备13043785号-1.</li> </ul> </nav> <!-- 登陆的模态框--> <div class="modal fade" id="loginModal"> <div class="modal-dialog"> <div class="modal-content2"> <div class="modal-header2"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel"></h4> </div> <div class="modal-body"> <div class="input-group input-group-lg"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <input type="text" class="form-control" placeholder="请输入登录邮箱" id="ema" /> </div> <div class="input-group input-group-lg top20"> <span class="input-group-addon"><i class="glyphicon glyphicon glyphicon-lock"></i></span> <input type="text" class="form-control" placeholder="请输入登录密码" id="pwd" /> <span class="input-group-btn"> <button class="btn btn-success" type="button" onclick="emdl()">登 录</button> </span> </div> </div> <div class="modal-footer2"> <div class="f"><a href="#">忘记密码?</a></div> <div class="r"><a href="#">注册新用户</a></div> </div> <div class="d3f modal-body tcck2"> <a href="#" onclick="tz()" class="qq"></a> <a href="https://api.weibo.com:443/oauth2/authorize?client_id=3364913104&redirect_uri=http%3A%2F%2Fwww.jq22.com%2FWeiboReturn.aspx&response_type=code&display=default" class="sina"></a> <a href="#" class="zfb"></a> <a href="#" onclick="gt()" class="git"></a> </div> <script> function tz() { var urldz = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101135281&redirect_uri=http://www.jq22.com/QQReturn.aspx?tjurl=" + window.location.href; window.location.href = urldz; } function gt() { var urldz = "https://github.com/login/oauth/authorize?client_id=cf869185ea7d8fcab6df&state=jq22&redirect_uri=http://www.jq22.com/github.aspx?tjurl=" + window.location.href; window.location.href = urldz; } </script> </div> </div> </div>
css代码：
body { background-color: #F4F4F4; font-family: "微软雅黑"; } /* 导航栏 */ @media (min- 768px){ .navbar-collapse.collapse { display: block!important; height: auto!important; padding-bottom: 0; overflow: visible!important; } } .navbar-logo{ height: 50px; display: inline-block; padding: 10px 0; } .navbar-logo img{ height: 100%; } .nav>li>a { font-size: 12px; } /* footer */ .foot { height: 32px; border-top: 1px solid #303030; } .foot ul { padding-left: 10px; padding-right: 10px; } .foot li { line-height: 32px; color: #939393; font-size: 12px; padding-left: 10px; padding-right: 10px; } .list-inline>li { display: inline-block; padding-right: 5px; padding-left: 5px; } .footer-ss { border-right: 1px solid #000; box-shadow: 1px 0 0 #303030; padding-right: 12px; } /* 登陆框*/ .top20{ margin-top: 20px; } .qq { background-image: url(.././images/qq.png); } .sina { background-image: url(.././images/sina.png); } .zfb { background-image: url(.././images/zfb.png); } .git { background-image: url(.././images/git.png); } .modal-content2{ background-image: url(.././images/tcbg.png); position: relative; height: 568px; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; -webkit-background-clip: padding-box; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); box-shadow: 0 3px 9px rgba(0,0,0,.5); } .modal-header2{ margin-top: 20px; padding: 15px; min-height: 16.43px; } .modal-body{ padding-top: 174px; padding-left: 40px; padding-right: 40px; } .form-control{ height: 50px; } .modal-footer2 { padding-top: 0px; padding-right: 40px; padding-left: 40px; padding-bottom: 15px; } .f { float: left; } .r { float: right; } .tcck2{ padding-top: 20px; padding-left: 40px; padding-right: 40px; padding-bottom: 15px; } .d3f a { width: 85px; height: 85px; border-radius: 85px; border: 1px solid #E7E7E7; margin-left: 10px; margin-right: 10px; display: inline-block; }
效果：
modal框：
后面有学习到信的东西在更新》。。