BBS论坛（十八）

18.首页轮播图实现

（1）front/css/front_base.css

.main-container{width: 990px;margin: 0 auto;overflow: hidden;
}
.lg-container{width: 730px;float:left;
}
.sm-container{width: 250px;float:right;
}

（2）front_base.html

<link rel="stylesheet" href="{{ url_for('static',filename='front/css/front_base.css') }}"><div class="main-container">{% block body %}{% endblock %}
</div>

（3）front_index.html

{% extends "front/front_base.html" %}{% block title %}仙剑论坛
{% endblock %}{% block head %}<link rel="stylesheet" href="{{ static('front/css/front_index.css')  }}">
{% endblock %}{% block body %}<div class="lg-container"><div id="carousel-example-generic" class="carousel slide index-banner" 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></ol><!-- 轮播图--><div class="carousel-inner" role="listbox"><div class="item active"><img src="https://static-image.xfz.cn/1512989310_955.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="https://static-image.xfz.cn/1528079965_535.jpeg" alt="..."><div class="carousel-caption">...</div></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><div class="sm-container"></div>{% endblock %}

（4）front/css/front_index.css

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