Python做登录注册的网页带CSS
在Web开发中，登录和注册是常见的功能之一。Python作为一门简单易学的编程语言，可以很方便地用来实现登录注册的网页。本文将介绍如何使用Python和CSS创建一个简单的登录注册网页，并提供代码示例。
1. 准备工作
在开始编写代码之前，我们需要准备以下工具和环境：
- Python：确保已经安装了Python环境。可以从官方网站（
- Flask：Flask是一个使用Python编写的微型Web框架。可以使用pip命令（
pip install flask）安装Flask。 - HTML和CSS基础：了解HTML和CSS的基本知识，包括标签和样式的使用。
2. 创建登录注册页面
首先，我们需要创建一个HTML文件来实现登录注册页面的结构和样式。可以使用任何文本编辑器来创建一个名为login.html的文件，并在文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Login/Register</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
Login/Register
<form action="/login" method="POST">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a rel="nofollow" href="/register">Register here</a>.</p>
</div>
</body>
</html>
在上面的代码中，我们创建了一个简单的HTML页面，包含一个登录表单和一个注册链接。
3. 添加CSS样式
为了美化页面并提供更好的用户体验，我们需要添加一些CSS样式。创建一个名为style.css的新文件，并在文件中添加以下代码：
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
background-color: #fff;
margin: 0 auto;
padding: 20px;
width: 300px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #45a049;
}
p {
text-align: center;
}
a {
text-decoration: none;
color: #4CAF50;
}
a:hover {
text-decoration: underline;
}
在上面的代码中，我们定义了一些常见的CSS样式，如背景色、字体样式、边距和边框等。通过这些样式，我们可以使页面看起来更加美观和专业。
4. 创建Python服务器
现在，我们可以使用Python和Flask来创建一个简单的Web服务器，以便在浏览器中查看我们的登录注册页面。创建一个名为app.py的新文件，并在文件中添加以下代码：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('login.html')
if __name__ == '__main__':
app.run()
在上面的代码中，我们导入了Flask库并创建了一个应用程序实例。然后，我们定义了一个路由，将根URL（/）与login.html模板关联起来。最后，我们使用app.run()来运行服务器。
5. 启动服务器
要启动服务器并在浏览器中查看我们的登录注册页面，只需在命令行中运行以下命令：
python app.py
浏览器访问http://localhost:5000，即可看到我们的登录注册页面
