制作首页的显示列表。

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

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

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

 

@app.route('/')
def home():
    context={
        'question':'958745'
    }
    return render_template('shouye.html',**context)
{% extends'base.html' %}
{% block title %}
    Home
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/shouye css.css')}}" type="text/css">
{% endblock %}
{% block main %}
<body>

<br>
<p class="comment">
    <img class="comment_pic"  src="../static/images/34.jpg">
    <p class="wenti">Question</p>
    <li class="detail">
        <span class="icon" aria-hidden="true"></span>
        <a href="#">username</a>
        <br>
        <a href="#">title</a>
        <span class="badge">creat_time</span>
        <p >detail{{ question }}</p>
    </li></ul>

<div class="all">
    <div class="pic">
        <a href="">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070680095&di=d3cf459d5bce389863664ada351cce45&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2359570068%2C2558894582%26fm%3D214%26gp%3D0.jpg"></a>
        <div class="wenzi1"><a  href="">飞翼零式</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3338b612b23533faf5b6942890e89a22/3c6d55fbb2fb431647c2456623a4462308f7d3c8.jpg"></a>
        <div class="wenzi2"><a href="">自由高达</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070817385&di=89436cb74cd23899275374a9c04cdba0&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F645f98f910da9a9872088c985309566ce0af87bc.jpg"></a>
        <div class="wenzi3"><a href="">正义高达</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070779926&di=7276ba43d58fbb65efee930b973c659e&imgtype=0&src=http%3A%2F%2Fimg2081.poco.cn%2Fmypoco%2Fmyphoto%2F20110822%2F02%2F64108346201108220201501060672178394_025.jpg"></a>
        <div class="wenzi4"><a href="">死神高达</a></div>
    </div>
</div>
</body>
{% endblock %}
</html>

 

posted on 2017-12-01 13:52  122叶远超  阅读(122)  评论(0)  编辑  收藏  举报

导航