首页flask框架下，多个html页面公用一个顶部标题栏，标题栏悬浮固定在顶部高50px，点击标题栏内的标题可在当前页面跳转至对应的html页面，这需要怎么实现，请详细举例说明。

flask框架下，多个html页面公用一个顶部标题栏，标题栏悬浮固定在顶部高50px，点击标题栏内的标题可在当前页面跳转至对应的html页面，这需要怎么实现，请详细举例说明。

时间: 2024-06-09 11:08:30 浏览: 102

这个需求可以通过Flask模板继承和CSS实现。下面是具体的实现步骤： 1. 创建一个基础模板（base.html），包含顶部标题栏和其它共用的元素，如导航栏、页脚等。 2. 在基础模板中定义一个名为`content`的块，用于子模板继承后填充具体的页面内容。 3. 在CSS中定义顶部标题栏的样式，包括悬浮固定在顶部、高度为50px、背景颜色等。 4. 创建具体的子模板，在继承基础模板（base.html）的同时，填充`content`块。 5. 在子模板中定义标题栏内的标题并添加链接，如`<a href="/home">首页</a>`，点击后可跳转至对应的html页面。下面是一个示例代码，供参考： base.html ``` <!DOCTYPE html> <html> <head> <title>My Website</title> <style> /* 定义顶部标题栏样式 */ .header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #333; color: #fff; text-align: center; line-height: 50px; } </style> </head> <body> <div class="header"> <a href="/home">首页</a> <a href="/about">关于我们</a> <a href="/contact">联系我们</a> </div> {% block content %}{% endblock %} </body> </html> ``` home.html ``` {% extends "base.html" %} {% block content %} <h1>欢迎来到我的网站</h1> <p>这是我的首页</p> {% endblock %} ``` about.html ``` {% extends "base.html" %} {% block content %} <h1>关于我们</h1> <p>我们是一家xxxx公司</p> {% endblock %} ``` contact.html ``` {% extends "base.html" %} {% block content %} <h1>联系我们</h1> <p>联系我们的方式：xxxxx</p> {% endblock %} ``` 通过以上步骤，就可以实现多个html页面公用一个顶部标题栏，并且标题栏悬浮固定在顶部高50px，点击标题栏内的标题可在当前页面跳转至对应的html页面。

阅读全文