<!DOCTYPE html>
<html lang="en">
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    
    .expression {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        box-sizing: border-box;
    }
    
    .expression * {
        box-sizing: border-box;
    }
    
    .expression .operator {
        width: 25px;
        height: 25px;
        background: #cdcbfd;
        border-radius: 5px;
        justify-content: center;
        display: flex;
        align-items: center;
        font-weight: bolder;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .expression .operatorName {
        background: #50c38c;
        border-radius: 5px;
        text-align: center;
        color: white;
        line-height: 30px;
        height: 30px;
        font-weight: bolder;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 14px;
        padding: 0 10px;
    }
    
    .expression .nominator,
    .expression .denominator {
        display: flex;
        padding: 10px;
        justify-content: center;
        align-items: center;
    }
    
    .expression .nominator {
        border-bottom: 2px solid #62abe4;
    }
    
    .expression .cursor {
        cursor: pointer;
    }
    
    .expression .cursor:hover {
        background: #f8b815c9
    }
    
    .expression .cust {
        min-width: 100px;
        text-align: center;
    }
    
    .expression select {
        outline-color: transparent;
        border: 0px
    }
    
    .expression select:visited {
        outline: 0px;
        border: 0px;
    }
    
    .expression select:active {
        outline: 0px;
        border: 0px;
    }
</style>

<body>
    <div class="expression">
        <select onchange="selectChange(this)" class="operatorName cust">
            <option value="">请选择</option>
                <option value="1">计算公式1</option>
                <option value="2">计算公式2</option>
                <option value="3">计算公式3</option>
            </select>
        <div>
            <div class="nominator">
                <div class="operatorName cursor">计算公式</div>
                <span class="operator">+</span>
                <div class="operatorName cursor">计算公式</div>
                <span class="operator">+</span>
                <div class="operatorName cursor">计算公式</div>
            </div>
            <div class="denominator">
                <div class="operatorName cursor">计算公式</div>
                <span class="operator">+</span>
                <div class="operatorName cursor">计算公式</div>
                <span class="operator">+</span>
                <div class="operatorName cursor">计算公式</div>
            </div>
        </div>
        <div class="operator">=</div>
        <div class="operatorName">100分</div>
    </div>


    <iframe id="iframe" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes"></iframe>
</body>
<script>
    var iframe = document.querySelector("#iframe");
    iframe.style.height = window.innerHeight + "px";

    function selectChange(obj) {
        var val = +obj.value;
        switch (val) {
            case 1:
                iframe.setAttribute("src", "https://liuhao.blog.csdn.net/article/details/121118496");
                break;
            case 2:
                iframe.setAttribute("src", "https://liuhao.blog.csdn.net/article/details/121136131");
                break;
            case 3:
                iframe.setAttribute("src", "https://liuhao.blog.csdn.net/article/details/120728399");
                break;
        }
    }
</script>

</html>

计算公式展示_css3