app.py
from flask import Flask, render_template
app = Flask(__name__)
# 定義首頁路由,渲染 index.html
@app.route('/')
def index():
return render_template('index.html')
# 如果這個腳本是直接運行的,那麼啟動 Flask 應用
if __name__ == '__main__':
app.run(debug=True)
templates/index.html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第十七天 - JavaScript 和 jQuery</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<h1>第十七天的JavaScript和jQuery示範</h1>
</header>
<main>
<button id="show-message">顯示消息</button>
<p id="message" style="display:none;">這是一條動態顯示的消息!</p>
</main>
<footer>
<p>© 2024 由你設計與開發。</p>
</footer>
<script>
$(document).ready(function(){
$("#show-message").click(function(){
$("#message").toggle();
});
});
</script>
</body>
</html>
static/styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
main {
margin: 2em auto;
max-width: 600px;
padding: 1em;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
footer {
text-align: center;
padding: 1em;
background-color: #333;
color: #fff;
position: fixed;
width: 100%;
bottom: 0;
}
最後執行
python app.py