Le terminal mobile H5 crée un nombre illimité de boutons bannières
Avant-propos
Certains boutons bannières sont souvent nécessaires sur les pages h5 mobiles Bien s?r, c'est très simple de réaliser un bouton bannière. Cependant, les chefs de produits et les designers vous poseront toujours quelques problèmes. Par exemple, il s'agit évidemment d'un bouton avec le même format, mais voici un bouton bannière. En dessous, la bannière nécessite deux boutons. en entrant dans la page intérieure, trois boutons sont regroupés dans une seule bannière
S'il n'y a pas de solution raisonnable, alors ce sera sans aucun doute très dégo?tant Parce que nous devons écrire plusieurs styles et nous voulons toujours écrire moins de code. , alors avons-nous de bonnes solutions pour y parvenir ?
En fait, il y a ci-dessous, dans cet article de blog, Réalisons ce défi
L'effet souhaité.
Peut-être qu'après avoir lu le texte ci-dessus, vous ne comprenez pas ce que je veux exprimer. Ensuite, jetons un ?il à un rendu, et vous comprendrez de quoi je parle
Comme le montre l'image ci-dessus, le premier est un bouton bannière, la deuxième rangée est composée de deux boutons et la troisième rangée est composée de trois boutons.
J'espère que tous ces besoins pourront être satisfait via un CSS, et la structure html est extrêmement simple. Comment y parvenir ? Regardez le code suivant?:
structure html
Comme indiqué dans le code ci-dessus.
<!DOCTYPE html><!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF-8">
<title>移動(dòng)端H5做一個(gè)Explication détaillée de lexemple de code pour créer un nombre illimité de boutons de bannière sur le terminal mobile H5</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="../style/style.css">
</head>
<body>
<br>
<!-- 第一行按鈕 -->
<p class="button_box">
<p class="button pink">確定</p>
</p>
<br>
<!-- 第二行按鈕 -->
<p class="button_box">
<p class="button pink">付款</p>
<p class="button">取消訂單</p>
</p>
<br>
<!-- 第三行按鈕 -->
<p class="button_box">
<p class="button pink">設(shè)為默認(rèn)</p>
<a class="button">修改</a>
<label class="button">刪除<input type="submit"></label>
</p></body></html>
Le
consiste à séparer la distance entre chaque bouton, principalement le contenu à l'intérieur de .br
p.button_box
Il faut dire que la structure du HTML est assez simple. Tout d'abord, la couche extérieure est la bo?te de
, et à l'intérieur, si vous avez besoin de boutons, écrivez simplement un élément non auto-fermant de .button.
p.button_box
Non auto-fermant Les éléments de fermeture font référence à d'autres éléments à l'exception des éléments à fermeture automatique tels que
.brhrinput
Dans la troisième ligne, nous montrons une bo?te ordinaire, des liens, et comment écrire des boutons
?. > Puisque les boutons sont des éléments à fermeture automatique, nous les enveloppons avec un élément
pour les rendre disponibles
Partie SASS label
Premier citation reset.scss et mixin.scss, voir mobile H5. article de blog de la série basic reset.scss et mixin.scss
Deuxièmement, la partie CSS est écrite en utilisant la syntaxe SASS. Sinon, veuillez vous référer au résumé CSS de l'expérience d'apprentissage SASS dans la technologie de pré-compilation.
J'ai mis l'explication de la partie insolente dans les commentaires. La réflexion est principalement d'utiliser les propriétés spéciales de la table pour y parvenir. Cela semble être une exigence laborieuse.
.button_box {
display: table; // 將 button_box 外層盒子模擬成表格
width: 100%; // 表格非完整塊級(jí)元素,需要設(shè)定寬度
table-layout:fixed; // 設(shè)定表格內(nèi)單元格的寬度為自動(dòng)等寬,重要!
border-collapse: collapse; // 合并表格和單元格邊框
.button {
display: table-cell; // 將子元素模擬成單元格
font-size: 1.5rem;text-align: center;
background: #eee;color: #555; // 設(shè)定默認(rèn)按鈕樣式
box-shadow: 0 0 0 1px #ddd; // 利用陰影模擬邊框(陰影不占用盒子模型)
text-decoration: none; // 如果元素是鏈接,則去掉下劃線
@include hlh(4.8rem); // 引用高度行高隱藏溢出代碼塊
&.pink { //設(shè)定一個(gè)特殊按鈕樣式,可根據(jù)需要設(shè)定多個(gè)
background: #F13E7A;
color: #fff;
box-shadow:0 0 0 1px #F13E7A;
}
input {display: none;} // 如果是按鈕,則隱藏
}
}
Résumé
Les tables, quel élément magique. Parce que nous utilisions la disposition des tables à l'époque, le code était aussi puant et long qu'un enveloppement de pied de vieille dame. C'est donc à cause de cela que nous avons commencé l'engouement pour les p css. En cas de surcorrection, nous avons ignoré de nombreuses fonctionnalités impressionnantes des tableaux.
En fait, les tableaux sont très géniaux. Grace à ce cas, nous avons utilisé les tableaux en douceur. Cela a résolu cette exigence apparemment difficile. Et cela a été réalisé de manière très idéale et très bien.
Les éléments HTML sont loin des éléments de niveau bloc et des éléments en ligne. Il y a de nombreux attributs que nous devons essayer de comprendre. Voir C'est facile de monter, êtes-vous s?r que c'est facile ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!