Flask实战第59天：首页帖子布局完成

编辑front_index.html

<div id="carousel-example-generic" class="carousel slide index-banner" data-ride="carousel">
    ...
<div class="post-group">
    <ul class="post-group-head">
            <li class="active"><a href="{{ url_for("front.index",st=1,bd=current_board) }}">最新</a></li>
            <li><a href="{{ url_for("front.index",st=2,bd=current_board) }}">精华帖子</a></li>
            <li><a href="{{ url_for("front.index",st=3,bd=current_board) }}">点赞最多</a></li>
            <li><a href="{{ url_for("front.index",st=4,bd=current_board) }}">评论最多</a></li>
    </ul>
    <ul class="post-list-group">
        {% for post in posts %}
            <li>
                <div class="author-avatar-group">
                    <img src="{{ post.author.avatar or url_for('static',filename='common/images/logo.png') }}" alt="">
                </div>
                <div class="post-info-group">
                    <p class="post-title">
                        <a href="#">{{ post.title }}</a>
                        {% if post.highlight %}
                            <span class="label label-danger">精华帖</span>
                        {% endif %}
                    </p>
                    <p class="post-info">
                        <span>作者:{{ post.author.username }}</span>
                        <span>发表时间:{{ post.create_time }}</span>
                        <span>评论:0</span>
                        <span>阅读:0</span>
                    </p>
                </div>
            </li>
        {% endfor %}
    </ul>
</div>   
</div>

编辑front_index.css

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

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

.post-group{
    border: 1px solid #ddd;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 5px;
    padding: 10px;
}

.post-group-head{
    overflow: hidden;
    list-style: none;
}

.post-group-head li{
    float: left;
    padding: 5px 10px;
}

.post-group-head li a{
    color:#333;
}

.post-group-head li.active{
    background: #ccc;
}

.post-list-group{
    margin-top: 20px;
}

.post-list-group li{
    overflow: hidden;
    padding-bottom: 20px;
}

.author-avatar-group{
    float: left;
}

.author-avatar-group img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.post-info-group{
    float: left;
    margin-left: 10px;
    border-bottom: 1px solid #e6e6e6;
    width: 85%;
    padding-bottom: 10px;
}

.post-info-group .post-info{
    margin-top: 10px;
    font-size: 12px;
    color: #8c8c8c;
}

.post-info span{
    margin-right: 10px;
}

front_index.css