1. 任务

实现商品详情, 分类 , 分类备份页面

代码示例

商品详情配送方式实现

<div class="delivery">
        <span class="text-delivery">配送方式: </span>
        <div class="select-radio">
            <div class="select">
                <input type="radio" name="input-delivery" class="input-delivery">
                <div class="radio-change"></div>
            </div>
            <span class="text-radio">快递配送</span>
        </div>
        <div class="select-radio">
            <div class="select">
                <input type="radio" name="input-delivery" class="input-delivery">
                <div class="radio-change"></div>
            </div>
            <span class="text-radio">门店自提
            </span>
        </div>
    </div>

.delivery .select-radio {
    width: 100px;
    height: 25px;
    margin-right: 10px;
    float: left;
}

.delivery .text-delivery {
    float: left;
}

.delivery .select {
    float: left;
    margin-right: 10px;
    position: relative;
}

.select .input-delivery {
    width: 18px;
    height: 18px;
    opacity: 0;
}

.delivery .text-radio {
    float: left;
}

.radio-change {
    width: 18px;
    height: 18px;
    background: url(../images/radio1.png) no-repeat;
    background-size: 18px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
    /* vertical-align: middle; */
}

.input-delivery:checked + .radio-change {
    background-image: url(../images/radio.png);
}