模拟微信的黑色顶部

2019独角兽企业重金招聘Python工程师标准>>>

html

			返回
			联名会员卡预约
			
		

css

nav{
    height: 4rem;
    background: #19181D;
    width: 100%;
    z-index: 2000!important;
    position: relative;
    color: #FFFFFF;
    display: flex;
}
nav a{
    display: block;
    flex:1;
    height: 4rem;
    color: #FFFFFF;
    line-height: 4rem;
    text-align: center;
}
nav a:link, nav a:hover{
    color: #FFFFFF;
}
nav .title{
    flex:4;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 2px;
}
nav .back::before{
    content: '';
    border-top: .2rem solid #fff;
    border-left: .2rem solid #fff;
    width: .8rem;
    height: .76rem;
    -webkit-transform: rotate(-45deg);
    margin-left: 1.3rem;
    margin-top: 1.4rem;
    display: inline-block;
}
.more::before, .more>i::before, .more>i::after{
    content: '';
    background: #FFFFFF;
    width: .5rem;
    height: .5rem;
    display: inline-block;
    border-radius: 50%;
    margin: 0 .15rem;
}

效果

转载于:https://my.oschina.net/leonaLily/blog/533429