代码改变世界

制作首页的显示列表。

2017-12-01 16:05  055李小锐  阅读(108)  评论(0编辑  收藏  举报

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

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

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

 

{% extends 'base.html' %}
{% block title %}首页{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}" >
    <script src="{{ url_for('static',filename='js/index.js') }}" type="text/javascript"></script>
{% endblock %}
{% block main %}



<ul class="list-group" style="width: 50%; margin:0 auto">
<li class="list-group-item">
    <span class="glyphicon glyphicon-align-leaf" aria-hidden="true"></span>
    <a href="#">username:</a>
    <br>
    <a href="#" class="title">title:</a>
    <span class="badge" style="margin-left: 60%">create_time</span>
    <p >detail:{{ question }}</p>
</li>
</ul>


<div class="desc1" >
        <div class="imga" >
            <a href="http://www.gzcc.cn/">
                <img src="http://img1.imgtn.bdimg.com/it/u=1137883556,1724295533&fm=200&gp=0.jpg" width="20px"></a>
            <div><a href="http://www.gzcc.cn/">asdsadd</a></div>
        </div>

        <div class="imga">
            <a href="http://www.gzcc.cn/">
                <img src="http://img5.imgtn.bdimg.com/it/u=3778875510,3433017087&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">dasdadsdddd</a></div>
        </div>

        <div class="imga" class="clearfloat" class="img-hover">
            <a href="http://www.gzcc.cn/">
                <img src="http://img0.imgtn.bdimg.com/it/u=2035935358,1694862404&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">wefdfdf</a></div>
        </div>

        <div class="imga">
            <a href="http://www.gzcc.cn/">
                <img src="http://img0.imgtn.bdimg.com/it/u=1822961415,409605297&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">aasdas</a></div>
        </div>

        <div class="imga">
            <a href="http://www.gzcc.cn/">
                <img src="http://img4.imgtn.bdimg.com/it/u=4201211113,1653247897&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">dasdads</a></div>
        </div>
                <div class="imga">
            <a href="http://www.gzcc.cn/">
                <img src="http://img5.imgtn.bdimg.com/it/u=1203035184,1555274189&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">dasdsadsad</a></div>
        </div>
</div>

{% endblock %}
@app.route('/index/')
def index():
    context={
        'question':'python20171201'
    }
    return render_template('index.html',**context)