ECharts数据可视化项目实践 项目一 天虎网上超市销售管理系统 02天虎布局讲义.pptx

;项目一 天虎网上超市销售管理系统;;前端开发;大屏布局;大屏布局;图1-17 前端初始目录结构;本项目布局分为上下两个部分：上面为标题和时间显示；下面为三行三列的九个容器。如图1-18所示。;? 1.1.1 完成HTML代码; 在布局的上面部分，要完成标题和时间显示，则需要设置h1标签和放置JS插件的div标签。代码如下： ;建立左边三容器，其它类似。代码如下：;? 1.1.2 完成样式代码;头部样式设置，代码如下：;主体样式设置，代码如下：;? 所有放置图形的容器外都放置panel容器，代码如下： ;四???角修饰，代码如下：;左上角的半角框修饰。如图1-19所示。;右上角框。代码如下：;panel-footer容器作用就是为了能形成左下角半角框和右下角半角框，代码如下：;左下角、右下角代码如下：; 在Vscode里打开index.html文件后，选择菜单“运行”，然后选择“启动调试”，可以看到图1-18所示的布局已经成功显示。;