マインドマップ 彼はおそらく次のように見えるでしょう: インターネット上の実装のほとんどは d3.js を使用して実装されており、一部は svg を使用して手動で実装されています。最近、仕事でそれが必要になり、非常に面倒なので、CSS3 を使用して実装できるかどうか疑問に思っています。 答えはイエスです。これがコードです HTMLコード <div class="mainBody" id="node1"> <h1>ノード1</h1> <div class="oneBody"> <div class="mainBody"> <h1>ノード2</h1> <div class="oneBody"> <div class="mainBody"> <h1>ノード3</h1> <div class="oneBody"> <div class="mainBody"> <h1>ノード4</h1> </div> <div class="mainBody"> <h1>ノード4</h1> </div> <div class="mainBody"> <h1>ノード4</h1> </div> </div> </div> <div class="mainBody"> <h1>ノード3</h1> </div> <div class="mainBody"> <h1>ノード3</h1> </div> </div> </div> <div class="mainBody"><h1>ノード2</h1></div> <div class="mainBody"><h1>ノード2</h1></div> </div> </div> CSS3 コード .mainBody{ display: -webkit-flex; /* Safari */ ディスプレイ: フレックス; flex-direction: 行; コンテンツの配置: flex-start ; } .sbody{ } .oneBody{ display: -webkit-flex; /* Safari */ ディスプレイ: フレックス; flex-direction: 列; コンテンツの両端揃え: スペースを空ける; } #ノード1{ /*高さ: 200px;*/ 上マージン: 100px; 左マージン: 100px; } h1{ 行の高さ: 100%; display: -webkit-flex; /* Safari */ ディスプレイ: フレックス; flex-direction: 列; コンテンツの中央揃え: 中央; } 実際の効果は以下のとおりです。 ああ、ちょっと粗雑ですね... でも、スタイルは何でも好きなようにできます。ノードを追加するには、HTML に対応するノード コードを追加するだけです。高さと位置は適応的です。CSS3 flex のおかげで、この時代に生きているのは幸運です。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: 数千万件のレコードをMySQLに素早く挿入する方法に関する実践的なチュートリアル
>>: docker ベースで Prometheus+Grafana を構築する手順の詳細説明
問題: MySQL データベースが予期せずクラッシュしたため、データベースを起動できませんでした。エ...
必要最近、Node オンライン サービスを移行する必要があったため、2 つの新しいオンライン サーバ...
1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...
この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介...
MySQL 環境をローカル (192.168.1.152) にデプロイし、リモート クライアント 1...
1. SHOW PROCESSLISTコマンドSHOW PROCESSLIST は実行中のスレッド ...
この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...
1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...
1、%: 0 個以上の任意の文字を表します。あらゆるタイプと長さの文字に一致します。場合によっては、...
HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...
今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さ...
MySQL サーバーをシャットダウンする場合、シャットダウン方法に応じてさまざまな問題が発生する可能...
1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...
目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...
パフォーマンス例えば: HTML: <div class="first"&...