image.png

實(shí)現(xiàn)上圖紅色空心的效果的大致CSS代碼如下

.redMarker {
    width: 8px;
    height: 8px;
    border: 2px solid #fe4800;
    border-radius: 4px;
}

實(shí)現(xiàn)上圖灰色實(shí)心的效果的大致CSS代碼如下

.grayMarker {
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background-color: #808080;
    opacity: 0.5;
}

相關(guān)html代碼

<div class='frequentlyQuestions'>
    <div class='frequentlyQuestionsDesc'>
        <div class="redMarker">
        </div>
        <strong style="padding-left:3px;">下面是大家常溫的問題呦~</strong>
    </div>
    <div class='frequentlyQuestionsContent'>
        <div class='frequentlyQuestionListBig'>
            <div class='frequentlyQuestionList frequentlyQuestionsLine'>賬號(hào)（認(rèn)證、換綁、登錄） <span id='showHide' class='iconfont icon-xialajiantou'></span>
            </div>
            <div id='smallList'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>  如何進(jìn)行營業(yè)執(zhí)照認(rèn)證</span>
            </div>
            <div id='smallList'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>如何找到手機(jī)號(hào)</span>
            </div>
            <div id='smallList'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>密碼玩了個(gè)怎么玩</span>
            </div>

        </div>
        <div class='frequentlyQuestionListBig'>
            <div class='frequentlyQuestionList frequentlyQuestionsLine'>信息問題（被刪除、不顯示） <span id='showHide' class='iconfont icon-xialajiantou'></span></div>
        </div>

        <div class='frequentlyQuestionListBig'>
            <div class='frequentlyQuestionList'>其他問題（毛用、舉報(bào)） <span id='showHide' class='iconfont icon-xialajiantou'></span></div>
        </div>
    </div>
</div>