一百二十五：CMS系统之首页轮播实现

 

把base模板分为左右两块版心

.main-container{  /*整体版心*/
    width: 990px;
    margin: 0 auto;
    overflow: hidden;
}
.lg-container{  /*左侧版心*/
    width: 730px;
    float: left;
}
.sm-container{  /*右侧版心*/
    width: 250px;
    float: right;
}

 

首页html

{% extends 'front/front_base.html' %}
{% from "common/_macros.html" import static %}

{% block title %}
    首页
{% endblock %}


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


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

        <!-- 轮播图 -->
        <div >{% endblock %}

轮播图控制

.index-banner{  /* 圆角，超出的隐藏 */
    border-radius: 10px;
    overflow: hidden;
    height: 200px; /*轮播图盒子高度*/
}
.index-banner img{ /* 轮播图盒子下的图片高度 */
    height: 200px;
}

实现效果