css實(shí)現(xiàn)“品”字形分級(jí)圖

vslam 發(fā)布于2019-08-20 14:42 / 3473人閱讀

摘要：思路以一個(gè)品字為單元，然后考慮如何讓他們銜接起來采用的偽類顯示線條。主體級(jí)級(jí)級(jí)級(jí)級(jí)級(jí)級(jí)方法一實(shí)現(xiàn)兼容，更低版本未測(cè)試考慮到兼容性，該方法方面采取浮動(dòng)然后通過計(jì)算每一個(gè)品的寬度。

以下內(nèi)容純屬個(gè)人的一點(diǎn)點(diǎn)或許不大成熟的思考，若大家發(fā)現(xiàn)有問題或者更好的思路見解歡迎指出，謝謝大家！

開端

在某一個(gè)風(fēng)和日麗的下午，一個(gè)小伙伴小窗我，詢問下面這樣的分型圖，應(yīng)該用什么思路去實(shí)現(xiàn)它。我看到這個(gè)圖片愣了2秒鐘，腦海就冒出一個(gè)詞——定位，沒錯(cuò)就是定位。然后，又花了2秒鐘茫然定位是最好的解決辦法么？然后愉快的決定動(dòng)手寫一寫用定位怎么去實(shí)現(xiàn)這個(gè)效果（不是要想其他更好的解決辦法么..啊喂），一本正經(jīng)敲代碼臉（嗨呀，好氣哦，裝什么聽不到）。

效果圖：

感謝brook的提醒加上在線預(yù)覽地址：

方法一：css+jq實(shí)現(xiàn)效果
方法二：flex實(shí)現(xiàn)效果

tips：本例只適用于固定一分二這種模式，示例藍(lán)色框定寬定高。
思路：以一個(gè)品字為單元，然后考慮如何讓他們銜接起來,采用.box-line的偽類顯示線條。

主體html:

方法一：css+jq實(shí)現(xiàn)（兼容IE9+，更低版本未測(cè)試）

考慮到兼容性，該方法css方面采取浮動(dòng)然后通過jq計(jì)算每一個(gè)品的寬度。

css:

    .mind-map-column{
        height: 160px;
    }
    .box{
        background: #0092ff;
        width: 200px;
        height: 100px;
        color: #fff;
        text-align: center;
        line-height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -100px;
    }
    .box-wrap{
        margin: 30px auto;
        position: relative;
        height: 100px;
        float: left;
    }
    .box-line:before{
        content: "";
        width: 1px;
        background: #ccc;
        position: absolute;
        top: -30px;
        left: 50%;
        bottom: -30px;
        margin-left: -1px;
    }
    .box-line:after{
        content: "";
        height: 1px;
        background: #ccc;
        position: absolute;
        top: 130px;
        left: 25%;
        width: 50%;
    }
    .noborder-top .box-line:before{
        top: 0;
    }
    .noborder-bottom .box-line:before{
        bottom: 0;
    }
    .noborder-bottom .box-line:after{
        height: 0;
    }

jq:

方法二：flex布局（兼容IE11+）

如果是高級(jí)瀏覽器就“嘿嘿嘿”，flex直接走起。

css：

    .mind-map-column{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .box{
        background: #0092ff;
        width: 200px;
        height: 100px;
        color: #fff;
        text-align: center;
        line-height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -100px;
    }
    .box-wrap{
        margin: 30px auto;
        height: 100px;
        width: 0%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        position: relative;
    }
    .box-line:before{
        content: "";
        width: 1px;
        background: #ccc;
        position: absolute;
        top: -30px;
        left: 50%;
        bottom: -30px;
        margin-left: -1px;
    }
    .box-line:after{
        content: "";
        height: 1px;
        background: #ccc;
        position: absolute;
        top: 130px;
        left: 25%;
        width: 50%;
    }
    .mind-map-column:first-child .box-line:before{
        top: 0;
    }
    .mind-map-column:last-child .box-line:before{
        bottom: 0;
    }
    .mind-map-column:last-child .box-line:after{
        height: 0;
    }

寫在最后的話：
這是我第一次發(fā)布文章，不知道有沒有說清楚我想講的東西（糾結(jié)臉），然后一寫東西就發(fā)現(xiàn)讀書讀少了，本來想針對(duì)個(gè)別屬性進(jìn)行下解釋的發(fā)現(xiàn)我根本講不出來（講不出來還不多查官方文檔多讀書）。這個(gè)文檔或者對(duì)有些人來說不實(shí)用覺得沒價(jià)值，但是畢竟是我想了的、思考了的、花了時(shí)間的，還是想記錄下來說不定走運(yùn)還能幫到一兩個(gè)人呢。

非常感謝閱讀！若大家發(fā)現(xiàn)有問題或者更好的思路見解歡迎指出，謝謝！