H5 モバイル端末でバナー ボタンを無制限に作成できます

前書き

モバイル H5 ページでは、バナー ボタンの作成が非常に簡単であることがよくあります。たとえば、これは明らかに同じ形式のボタンですが、下部にあるバナー ボタンは、内部ページに入るために 2 つのボタンが必要になります。

合理的な解決策がない場合、それは間違いなく非常に不快です。なぜなら、私たちは常に、より少ないコードを記述しなければならないからです。それは?レンダリングを見れば、私が何を言っているのか理解できるでしょう

上の図に示すように、最初のボタンはバナー ボタン、2 行目は 2 つのボタン、3 行目は 3 つのボタンです。

これらすべてのニーズが 1 つの CSS で満たされることを願っています。HTML 構造は非常にシンプルです。以下のコードを見てください:

html 構造

上記のコードに示すように。

br は、主に p.button_box 内のコンテンツを中心に、各ボタン間の距離を区切るためのものです。

HTML の構造は次のようになります。まず、外側のレイヤーは p.button_box のボックスで、ボタンが必要な場合は、その中に .button 非自己終了要素を書き込むだけです。

非自己終了要素とは、brhrinput などの自己終了要素を除く他の要素を指します。

3 行目では、通常のボックス、リンク、およびその方法を示します。ボタンを書きます。

ボタンは自己終了要素であるため、それを使用できるようにするために label 要素でラップします。br是为了区隔各个按钮之间的距离,主要是p.button_box里面的内容.

html的结构应该说是相当简单的.首先,外层是p.button_box的盒子,而里面呢,需要什么按钮,就写一个.button的非自闭和元素即可.

非自闭和元素是指除了brhrinput等自闭元素之外的其他元素.

在第三行里面,我们演示了普通的盒子,链接,以及按钮的写法.

由于按钮是自闭和元素,因此,我们用一个label

SASS 部分

最初は、scss と mixin を参照します。 scss については、モバイル H5 シリーズのブログ投稿の [reset.scss] および [mixin.scss] を参照してください。

次に、CSS 部分は SASS 構文を使用して記述されています。そうでない場合は、CSS プリコンパイル テクノロジの SASS 学習体験の概要を参照してください。詳しい説明が多すぎます。

Sass 部分の説明をコメントに記載しました。主なアイデアは、この一見面倒な要件を達成するためにテーブルの特殊なプロパティを使用することです。

テーブルの魔法の要素について説明します。当時はテーブル レイアウトを使用していたので、コードがおばさんの足布のように長かったため、p+css の流行が始まりました。しかし、過剰な修正により、テーブルに関する多くの優れた点が無視されました。

実際、テーブルは非常に強力です。このケースでは、テーブルを使用して、この一見困難な要件をうまく解決しました。

html 要素は、ブロックレベルの要素や Inline 要素とは程遠いものです。簡単そうに見えますが、本当に簡単ですか?

以上がH5モバイル端末でバナーボタンを無制限に作成するサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。