制作首页的显示列表。

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

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

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

 

html
{% extends 'base.html' %}
{% block title %}首页{% endblock %}
{% block head %}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/css/index.css">
{% endblock %}
{% block main %}
    <div class="question-box">
        <img src=https://wx2.sinaimg.cn/mw690/72ae04f1gy1fm1282v31sj218g1wde82.jpg style="width: 50px">
        <ul class="list-group">
            <li clsss="list=group-item">
                <span class="glyphicon glyhicon-leaf" aria-hidden="true"></span>
                <a href="https://wx2.sinaimg.cn/mw690/637dee21ly1fm12yb1cqrj20w01d8tq1.jpg">Kris wu{{ user }}</a><br>
                <a href="https://wx2.sinaimg.cn/mw690/72ae04f1gy1fm1282v31sj218g1wde82.jpg">最新街拍{{ title }}</a><br>
             <span class="badge">上线时间{{ time }}</span>
                <p style="color: indianred">pictures{{ detail }}
                </p>
                <div class="img">
                    <a herf="https://wx2.sinaimg.cn/mw690/637dee21ly1fm12yb1cqrj20w01d8tq1.jpg">
                        <img src="https://wx2.sinaimg.cn/mw690/72ae04f1gy1fm1282v31sj218g1wde82.jpg"></a>
                    <div class="desc"><a href="https://wx2.sinaimg.cn/mw690/72ae04f1gy1fm1282v31sj218g1wde82.jpg>burberry</a></div>
                </div>
            </li>
        </ul>
        </div>
{% endblock %}

py

@app.route('/index/')
def index():
     context={
        'user':'kriswu:',
        'title': '最新街拍',
        'time': 'today',
        'detail':'burberry*kriswu'}
     return render_template('index.html',**context)