zoukankan      html  css  js  c++  java
  • 结对作业之疫情地图 2

    今天主要确定了css样式

    style.css

    body{
        background-color:#00b1b7;
    }
    .main{
        8rem;
        padding-bottom:0.390625rem;
        margin:0.390625rem auto;
        background-color:#fff;
        border-radius:0.13020833rem;
    }
    .main header ul{
        display:flex;
        border-bottom:0.01302083rem solid #F5F6F7;
    }
    
    .main header ul li{
        flex:1;
        display:flex;
        justify-content:center;
        height:0.59895833rem;
    }
    
    .main header ul li a{
        display:flex;
        align-items:center;
        color:#000;
    }
    
    .main header ul li a.active{
        color:#00B1B7;
        border-bottom:0.0390625rem solid #10aeb5;
    }
    
    .main .details {
        padding: 0 0.1953125rem;
    }
    
    .main .details .title {
        font-size: 0.234375rem;
        color: #000;
        margin: 0.26041667rem 0 0.078125rem;
    }
    
    .main .details .time{
        font-size: 0.1953125rem;
        font-weight: 400;
        color: #999999;
        margin-bottom: 0.390625rem;
    }
    
    .main .details .info{
        display: flex;
        flex-wrap:wrap;
        height:2.65625rem;
    }
    
    .main .details .info li{
        25%;
        text-align:center;
        margin-bottom:0.26041667rem;
    }
    
    .main .details .info li h5{
        font-size:0.234375rem;
        color:#333333;
        font-weight:normal;
    }
    
    .main .details .info li p{
        font-size:0.28645833rem;
        font-weight:700;
        margin:0.10416667rem 0 0.02604167rem;
    }
    
    .main .details .info li span{
        display:flex;
        justify-content:center;
        font-size:0.16927083rem;
    }
    
    .main .details .info li span em{
        color:#999999;
    }
    
    .main .china_map{
        height:8.58072917rem;
        padding:0.26041667rem 0.1953125rem 0;
        background-color:#F8F9FA;
    }
    
    .main .china_map nav{
        height:0.52083333rem;
        border-radius:0.06540417rem;
        background-color:#E2E6EB;
        display:flex;
        padding:0.02604167rem;
        box-sizing:border-box;
    }
    .main .china_map nav a{
        flex:1;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#000;
    }
    
    .main .china_map nav a.active{
        font-weight:700;
        background-color:#fff;
        border-radius:0.0390625rem;
    }
    
    .main .china_map .title{
        margin-top:0.20333333rem;
        font-size:0.15325rem;
        text-align:center;
        color:#666;
    }
    
    .main .china_map .content{
        height:7.3046875rem;
    }
    
    .main .trend{
        border:0.01302083rem solid #ccc;
        margin:0.390625rem 0.1953125rem 0;
        border-radius:0.06510417rem;
        box-sizing:border-box;
        padding:0 0.1953125rem;
    }
    .main .trend .title{
        font-size:0.234375rem;
        color:#555555;
        font-weight:700;
        margin:0.1953125rem 0;
    }
    .main .trend .content{
        height:6.2890625rem;
    }
    
    .main .confirm{
        border:0.01302083rem solid #ccc;
        margin:0.390625rem 0.1953125rem 0;
        border-radius:0.06510417rem;
        box-sizing:border-box;
        padding:0 0.1953125rem;
    }
    
    .main .confirm .title{
        font-size:0.234375rem;
        color:#555555;
        font-weight:700;
        margin:0.1953125rem 0;
    }
    
    .main .confirm .content{
        height:6.0546875rem;  
    }
    

    reset.css

    * {
        margin:0;
        padding:0;
    }
    
    li{
        list-style:none;
    }
    
    a{
        text-decoration:none;
    }
    
    i{
        font-style:normal;
    }
    
    em{
        font-style:normal;
    }
    

      

  • 相关阅读:
    Mysql 备份 导入导出
    简 历
    Mysql 表结构 创建 限制 关联
    Unity 碰撞检测
    Unity 获取键值
    关于大型网站系统的一些问题
    关于zookeeper
    dubbo分布式和消息队列
    集群
    cookie及安全问题
  • 原文地址:https://www.cnblogs.com/ltw222/p/14913947.html
Copyright © 2011-2022 走看看