main.py
文件代码:
import dash
import dash_html_components as html # dash核心库一:将python转成html
# 构建dash应用
app = dash.Dash(__name__)
# 构建页面
# 加载所有的资源需要一个特定名称的文件夹assets,
# 不过不一定非要使用该名称命名文件夹,只是该名称在dash应用中可被自动识别,给我们提供了很大的便利
block = html.Div(children=[
# 在style中添加样式,需注意的是,必须使用字典的形式,而且单凡中间有-的名称都要使用小驼峰的写法(font-size --> fontSize)
# 之所以需要这样处理是因为用dash写的代码都会被翻译成React组件,React中规定必须使用该方式去写才能被识别、
html.H1("Use Dash write Web!",style={"fontSize":"6rem","textAlign":"center","color":"white"}),
html.Img(src="assets/Dash.jpg",style={"height":"500px"})
],
style={"textAlign":"center"}
)
# 约定布局样式
app.layout = block
# 运行dash应用
# 开启debug模式,方便开发时排错
app.run_server(debug=True)
文字的样式使用的是内联样式。
一般情况下,一个网站的CSS都是一个单独的样式表的,在dash中任何放在assets中的CSS外部样式都会被自动加载,因此我们创建一个style.css文件来设置背景颜色。style.css
文件代码(设置背景为黑色):
body {
background-color:black;
}
运行代码,浏览器打开http://127.0.0.1:8050/
,最终效果图如下所示:
其中,页面右下角就是开启debug模式之后的显示效果。