制作首页的显示列表。
1. 在首页添加显示问答的列表，并定义好相应的样式。
无序列表
<ul >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
2. 用字典向index.html传递参数。
daohang.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 首页 {% block denglutitle %}{% endblock %} {% block zhucetitle %}{% endblock %} {% block tupiantitle %}{% endblock %} {% block fabutitle %}{% endblock %} </title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="{{ url_for('static',filename='css/daohang.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='css/wenben.css') }}"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="{{ url_for('static',filename='js/daohang.js') }}"></script> {% block dengluhead %}{% endblock %} {% block zhucehead %}{% endblock %} {% block tupianhead %}{% endblock %} {% block fabuhead %}{% endblock %} </head> <body id="mybody"> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="{{ url_for('daohang') }}">首页</a> </div> <div> <ul class="nav navbar-nav"> {% if username %} <li><a href="#" onclick="">{{ username }}</a></li> <li><a href="{{ url_for('logout') }}" onclick="">注销</a></li> {% else %} <li><a href="{{ url_for('denglu') }}" onclick="">登陆</a></li> <li><a href="{{ url_for('zhuce') }}" onclick="">注册</a></li> {% endif %} <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 设置 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">收藏</a></li> <li><a href="#">分享</a></li> <li><a href="#">搜索</a></li> <li class="divider"></li> <li><a href="#">点赞</a></li> </ul> </li> <li><a href="#">||</a></li> </ul> </div> <div style="float: left"> <img id="myonoff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" style="width:40px"> </div> <div> <ul class="nav navbar-nav"> <li><a href="{{ url_for('tupian') }}" onclick="">图片区</a></li> </ul> <ul class="nav navbar-nav"> <li><a href="{{ url_for('fabu') }}" onclick="">发布</a></li> </ul> </div> <div> <input type="text" name="sousuo" id="sousuo" placeholder="请输入内容"> <input type="button" value="搜索" class="btn btn-success" onclick=""> </div> </div> </nav> <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> <ul class="nav navbar-nav"> <li><img src="http://www.gzcc.cn/2016/images/footer1-logo.png"></li> <li style="color: bisque;">版权所有@lin</li> </ul> </nav> <center> <script>document.write(Date())</script> </center> <div class="container"> <div class="row clearfix"> <div class="col-md-2 column s1"> <h3> 标题3（以下是无序标签） </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> </div> <div class="col-md-6 column s1"> <h3 class="text-center">发布</h3> <a href="#">{{ username }}</a> <br> <a href="#">标题</a> <span class="badge pull-right">发布时间</span> <blockquote> <p> 这里是一段文本内容。 </p> <small>小字 <cite>斜体字</cite></small> </blockquote> <p> <em>斜体字</em> 是一个分布式的版本控制系统，最初由 <strong>加粗字</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>小字</small> 社区中。 </p> </div> <div class="col-md-4 column"> <ul class="nav nav-pills"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> Home</a> </li> <li> <a href="#"> <span class="badge pull-right">16</span> More</a> </li> </ul> </div> </div> </div> {% block denglubody %}{% endblock %} {% block zhucebody %}{% endblock %} {% block tupianbody %}{% endblock %} {% block fabubody %}{% endblock %} </body> </html>
