Untitled.gif
そうです! これは滝の流れです! 実現するのは難しそうに見えますが、実際には li タグを使用してこれらの小さなブロックを作成しました。ニーズに応じてカスタマイズすることもできます。 li タグに画像やその他のものを挿入する必要があります。Web ページにレスポンシブなウォーターフォール フローを実装する方法を学びましょう
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #flow { list-style: none; margin: 0 auto; position: relative; } #flow li { position: absolute; background-color: #CCCCCC; font-size: 50px; width: 200px; transition: all 0.5s; } </style> </head> <body> <ul id="flow"> <!--<li>1</li>--> </ul> </body>
3 番目のステップで li 要素を作成します。
このコードのステップでは、bol が表示されます。値を定義し、4 番目のステップで bol 値を定義しました。bol の値に基づいて、レイアウト関数が li を作成するか、li の位置を更新するかを決定します。このステップでは、まず bol を true と見なします。 liタグを取得し、画面の幅に応じて行数を設定し、liタグの数に応じてulの幅を定義します。ここでの目的は、各 li タグの HTML コンテンツを指定した後、4 番目のステップで作成された li タグを挿入するための準備です。応答性の高いウォーターフォール フローを実装するための 3 番目のステップをエコーします。