【电商5】header shopcar

标签：image   mamicode   ext   图片   pos   购物   icon   pre   iconfont   

• 盒子随内容变大

html

        <div class="shopcar iconfont icon-gouwuche icon-zhankai1">
            我的购物车
            <i class="count">8000000</i>
        </div>

common.css

.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.shopcar .count {
    position: absolute;
    top: -5px;         /*距离顶部距离*/
    left: 105px;      /*撑开是向右延伸的*/


    /*盒子随内容变大*/
    height: 14px;
    padding: 0 5px;           /*不是margin哦*/

    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    border-radius: 7px 7px 7px 0;
}

【电商5】header shopcar

标签：image   mamicode   ext   图片   pos   购物   icon   pre   iconfont   

原文地址：https://www.cnblogs.com/icemiaomiao3/p/14166053.html