• 制作首页的显示列表


    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)

    运行截图:

      

  • 相关阅读:
    mybatis 批量插入时候的一个注意点
    centos7 kubernetes单机安装
    debug 模式缓慢
    那些年,我们误解的 JavaScript 闭包
    maven仓库的配置
    闭包
    docker 搭建自己的github
    docker 搭建小型的node开发环境。
    jquery validate
    使用ueditor中的setContent() 时经常报innerHtml错误(笔记)
  • 原文地址:https://www.cnblogs.com/alliancehacker/p/7920969.html
Copyright © 2020-2023  润新知