结对作业之疫情地图 2

今天主要确定了css样式

style.css

body{
    background-color:#00b1b7;
}
.main{
    width: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{
    width: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;
}