其他分享
首页 > 其他分享> > 响应式网站设计:利用Bootstrap设计响应式网站-index.html

响应式网站设计:利用Bootstrap设计响应式网站-index.html

作者:互联网


响应式网站设计-index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>web</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            font-family: 微软雅黑;
        }
        
        .container {
            padding-top: 65px;
        }
        
        .lead {
            margin-top: 15px;
        }
        
        .carousel {
            margin-bottom: 15px;
        }
        
        .footer {
            height: 50px;
            background: #272822;
            color: #fff;
            line-height: 50px;
            font-size: 15px;
            padding: 0px 15px;
        }
        
        @media(max-width:1024px) {
            .pc {
                display: none;
            }
        }
    </style>
    <link rel="stylesheet" href="bs/css/bootstrap.min.css">
    <script src="bs/js/jquery.min.js"></script>
    <script src="bs/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 网站主体 -->
    <div class="container">
        <!-- 导航菜单 -->
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<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="#">动漫乐园</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">登录</a></li>
                        <li><a href="#">注册</a></li>


                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-- 幻灯片 -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="img/images/a.jpg" alt="...">

                </div>
                <div class="item">
                    <img src="img/images/b.jpg" alt="...">

                </div>
                <div class="item">
                    <img src="img/images/c.jpg" alt="...">

                </div>
                <div class="item">
                    <img src="img/images/d.jpg" alt="...">

                </div>
                <div class="item">
                    <img src="img/images/e.jpg" alt="...">

                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>


        <!-- 内容主体 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h4>哪吒传奇</h4>
                </div>
            </div>
            <div class="panel-body">
                <img src="img/images/nezha3.jpg" class="img-responsive">
                <p class="lead">哪吒:主一副二,有大点大。1技能击中单位后的提速2技能的翻滚位移能够让哪吒很舒服的在战场中寻找站位, 火莲之华提供的韧性帮助哪吒限制敌方输出,为队友承担大量的团队伤害,并万军从中取敌方上将首级。
                    <br> 上单出装思路:哪吒在队伍中的定位主要是远程支援,吸收伤害提供控制,因此出装方面可以考虑半肉或全肉,不推荐纯输出。 前期装备红莲斗篷+鞋子,清兵快支援能力强,上路抗压必备。 中期顺风可以选择出输出装,一般暗影战斧,对面肉多出破甲,需要秒输出可出破军。 之后继续补防御装,反伤甲、魔女斗篷、不详征兆、复活甲性价比都很高,看对手阵容选择, 如果想偏输出一点可以出冰痕之握或极寒风暴,粘人减CD,后排一抓一个死。
                </p>

            </div>
            <div class="panel-footer">
                <div class="row">
                    <div class="col-md-2">

                        <span class="label label-primary">发布者:</span> 小明

                    </div>
                    <div class="col-md-2 pull-right pc">

                        <span class="label label-danger">发布时间:</span> 2016-02-03

                    </div>


                </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h4>哪吒传奇</h4>
                </div>
            </div>
            <div class="panel-body">
                <img src="img/images/nezha3.jpg" class="img-responsive">
                <p class="lead">哪吒:主一副二,有大点大。1技能击中单位后的提速2技能的翻滚位移能够让哪吒很舒服的在战场中寻找站位, 火莲之华提供的韧性帮助哪吒限制敌方输出,为队友承担大量的团队伤害,并万军从中取敌方上将首级。
                    <br> 上单出装思路:哪吒在队伍中的定位主要是远程支援,吸收伤害提供控制,因此出装方面可以考虑半肉或全肉,不推荐纯输出。 前期装备红莲斗篷+鞋子,清兵快支援能力强,上路抗压必备。 中期顺风可以选择出输出装,一般暗影战斧,对面肉多出破甲,需要秒输出可出破军。 之后继续补防御装,反伤甲、魔女斗篷、不详征兆、复活甲性价比都很高,看对手阵容选择, 如果想偏输出一点可以出冰痕之握或极寒风暴,粘人减CD,后排一抓一个死。
                </p>

            </div>
            <div class="panel-footer">
                <div class="row">
                    <div class="col-md-2">

                        <span class="label label-primary">发布者:</span> 小明

                    </div>
                    <div class="col-md-2 pull-right pc">

                        <span class="label label-danger">发布时间:</span> 2016-02-03

                    </div>


                </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h4>哪吒传奇</h4>
                </div>
            </div>
            <div class="panel-body">
                <img src="img/images/nezha3.jpg" class="img-responsive">
                <p class="lead">哪吒:主一副二,有大点大。1技能击中单位后的提速2技能的翻滚位移能够让哪吒很舒服的在战场中寻找站位, 火莲之华提供的韧性帮助哪吒限制敌方输出,为队友承担大量的团队伤害,并万军从中取敌方上将首级。
                    <br> 上单出装思路:哪吒在队伍中的定位主要是远程支援,吸收伤害提供控制,因此出装方面可以考虑半肉或全肉,不推荐纯输出。 前期装备红莲斗篷+鞋子,清兵快支援能力强,上路抗压必备。 中期顺风可以选择出输出装,一般暗影战斧,对面肉多出破甲,需要秒输出可出破军。 之后继续补防御装,反伤甲、魔女斗篷、不详征兆、复活甲性价比都很高,看对手阵容选择, 如果想偏输出一点可以出冰痕之握或极寒风暴,粘人减CD,后排一抓一个死。
                </p>

            </div>
            <div class="panel-footer">
                <div class="row">
                    <div class="col-md-2">

                        <span class="label label-primary">发布者:</span> 小明

                    </div>
                    <div class="col-md-2 pull-right pc">

                        <span class="label label-danger">发布时间:</span> 2016-02-03

                    </div>


                </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h4>哪吒传奇</h4>
                </div>
            </div>
            <div class="panel-body">
                <img src="img/images/nezha3.jpg" class="img-responsive">
                <p class="lead">哪吒:主一副二,有大点大。1技能击中单位后的提速2技能的翻滚位移能够让哪吒很舒服的在战场中寻找站位, 火莲之华提供的韧性帮助哪吒限制敌方输出,为队友承担大量的团队伤害,并万军从中取敌方上将首级。
                    <br> 上单出装思路:哪吒在队伍中的定位主要是远程支援,吸收伤害提供控制,因此出装方面可以考虑半肉或全肉,不推荐纯输出。 前期装备红莲斗篷+鞋子,清兵快支援能力强,上路抗压必备。 中期顺风可以选择出输出装,一般暗影战斧,对面肉多出破甲,需要秒输出可出破军。 之后继续补防御装,反伤甲、魔女斗篷、不详征兆、复活甲性价比都很高,看对手阵容选择, 如果想偏输出一点可以出冰痕之握或极寒风暴,粘人减CD,后排一抓一个死。
                </p>

            </div>
            <div class="panel-footer">
                <div class="row">
                    <div class="col-md-2">

                        <span class="label label-primary">发布者:</span> 小明

                    </div>
                    <div class="col-md-2 pull-right pc">

                        <span class="label label-danger">发布时间:</span> 2016-02-03

                    </div>


                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="footer">
            <div class="row">
                <div class="col-md-2 pull-left">
                    cloudsystem.work
                </div>
                <div class="col-md-2 pull-right pc">
                    欢迎访问!
                </div>
            </div>
        </div>
    </div>

</body>

</html>

标签:输出,index,网站,出装,哪吒,斗篷,响应,技能,敌方
来源: https://blog.csdn.net/weixin_43731793/article/details/97899757