JavaScript - 最も自然なレイアウトを実現するにはどうすればよいですか?
以下に示すように

为情所困2826日前798

Question

以下に示すように

ringa_lee · Answer

4 つの円を長方形の 4 つの頂点とみなします。点線は境界線スタイルの破線を使用して実装できます。

次に、この長方形のようにページ全体を 1 つずつ垂直に積み重ねます。各長方形内に 2 つの頂点が配置され、長方形の左上隅と右上隅に絶対に配置されます。

https://codepen.io/straybugs/…

大家讲道理 · Answer

純粋な水平方向と垂直方向の進行関係は存在せず、非常にぎこちなく見えます。
各レイヤー間の関係は、ポインタではなく、以下のステップ数を見て関連付けられます。
背景が暗いプロセスの説明も 2 つありますが、目的がわかりません。
全体的なエクスペリエンスが低すぎ、特にプロセスが狭すぎて、ユーザーの注意に影響を与えます。

大家讲道理 · Answer

背景画像
キャンバス
疑似クラス

为情所困 · Answer

幅が固定なら、背景に線を投げ込むかもしれません、ハハハ

漂亮男人 · Answer

width || height: calc は線幅を動的に計算します。この黒い線は疑似要素、::before ::after を使用できます。canvas は少しやりすぎだと思いますが、CSS で実現できます。。

伊谢尔伦 · Answer

1. 写真でカットするのも一つの方法です。
2. または、レイアウトの追加の p を位置決めに使用し、border: 1px 破線 #000 をスタイルに使用します。。それでおしまい。
3. CSS疑似クラスを使用して実装します。

高洛峰 · Answer

IE8以降のブラウザの場合は疑似クラスを使用して実装してください

リーリー

以前のブラウザと互換性がある場合は、p を使用して wave をシミュレートすることしかできません。これは個人のニーズによって異なります。

阿神 · Answer

キャンバスを使用する生徒をサポートします。一歩下がって、写真を使用して写真を切り取ることができます。

给我你的怀抱 · Answer

最初に ul li float を使用してフローティングし、次に class.bg{position:relitive} を記述し、2 つの疑似クラス、つまり水平線と垂直線を記述し、設計草案に従ってそれらを配置するだけです

JavaScript - 最も自然なレイアウトを実現するにはどうすればよいですか?

全員に返信(9)返信します