純css3實現思維導圖樣式示例

  發布時間:2018-11-01 15:25:32   作者:小米前端技術博客   我要評論

思維導圖又稱之為腦圖,本篇文章主要介紹了使用css3實現思維導圖樣式,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

思維導圖又稱之為腦圖

他大概是這個樣子滴:

網上大部分實現有用d3.js實現,有手動用svg實現,最近工作需要,本人很懶,在琢磨看看用css3能不能實現呢?

答案是肯定的 下面上代碼

html代碼

<div class="mainBody" id="node1">
    <h1>node1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>node2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>node3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
            </div>
        </div>
        <div class="mainBody"><h1>node2</h1></div>
        <div class="mainBody"><h1>node2</h1></div>
    </div>
</div>

css3代碼

.mainBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-start ;
}
.sbody{

}
.oneBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#node1{
    /*height: 200px;*/
    margin-top: 100px;
    margin-left: 100px;
}
h1{
    line-height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

實際效果如圖:

哦有點簡陋····不過樣式什么的你想怎么搞就怎么搞嘍,其中節點的增加,你只需要html中增加相應的節點代碼就行,高度位置都是自適應的,感謝css3的 flex,你們活在這個時代是幸福的

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • CSS3田字格列表的樣式編寫方法

    這篇文章主要介紹了CSS3田字格列表的樣式編寫方法的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-22
  • 純css3實現思維導圖樣式示例

    思維導圖又稱之為腦圖,本篇文章主要介紹了使用css3實現思維導圖樣式,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-01
  • CSS3 Flex 彈性布局實例代碼詳解

    這篇文章主要介紹了CSS3 Flex 彈性布局實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-11-01
  • CSS3 創建網頁動畫實現彈跳球動效果

    這篇文章主要介紹了CSS3 創建網頁動畫實現彈跳球動效果,需要的朋友可以參考下
    2018-10-30
  • css3實現橢圓軌跡旋轉的示例代碼

    這篇文章主要介紹了css3實現橢圓軌跡旋轉的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-29
  • css3繪制百度的小度熊

    本文通過實例代碼給大家分享基于css3繪制百度的小度熊,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-10-29
  • 詳解css3 mask遮罩實現一些特效

    遮罩mask的功能就是使用透明的圖片或漸變遮罩元素的背景。這篇文章主要介紹了詳解css3 mask遮罩實現一些特效,詳細的介紹了mask的屬性以及一些常用示例,感興趣的小伙伴們
    2018-10-24
  • 純css3實現寵物小雞實例代碼

    最近看了很多關于css3的知識和文章,覺得css3用起來很方便,使用css3的話,在頁面布局上可以省去很多不必要的代碼。下面小編給大家帶來了純css3實現寵物小雞的相關知識,感
    2018-10-08
  • 使用純 CSS 創作一個脈動 loader效果的源碼

    這篇文章主要介紹了使用純 CSS 創作一個脈動 loader效果的源碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-28
  • 基于CSS3實現的幾個小loading效果

    這篇文章主要介紹了CSS3實現的幾個小loading效果 ,需要的朋友可以參考下
    2018-09-27

最新評論

时时彩包赢公式0369