制作首页的显示列表

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

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

html代码

  

 1 <div class="context">
 2         <div class="index index-left"></div>
 3         <div class="index index-center">
 4             <div class="picture">
 5                 <img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/>
 6             </div>
 7             <br><br>
 8             <div class="index-question">
 9                 <div class="question-left">
10                     <ul>
11                         <li>
12                             <div class="item-one">
13                                 <div class="author">
14                                     <a class="avatar" target="_blank" href="/u/ccd1daeaf7c7">
15                                         <img src="//upload.jianshu.io/users/upload_avatars/5620173/edaa35fa-f937-4e57-9c19-6a94e951529d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"
16                                              alt="64">
17                                     </a>
18                                     <div class="info">
19                                         <a class="nickname" target="_blank" href="/u/ccd1daeaf7c7">赵苏七sukie</a>
20                                         <span class="time">5小时前</span>
21                                     </div>
22                                 </div>
23                                 <div class="title">
24                                     <a target="_blank"
25                                        href="/p/f24a71ecb5f5">我是男性,假如我在泰坦尼克号上,我不会让妇女先走</a>
26                                 </div>
27                                 <div class="abstract">
28                                     <p>
29                                         最近一个很火的社区出了一篇帖子,发帖者是一位男性。
30                                         他说,每次看泰坦尼克号上让妇女小孩先走类似的情节,我都很郁闷。凭什么男人就该死?我宁愿抓阄,公平。要不就让头等舱先走,毕竟...
31                                     </p>
32                                 </div>
33                                 <div class="meta">
34                                     <a class="collection-tag" target="_blank" href="/c/20f7f4031550">社会热点</a>
35                                     <a target="_blank" href="/p/f24a71ecb5f5">
36                                         <span> 浏览: 4462</span>
37                                     </a>
38                                     <a target="_blank" href="/p/f24a71ecb5f5#comments">
39                                         <span> 评论: 101</span>
40                                     </a>
41                                     <span> 点赞: 134</span>
42                                 </div>
43                             </div>
44                         </li>
45                         <li>
46                             <div class="item-one">
47                                 <div class="author">
48                                     <a class="avatar" target="_blank" href="/u/ccd1daeaf7c7">
49                                         <img src="//upload.jianshu.io/users/upload_avatars/5620173/edaa35fa-f937-4e57-9c19-6a94e951529d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"
50                                              alt="64">
51                                     </a>
52                                     <div class="info">
53                                         <a class="nickname" target="_blank" href="/u/ccd1daeaf7c7">赵苏七sukie</a>
54                                         <span class="time">5小时前</span>
55                                     </div>
56                                 </div>
57                                 <div class="title">
58                                     <a target="_blank"
59                                        href="/p/f24a71ecb5f5">我是男性,假如我在泰坦尼克号上,我不会让妇女先走</a>
60                                 </div>
61                                 <div class="abstract">
62                                     <p>
63                                         最近一个很火的社区出了一篇帖子,发帖者是一位男性。
64                                         他说,每次看泰坦尼克号上让妇女小孩先走类似的情节,我都很郁闷。凭什么男人就该死?我宁愿抓阄,公平。要不就让头等舱先走,毕竟...
65                                     </p>
66                                 </div>
67                                 <div class="meta">
68                                     <a class="collection-tag" target="_blank" href="/c/20f7f4031550">社会热点</a>
69                                     <a target="_blank" href="/p/f24a71ecb5f5">
70                                         <span> 浏览: 4462</span>
71                                     </a>
72                                     <a target="_blank" href="/p/f24a71ecb5f5#comments">
73                                         <span> 评论: 101</span>
74                                     </a>
75                                     <span> 点赞: 134</span>
76                                 </div>
77                             </div>
78                         </li>
79                     </ul>
80                 </div>
81                 <div class="question-right">
82                     <div class="picture">
83                         <img src="{{ url_for('static', filename='img/index_p2.png') }}" width="100%"/>
84                     </div>
85                     <div class="picture">
86                         <img src="{{ url_for('static', filename='img/index_p3.png') }}" width="100%"/>
87                     </div>
88                 </div>
89             </div>
90         </div>
91         <div class="index index-right"></div>
92     </div>

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

python代码:

1 @app.route('/',methods=['GET','POST'])
2 def index():
3     context = {
4         'userName' : "AllianceHacker",
5         'toTime' : '11小时前',
6         'title' : 'PHP是世界是最好的语言',
7         'context' : 'PHP是世界是最好的语言,这是一个不需要有疑问的问题,谁不服可以来战啊!!!'
8     }
9     return render_template('home.html',**context)

运行截图:

  

原文地址:https://www.cnblogs.com/alliancehacker/p/7920969.html