Echart可视化学习(一)

创建需要的目录结构及文件

目录:css、font、images、js

文件:index.html

在css目录下创建一个css文件

Index.html文件中编写基本代码

初始化css

我们查看下引入的文件是否正确,在body中检测一下

双击运行下

准备js文件flexible.js

引入js文件

确认js文件引入是否正确,打开开发者工具,在审查元素的部分可以看到这个部分的代码,并且扩大缩小屏幕数据会发生变化(屏幕适配)

更改适配方案

打开flexible.js,我们设置下面的参数为24

原因是设计稿是1920px,除以24的话就是80,不会太大

检测一下

编辑index.html

再编辑index.css

点击运行一下(随浏览器屏幕大小变化而变化)

准备一些图片在images目录下

body 设置背景图 ,缩放为 100% , 行高1.15

效果

编写头部的盒子

高度为100px

背景图,在容器内显示

缩放比例为 100%

在index.html中添加盒子

运行查看

Index.html放标题文本

标题添加样式

h1 标题部分 白色 38像素 居中显示 行高为 80像素

查看效果

Index.html添加时间模块

时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为:rgba(255, 255, 255, 0.7) 而文字大小为 20像素

Index.css添加样式

Header中添加一个位置样式

再编写时间模块

时间应该是动态的,所以编写一个js

查看效果

原文地址:https://www.cnblogs.com/bqwzy/p/15778495.html