zoukankan      html  css  js  c++  java
  • 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

    查看效果

  • 相关阅读:
    从零到一搭建测试框架
    一文说懂join和setDaemon
    工具代码-timeout
    算法-广度优先遍历-实战-多轮状态
    调用百度AI新闻摘要API
    基于numpy用滑窗方差的办法确定曲线拐点
    python实现离线语音识别
    图床
    传智课堂的授课方案
    C#后台程序与HTML页面中JS方法互调
  • 原文地址:https://www.cnblogs.com/bqwzy/p/15778495.html
Copyright © 2011-2022 走看看