Flask实战第48天：首页轮播图实现

最新推荐文章于 2024-08-01 08:00:00 发布

weixin_30247781

最新推荐文章于 2024-08-01 08:00:00 发布

阅读量734

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：http://www.cnblogs.com/sellsa/p/9534995.html

博客介绍了首页布局相关操作，修改front_base.html，将特定代码放入main-container；创建并引入front_base.css；编辑front_index.html，从bootstrap v3中文文档拷贝轮播图代码到lg-container并修改，还创建front_index.css设置轮播图样式，最后引入该样式文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首页的布局如下

因为以后所有的内容都是在main-container里面，所以这里我们修改front_base.html，把{% block body%}{% endblock%}放到里面去

<div class="main-container">
        {% block body %}{% endblock %}
</div>

创建static/front/css/front_base.css, 并且在front_base.html中引入它

.main-container{
    width: 990px;
    margin: 0 auto;
    overflow: hidden;
}

.lg-container{
    width: 730px;
    float: left;
}

.sm-container{
    width: 250px;
    float: right;
}

编辑front_index.html

{% block body %}
    <div class="lg-container"></div>
    <div class="sm-container"></div>
{% endblock %}

轮播图的代码在bootstrap v3中文文档中可以拷贝当到 lg-container中，然后进行修改如下

    <div class="lg-container">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- 指示器 -->
              <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>
              </ol>

              <!-- 轮播图 -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <a href="#">
                        <img src="https://i1.mifile.cn/a4/xmad_15338857534213_DaEjU.jpg" alt="...">
                    </a>
                </div>
                <div class="item">
                  <a href="#">
                        <img src="https://i1.mifile.cn/a4/xmad_1535103285321_fPlOK.jpg" alt="...">
                    </a>
                </div>
                <div class="item">
                  <a href="#">
                        <img src="https://i1.mifile.cn/a4/xmad_15349329950127_PVrya.jpg" alt="...">
                    </a>
                </div>
                <div class="item">
                  <a href="#">
                        <img src="https://i1.mifile.cn/a4/xmad_15338982677936_eQTJk.jpg" alt="...">
                    </a>
                </div>
              </div>

              <!-- 左右切换的控制按钮 -->
              <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>

lg-container

我们来写个static/front/css/front_index.css来设置轮播图的边角位圆角和它的高度

.index-banner{
    border-radius: 10px;
    overflow: hidden;
    height: 200px;
}

/*需要把图片的高度和轮播的一致*/
.index-banner img{
    height: 200px;
}

在轮播图的 div加上类index-banner

<div id="carousel-example-generic" class="carousel slide index-banner" data-ride="carousel">

并引入static/front/css/front_index.css

{% block head %}
    <link href="{{ url_for('static', filename='front/css/front_index.css') }}" rel="stylesheet">
{% endblock %

转载于:https://www.cnblogs.com/sellsa/p/9534995.html