zoukankan      html  css  js  c++  java
  • Web开发用到的导航栏固定顶端,页脚固定低端

    直接上代码

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
        <title>About - 我的 ASP.NET MVC 应用程序</title>
        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <style type="text/css">
            html,body {
                height: 100%;
            /*这里html,body一定要100%,否则下面的content-wrapper的100%就不能起作用,可以参考http://www.cnblogs.com/youxin/p/3345085.html*/
    }
             .content-wrapper {
                 margin: 0 auto;
                 min-height: 100%;
                 position: relative;
                 /*这里外层相对定位,内层页脚绝对定位*/
             }
    
            /*页头样式begin*/
            .navbar-header .logo {
                /*background: url(http://res.jisuanke.com/img/logo/logo.svg) 20px 0 no-repeat;*/
                width: 200px;
                height: 60px;
                margin-top: 10px;
                display: block;
            }
            /*页头样式begin*/
    
    
            /*页脚样式begin*/
            .cushion {
                padding-bottom: 188px;
            }
    
            .footer {
                width: 100%;
                position: absolute;
                text-align: center;
                padding-top: 30px;
                padding-bottom: 30px;
                bottom: 0;
                left: 0;
                background: #11354b;
                border-top: 1px solid #0d2838;
                color: #777;
            }
    
            .footer-logo {
                /*background: url(http://res.jisuanke.com/img/logo/logo-footer.svg) no-repeat;*/
                height: 48px;
                width: 48px;
                margin: 0 auto;
            }
    
            .footer-links {
                color: #7196b7;
                margin: 10px auto;
                padding-left: 0;
            }
    
            .footer-links li {
                display: inline;
                padding: 0 2px;
            }
    
            .footer-links li:first-child {
                padding-left: 0;
            }
        /*页脚样式end*/
        </style>
    </head>
    <body>
        <div class="content-wrapper">
            <!-- Static navbar -->
            <div class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="logo" href="/?Length=4" id="logo"> </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="jumbotron">
                    <h1>Hello, world!</h1>
                    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
                </div>
            </div>
            <div class="cushion"></div>
            <div class="footer">
                <div class="container">
    
                    <div class="row">
                        <ul class="footer-links">
                            <li><a href="#" target="_blank">关于<span class="hidden-xs">我们</span></a></li>
                            <li class="muted">&middot;</li>
                            <li><a href="#" target="_blank"><span class="hidden-xs">官方</span>博客</a></li>
                            <li class="muted">&middot;</li>
                            <li><a href="#" target="_blank"><span class="hidden-xs">关注</span>微博</a></li>
                            <li class="muted">&middot;</li>
                            <li><a href="#" target="_blank"><span class="hidden-xs">用前</span>必读</a></li>
                            <li class="muted">&middot;</li>
                            <li><a href="#" target="_blank">隐私<span class="hidden-xs">协议</span></a></li>
                        </ul>
                        <div class="footer-logo">
                        </div>
                        <ul class="footer-links">
                            <li>&copy; 2014 itwocx</li>
                            <li class="muted">&middot;</li>
                            <li>京ICP备5号</li>
                        </ul>
    
                    </div>
                </div>
            </div>
    
        </div>
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </body>
    </html>
  • 相关阅读:
    黄聪:WordPress wp_head()优化:去除不必要的元素标签(转)
    黄聪:IE6下用控制图片最大显示尺寸
    黄聪:wordpress wp_head()函数 浏览器顶部 空白28px 解决办法(转)
    黄聪:在Photoshop中创建多种样式的网格背景图案(转)
    黄聪:如何WP中获取文章分类名称、分类ID、归档分类链接
    黄聪:Wordpress如何不显示(只显示)置顶文章
    黄聪:淘宝用户在宝贝详情页想看到什么
    黄聪:Windows7立体声混音设置方法(stereo mix)(转)
    黄聪:wordpress博客用Slimbox2实现lightbox效果(免插件)(转)
    黄聪:tor 解决 连接中继目录failed 没有可用的链路
  • 原文地址:https://www.cnblogs.com/wuqihui/p/4064565.html
Copyright © 2011-2022 走看看