zoukankan      html  css  js  c++  java
  • Bootstrap布局设计

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>******有限公司</title>
        <meta name="description" content="公司注册 网站建设 微信公众号 企业邮箱 税务代理">
        <meta name="author" content="******有限公司">
        <script src="~/Themes/Scripts/Bootstrap/js/scripts.js"></script>
        <script src="~/Themes/Scripts/jquery.min.js"></script>
        <link href="~/Themes/Scripts/Bootstrap/css/style.css" rel="stylesheet" />
        <script src="~/Themes/Scripts/Bootstrap/js/bootstrap.min.js"></script>
        <link href="~/Themes/Scripts/Bootstrap/css/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
    
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button> <a class="navbar-brand" style="margin-left:20px" href=""> <img src="~/Themes/Images/Home/ZYLogoSmall.png" /></a><a class="navbar-brand" href="">上海</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="#">注册公司</a>
                    </li>
                    <li class="dropdown">
                        <a href="/" class="dropdown-toggle" data-toggle="dropdown">网站建设<strong class="caret"></strong></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="/Home/WebConstruction">官方网站</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">淘宝网站</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">手机网站</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">企业邮箱</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">微信公众平台<strong class="caret"></strong></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">微信服务号</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">微信订阅号</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">微信企业号</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">财务代理</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">新闻资讯<strong class="caret"></strong></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">公司动态</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">行业动态</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">关于志越<strong class="caret"></strong></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">公司简介</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">联系方式</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">招贤纳士</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" />
                    </div>
                    <button type="submit" class="btn btn-default">
                        提交
                    </button>
    
                </form>
                <ul class="nav navbar-nav navbar-right" style="margin-right:20px">
                    <li>
                        <a href="/Mana/Frame/Login" target="_blank">网站系统管理</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">友情链接<strong class="caret"></strong></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="http://wanwang.aliyun.com/" target="_blank">域名注册</a>
                            </li>
                            <li>
                                <a href="http://wanwang.aliyun.com/" target="_blank">虚拟主机</a>
                            </li>
                            <li>
                                <a href="http://wanwang.aliyun.com/" target="_blank">云服务器</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="https://mp.weixin.qq.com/cgi-bin/loginpage" target="_blank">微信公众平台</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="http://www.bootcss.com/" target="_blank">Bootstrap中文网</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                            </button> <a class="navbar-brand" href=""> <img src="~/Themes/Images/Home/ZYLogoSmall.png" /></a><a class="navbar-brand" href="">上海</a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active">
                                    <a href="#">Link</a>
                                </li>
                                <li>
                                    <a href="#">Link</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Action</a>
                                        </li>
                                        <li>
                                            <a href="#">Another action</a>
                                        </li>
                                        <li>
                                            <a href="#">Something else here</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">Separated link</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">One more separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" />
                                </div>
                                <button type="submit" class="btn btn-default">
                                    Submit
                                </button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a href="#">Link</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Action</a>
                                        </li>
                                        <li>
                                            <a href="#">Another action</a>
                                        </li>
                                        <li>
                                            <a href="#">Something else here</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">Separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </nav>
    
                    <div class="carousel slide" id="carousel-745002">
                        <ol class="carousel-indicators">
                            <li class="active" data-slide-to="0" data-target="#carousel-745002">
                            </li>
                            <li data-slide-to="1" data-target="#carousel-745002">
                            </li>
                            <li data-slide-to="2" data-target="#carousel-745002">
                            </li>
                            <li data-slide-to="3" data-target="#carousel-745002">
                            </li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img style="margin:0 auto" alt="Carousel Bootstrap First" src="~/Themes/Images/carousel/banner001.png" />
                                <div class="carousel-caption">
                                    @*<h4>
                                            First Thumbnail label
                                        </h4>
                                        <p>
                                            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                        </p>*@
                                </div>
                            </div>
                            <div class="item">
                                <img style="margin:0 auto" alt="Carousel Bootstrap Second" src="~/Themes/Images/carousel/banner002.png" />
                                <div class="carousel-caption">
                                </div>
                            </div>
                            <div class="item">
                                <img style="margin:0 auto" alt="Carousel Bootstrap Third" src="~/Themes/Images/carousel/banner003.png" />
                                <div class="carousel-caption">
                                </div>
                            </div>
                            <div class="item">
                                <img style="margin:0 auto" alt="Carousel Bootstrap Fourth" src="~/Themes/Images/carousel/banner004.png" />
                                <div class="carousel-caption">
                                </div>
                            </div>
                        </div> <a class="left carousel-control" href="#carousel-745002" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-745002" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
    
                </div>
            </div>
        </div>
    
        <div class="container-fluid" style="margin-top:20px">
            <div class="row">
                <div class="col-md-12">
                    <div class="jumbotron" style="background-color:#bde2e1">
                        <blockquote>
                            <p style="color:red">
                                com/cn/net/org域名注册&nbsp;&nbsp;|&nbsp;&nbsp;阿里云虚拟主机&nbsp;&nbsp;|&nbsp;&nbsp;企业邮箱注册
                            </p> <small style="color:red"> 全程一对一技术支持+全程代理备案服务 <cite>有限公司</cite></small>
                        </blockquote>
                        <h4>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;领先的互联网应用服务提供商,企业网络服务的首选品牌,秉承专业、诚信、服务、进取的价值观,坚持客户第一的服务理念;全部机房均部署独立IP、光纤接入及线路冗余电信级网络设备以及网络实时监控系统等,确保为用户提供高速、安全、可靠的网络环境。
                        </h4>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="thumbnail">
                                    @*<img alt="Bootstrap Thumbnail First" src="http://lorempixel.com/output/people-q-c-600-200-1.jpg" />*@
                                    <embed src="http://static.video.qq.com/TPout.swf?vid=e0151j0tdzp&auto=0" allowfullscreen="true" quality="high" width="100%" height="300" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
                                    <div class="caption">
                                        <h3>
                                            com/cn/net/org域名主机
                                        </h3>
                                        <p style="font-size:16px">
                                            现在拥有域名,赢在互联网第一步!如果您现在就想域名注册,请发信息或者打电话给我们,我们收到信息您的信息后会及时与您联系,有好的Ideal就要马上注册,不然机会就会稍纵即逝!
                                        </p>
                                        <p>
                                            <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="thumbnail">
                                    @*<img alt="Bootstrap Thumbnail Second" src="http://lorempixel.com/output/city-q-c-600-200-1.jpg" />*@
                                    <embed src="http://static.video.qq.com/TPout.swf?vid=o01450cor5r&auto=0" allowfullscreen="true" quality="high" width="100%" height="300" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
                                    <div class="caption">
                                        <h3>
                                            阿里云云服务器
                                        </h3>
                                        <p style="font-size:16px">
                                            如果您现在就想购买主机,请发信息或者电话给我们。我们收到您的信息后会及时与您联系,因为网站备案需要时日,所以虚拟主机应该早于网站正式上线之前购买!
                                        </p>
                                        <p>
                                            <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="thumbnail">
                                    @*<img alt="Bootstrap Thumbnail Third" src="http://lorempixel.com/output/sports-q-c-600-200-1.jpg" />*@
                                    <embed src="http://static.video.qq.com/TPout.swf?vid=j0136zmmtmf&auto=0" allowfullscreen="true" quality="high" width="100%" height="300" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
                                    <div class="caption">
                                        <h3>
                                            企业邮箱的注册和使用
                                        </h3>
                                        <p style="font-size:16px">
                                            如果您需要了解更多详情,请发信息或者电话给我们。 企业邮箱目前是您公司不可或缺的一部分,我公司为了回馈广大客户将给客户提供使用教程已经技术指导!
                                        </p>
                                        <p>
                                            <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p>
                            <a class="btn btn-primary btn-large" href="#">Learn more</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="container-fluid" style="background-color:#808080">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-12">
    
                            <address>
                                <strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="Phone">P:</abbr> (123) 456-7890
                            </address>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="container-fluid" style="background-color:#000000">
            <div class="row">
                <div class="col-md-12">
                    <div class="row" style="text-align:center;color:#ffffff">
                        Copyright © 2015 *****有限公司. All Rights Reserved.
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    </html>
  • 相关阅读:
    BEM(Block–Element-Modifier)
    http://element.eleme.io/#/zh-CN/component/quickstart
    Commit message 的写法规范。本文介绍Angular 规范(
    好的commit应该长啥样 https://github.com/torvalds/linux/pull/17#issuecomment-5654674
    代码管理
    if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary
    Martin Fowler’s Active Record design pattern.
    The Zen of Python
    Introspection in Python How to spy on your Python objects Guide to Python introspection
    Object-Oriented Metrics: LCOM 内聚性的度量
  • 原文地址:https://www.cnblogs.com/yechangzhong-826217795/p/4812673.html
Copyright © 2011-2022 走看看