国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css實現“品”字形分級圖

frolc / 2453人閱讀

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

以下內容純屬個人的一點點或許不大成熟的思考，若大家發現有問題或者更好的思路見解歡迎指出，謝謝大家！
開端

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

效果圖：

感謝brook的提醒加上在線預覽地址：

方法一：css+jq實現效果
方法二：flex實現效果

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

主體html:



    

        

            

            
1級

        

    


    

        

            

            
2級

        

        

            

            
2級

        

    


    

        

            

            
3級

        

        

            

            
3級

        

        

            

            
3級

        

        

            

            
3級
方法一：css+jq實現（兼容IE9+，更低版本未測試）

考慮到兼容性，該方法css方面采取浮動然后通過jq計算每一個品的寬度。

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+）

如果是高級瀏覽器就“嘿嘿嘿”，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;
    }

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50501.html

相關文章

  • css實現“品”字形分級圖

    摘要：思路以一個品字為單元，然后考慮如何讓他們銜接起來采用的偽類顯示線條。主體級級級級級級級方法一實現兼容，更低版本未測試考慮到兼容性，該方法方面采取浮動然后通過計算每一個品的寬度。 以下內容純屬個人的一點點或許不大成熟的思考，若大家發現有問題或者更好的思路見解歡迎指出，謝謝大家！ 開端 在某一個風和日麗的下午，一個小伙伴小窗我，詢問下面這樣的分型圖，應該用什么思路去實現它。我看到這個圖片愣...

    vslam 評論0 收藏0

  • css實現“品”字形分級圖

    摘要：思路以一個品字為單元，然后考慮如何讓他們銜接起來采用的偽類顯示線條。主體級級級級級級級方法一實現兼容，更低版本未測試考慮到兼容性，該方法方面采取浮動然后通過計算每一個品的寬度。 以下內容純屬個人的一點點或許不大成熟的思考，若大家發現有問題或者更好的思路見解歡迎指出，謝謝大家！ 開端 在某一個風和日麗的下午，一個小伙伴小窗我，詢問下面這樣的分型圖，應該用什么思路去實現它。我看到這個圖片愣...

    vincent_xyb 評論0 收藏0

  • 企業服務的“多租戶多層級”模式

    摘要：相信在分級分權的時代訴求下，聆客企業服務的多租戶多層級模式將大有可為。 聆客企業協作平臺（BingoLink，下簡稱聆客）是品高云旗下面向生態型組織的云端協作與開放平臺產品。聆客作為SaaS化的企業協作移動平臺，在當前在云計算時代的公私混合架構下，各企業客戶以獨立租戶模式存在于平臺之上，使用個性化的系統，業務數據相互獨立隔離、獨立管理。 但對于大型集團企業而言，集團總部與旗下子公司存在...

    lijinke666 評論0 收藏0

  • 給自己的Fonts教程

    摘要：書體宋體仿宋體黑體等例如自帶的宋體實為中易宋體。傳統上說的等線體以當代視角來看通常是較為幼細的黑體。前面的過程我們稱之為編碼，后面的這個過程我們稱之為解碼。部分瀏覽器比如可以選擇編碼自動檢測功能，使用基于統計的方法判斷未定編碼。 準備工作 字符 - Character 字母、數字、漢字、符號等，是一種抽象實體。 字形 - Glyph 單個「字符」的具體表達，一個字可有多個不同的字形。 ...

    pkwenda 評論0 收藏0

  • 大話爬蟲的實踐技巧

    摘要：圖意淫爬蟲與反爬蟲間的對決數據的重要性如今已然是大數據時代，數據正在驅動著業務開發，驅動著運營手段，有了數據的支撐可以對用戶進行用戶畫像，個性化定制，數據可以指明方案設計和決策優化方向，所以互聯網產品的開發都是離不開對數據的收集和分析，數 showImg(https://segmentfault.com/img/remote/1460000013428119?w=539&h=337)...

    沈儉 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<