制作首页的显示列表。

1. 在首页添加显示问答的列表，并定义好相应的样式。

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

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

{% block main %}
<div class="img">
        <ul>
            <li>
                <div class="content">
                    <div class="author">
{#                        <img src="{{ url_for('static',filename='image/') }}">#}
                        <a href="#">username</a>
                        <span>creat_time</span>
                    </div>
                    <br>
                    <a class="title" href="#">title</a><br>
                    <p>detail</p>
                </div>
            </li>
        </ul>
    
{#    <div>#}
{#        <a href="#"><img src="{{ url_for('static',filename='image/1.jpg') }}" width="230" height="230"></a>#}
{#    </div>#}
{#    <div>#}
{#        <a href="#"><img src="{{ url_for('static',filename='image/2.jpg') }}" width="230" height="230"></a>#}
{#    </div>#}
</div>
{% endblock %}

ul{
    padding:0;
    margin:0;
    border: 1px dashed black;
    width:550px;
    height: 400px;
    margin: 0 auto;
    margin-top: 35px;
}
ul li{
    width: 512px;
    list-style: none;
    border: 1px solid black;
    margin: 18px;
}
.author a{
    float:left ;
}
.author span{
    float: right;
}
.title{
    float: left;
    text-align: left;
    word-break:break-all;
}
.content p{
    /*float: left;*/
    text-align: left;
    word-break: break-all;
}

2. 用字典向index.html传递参数。

@app.route('/')
def home():
    context={
        'questions':'Hello Hi!!'
    }
    return render_template('home.html',**context)