北京赛车 pk10开奖记录_Toyou热购彩票官网
香港高速VIP雲機房火爆上線啦!無需備案酵,開通即用!配套《巔雲自助建站系統3.0》將帶給您飛一般的可視化拖拽建站體驗塢遞,歡迎免費體驗險槳拒。

建站新聞

純css3實現思維導圖樣式示例
一佰互聯網站建設(www.yinxi.net) 發布時間隋蠕康︰2019-04-21 17:21:45 瀏覽數: 33
0

思維導圖又稱之為腦圖

他大概是這個樣子滴灤喇︰

網上大部分實現有用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肺,你們活在這個時代是幸福的

以上就是本文的全部內容邯郎,希望對大家的學習有所幫助不劍,也希望大家多多支持網頁設計琳翠。

一佰互聯是全國知名建站品牌服務商,我們有九年網站建設範耿揭、網站制作低、網頁設計兢、php開發和域名注冊及虛擬主機服務經驗持鼓釜,提供的自助建站服務更是全國有名槽。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版膽嚼拼,拖拽排版網站制作設計芍扛兢,輕松實現pc站貓畏錄、手機微網站囤、小程序娟排、APP一體化全網營銷網站建設 富妹貪,已成功的為全國上百家網絡公司提供自助建站平台搭建服務憾葷伸。

上一篇免缸︰使用CSS屬性選擇器來拼接HTML的DNA的方法
下一篇措倡︰ CSS3 Flex 彈性布局實例代碼詳解
[返回新聞列表]

相關新聞more

01
04月
觸控2.0開啟智能汽車交互新時代

簡介痴逃燙︰一汽車智能化最重要的兩大變現路徑戳扦戊,一是駕駛自動化閃,二是交互觸控化虎,前者基于人工智能懶籃賭,後者基于混合智能迷。業界將汽車自動化劃分為五個級別鳳哪椿︰... >>詳情

05
04月
PHP開發自己的框架必備知識點

簡介閡︰一榮校、PHP常用的四種數據結構簡介芬︰spl是php的一個標準庫驕沏米。官方文檔膝︰http://php.net/manual/zh/book.s... >>詳情

03
05月
SEO中網站內容怎麼偽原創?

現在很多SEOer對于網站文章的更新很重視亥卉,多以網站內容為主要優化方式奈燒,筆者就是其中一員五。對于網站優化中的SEO技術很多朋友都很清楚筒京妮,那麼在... >>詳情

30
04月
php中json_decode()和json

1.json_decode() json_decode (PHP 5 >= 5.2.0, PECL json >= 1.2.0)... >>詳情

營業執照. cdn加速服務 備案系統認證 網絡安全協會 我們的支付方式AAA認證

7x24小時服務電話:18581389571 傳真:023-85725751 免費建站交流群配︰236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 網站投訴:
重慶楚捷科技有限公司 一佰互聯©版權所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保護,網站法律顧問澈垃侯︰ITLAW-莊毅雄律師
中華人民共和國信息產業部網站備案號:渝ICP備12000592號
pk10 pk10开奖 pk10