python3.6+Flask+BootStrap--开发一个最基本网页导航栏

最近学习了一下Python中的Flask框架，用了BootStrap和JS做了一个最基本的网页导航栏。

先看一下目录：

右键app.py运行结果如下：

点击这个链接，得到网页显示效果：

接下来看详细步骤，在pycharm中新建Flask项目，然后创建static文件夹，主要用来放css和img和js这些渲染网页的样式文件。创建templates文件夹，用来存放网页。

BootStrap目前是主流的web框架，运用这些css样式文件，可以很方便的开发出界面美观的网页

接下来看主要代码：app.py:

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/',methods=['GET'])
def hello_world():
    return render_template('main.html')


if __name__ == '__main__':
    app.run()

main.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏大全</title>
    <link href="../static/css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="../static/css/style.css" media="screen" type="text/css" />
</head>
<body>
    <script type='text/javascript' src='../static/js/jquery-2.1.1.min.js'></script>
    <script type='text/javascript' src='../static/js/bootstrap.min.js'></script>
    <style>
			.navbar-nav>li>a:hover {
				background: #555 !important;
				color: #fff !important;
			}

			.navbar-nav>li:last-of-type>a {
				border: 0;
			}

			@media ( min-width: 768px) {
				.navbar-nav>li>a {
					text-align: center;
					border-right: 1px solid rgba(0, 0, 0, 0.1)
				}
			}
    </style>

    <br />

    <div class="container">
        <nav class="navbar navbar-default equinav" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
			        </button>
					    <span class="navbar-brand">菜单</span>
				</div>

				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li>
							<a href="#">首页</a>
						</li>
						<li>
							<a href="#">英雄联盟</a>
						</li>
						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">疾风剑豪<b class="caret"></b></a>
							<ul class="dropdown-menu depth_0">
								<li>
									<a href="#">斩钢闪</a>
								</li>
								<li>
									<a href="#">风之壁障</a>
								</li>
								<li>
									<a href="#">踏前斩</a>
								</li>
								<li>
									<a href="#">狂风绝息斩</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#">穿越火线</a>
						</li>
						<li>
							<a href="#">QQ飞车</a>
						</li>
						<li>
							<a href="#">地下城与勇士</a>
						</li>
						<li>
							<a href="#">我的世界</a>
						</li>
						<li>
							<a href="#">消逝的光芒</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>

		<script src="../static/js/index.js"></script>

	</body>

</html>

app.py中可以定义多个路由，一个路由返回一个页面，这样一直迭代，多个页面构成一个系统。

详细代码和css以及js放在 Github上。

Your Repositories https://github.com/tyutltf?tab=repositories

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/ltf201834/article/details/84638737
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-08 15:21:06
阅读 ( 743 )
分类：

python3.6+Flask+BootStrap--开发一个最基本网页导航栏

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看