モバイル 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
html 要素は、ブロックレベルの要素や Inline 要素とは程遠いものです。簡単そうに見えますが、本当に簡単ですか?
以上がH5モバイル端末でバナーボタンを無制限に作成するサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。