main.py
文件代码:
import dash
import dash_html_components as html # 将python转成html
app = dash.Dash(__name__)
sports_lists = [
"" + "Person Juggling",
"" + "Person Rowing Boat",
"" + "Person Biking",
"" + "Person Cartwheeling",
"" + "Person Wrestling",
"" + "Person Mountain Biking",
]
# 应用列表解析式动态生成HTML网页
app.layout = html.Ul([html.Li(sport) for sport in sports_lists])
app.run_server(debug=True)
创建一个style.css
文件来设置网页样式:
/* 设置背景颜色 */
body {
background-color:pink;
}
/* 设置列表字体颜色、大小、粗细以及动态效果 */
li {
color:white;
font-size: 8rem;
font-weight: bold;
transition: all 0.2s ease-in-out;
}
li:hover {
transform: scale(1.1);
}
运行代码,浏览器打开http://127.0.0.1:8050/
`,最终效果图如下所示: