zoukankan      html  css  js  c++  java
  • (项目实战二)响应式轮播图

    具体可以参考:http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

    一、轮播图

    <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active" style="background:#223240;">
                <a href="#"><img src="img/slide1.png" alt="第一张"></a>
            </div>
            <div class="item" style="background:#F5E4DC;">
                <a href="#"><img src="img/slide2.png" alt="第二张"></a>
            </div>
            <div class="item" style="background:#DE2A2D;">
                <a href="#"><img src="img/slide3.png" alt="第三张"></a>
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"></span> </a>
        <a href="#myCarousel" data-slide="next"  class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"></span> </a>
    </div>
    • 所需的css如下
     <style>
            a:focus {
                outline: none;
            }
    
            .navbar-brand {
                padding: 0;
            }
    
            #myCarousel {
                margin: 50px 0 0 0;
            }
    
            .carousel-inner .item img {
                margin: 0 auto;
            }
    
            .carousel-control {
                font-size: 100px;
            }
    
        </style>
    • 结果如下图

  • 相关阅读:
    常见 PL.SQL 数据库操作
    PL/SQL常见设置--Kevin的专栏
    pl/sql编程
    添加List集合覆盖问题
    程序猿感情生活的那些事
    表达式树-理解与进阶
    白话神经网络
    EF Core 数据验证
    c#8内插逐字字符串增强功能
    我的新博客
  • 原文地址:https://www.cnblogs.com/shyroke/p/9237330.html
Copyright © 2011-2022 走看看