zoukankan      html  css  js  c++  java
  • 大二下学期第一次结对作业(第二阶段)

    全球疫情信息已经爬取完毕,今日主要实现了前端可视化的布局,将页面分为了五个区块:

    1.主要信息,2.头部信息,3.地图,4.查询区块,5.柱状图区块。

    主要用div进行分块,利用了弹性布局,为了美观每个div之间有一定间距,并对字体等进行了初步设定。

    body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
        background: #f3f4f8;
        background-size: cover;
        /* 行高是字体1.15倍 */
        line-height: 1.15;
    }
    
    header {
        position: relative;
        height: 0.5rem;
        background-size: 100% 100%;
    }
    
    header font {
        font-size: 0.35rem;
        color: #14224f;
        line-height: 0.5rem;
    }
    
    header .showTime {
        line-height: 0.5rem;
        font-size: 0.3rem;
        color: #14224f;
        margin-left: 330px;
    }
    
    header .data {
        line-height: 0.5rem;
        font-size: 0.3rem;
        color: #14224f;
        margin-left: 330px;
    }
    
    .mainbox {
        min-width: 1024px;
        max-width: 1920px;
        padding: 0.125rem 0.125rem 0;
        display: flex;
    }
    
    .mainbox .column {
        flex: 2;
        background: #ffffff;
    }
    
    #map {
        background: #f3f4f8;
    }
    
    .mainbox .column2 {
        flex: 3;
        background: #ffffff;
    }
    
    .mainbox .column .map {
        height: 480px;
        background: #ffffff;
    }
    
    .mainbox .bar {
        height: 200px;
        margin-top: 10px;
        background: #ffffff;
    }

  • 相关阅读:
    蓝屏的钙,好喝的钙
    正则
    JavaScript 获取当前时间戳 (3种方式)
    react-native upoad imagepicker
    xmlhttprequest请求
    修改配置使fiddler可以查看https请求
    安装composer
    判定 android IOS
    看端口任务
    squid 缓存Internet 软件
  • 原文地址:https://www.cnblogs.com/fengchuiguobanxia/p/14578375.html
Copyright © 2011-2022 走看看