制作首页的显示列表

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

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

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

{% endblock %}
{% block main %}

<body>
   <div id="list">
       <ul class="list1" >
           <img src="../static/images/myself.jpg" width="60" height="60">
           <li class="zero">用户名:{{ user }}</li>
           <li class="one">问题:{{ question }}</li>
           <li class="two">回答:{{ answer }}</li>

       </ul>
   </div>

</body>
{% endblock %}
.list1{
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    width:500px;
    height:200px;
    background-color:azure;
    box-shadow: 10px 10px 5px #888888;
    border:2px solid antiquewhite;
    padding:20px 40px 20px 40px;
    border-radius:25px;
    list-style: none;


}
.zero{
    font-family: FZshuti;
    font-size: 15px;
    color: sandybrown;
}
.one{
    border:1px solid ;
    border-color: aquamarine;
    font-family: FZshuti;
    font-size: 15px;
    color: sandybrown;
}
.two{
    border: 1px dashed;
    border-color: aquamarine;
    height: 80px;
    font-family: FZshuti;
    font-size: 15px;
    color: sandybrown;
}


 


 




 


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




@app.route('/index')
def index():
    context={
        'user':'Lindan',
        'question':'1+1=？',
        'answer':'2'
    }
    return render_template('index.html',**context)






 






            

            
posted @ 
2017-12-01 15:32 
林丹宜 
阅读(143) 
评论(0) 
编辑 
收藏 
举报