Conseils pour utiliser des tableaux pour implémenter la mise en page-tutoriel CSS-php.cn

Conseils pour utiliser des tableaux pour implémenter la mise en page

php中世界最好的语言

Libérer： 2018-03-20 16:25:42

original

3497 Les gens l'ont consulté

Cette fois, je vais vous apporter les compétences nécessaires pour utiliser des tableaux pour mettre en œuvre la mise en page. Quelles sont les précautions pour utiliser les tableaux pour mettre en œuvre la mise en page. Voici des cas pratiques, jetons un coup d'œil.

Cet article présente des exemples de méthodes CSS permettant d'utiliser des tableaux pour implémenter cinq mises en page courantes, et les partage avec tout le monde, comme suit :

Mise en page 1 :

Effet :

Code :

html :

<p class="header">header</p>
<p class="main">main</p>
<p class="footer">footer</p>

Copier après la connexion

Remarque : Il doit y avoir du contenu dans p, sinon ce sera ne pas être affiché

css :

body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  display:table;
  text-align:center;
}
.header,.main,.footer{
  display:table-row;
}
.header{
  height:50px;
  background:tomato;
}
.main{
  background:skyblue;
}
.footer{
  height:50px;
  background:#9d70ff;
}

Copier après la connexion

Mise en page 2 :

Effet :

Code :

html :

<p class="header">header</p>
<p class="main">
  <p class="left">left</p>
  <p class="right">right</p>
</p>
<p class="footer">footer</p>

Copier après la connexion

css :

body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  display:table;
  text-align:center;
}
.header,.main,.footer{
  display:table-row;
}
.header{
  height:50px;
  background:tomato;
}
.main{
  width:100%;
  display:table;
  height:calc(100vh - 100px);
}
.main .left{
  width:300px;
  display:table-cell;
  background:#fcea96;
}
.main .right{
  display:table-cell;
  background:skyblue;
}
.footer{
  height:50px;
  background:#9d70ff;
}

Copier après la connexion

Remarque : 100px dans l'attribut height de .main est la somme des hauteurs de l'en-tête et pied de page

Mise en page trois :

Effet :

Code :

html :

<p class="left">left</p>
<p class="right">
  <p class="header">header</p>
  <p class="main">main</p>
  <p class="footer">footer</p>
</p>

Copier après la connexion

css :

body{
  margin:0;
  padding:0;
  min-height:100vh;
  display:table;
  text-align:center;
}
.left{
  display:table-cell;
  width:200px;
  background:tomato;
}
.right{
  display:table;
  width:calc(100vw - 200px);
  height:100vh;
}
.header,.main,.footer{
  display:table-row;
}
.header{
  height:50px;
  background:skyblue;
}
.main{
  background:#fcea96;
}
.footer{
  height:50px;
  background:#9d70ff;
}

Copier après la connexion

Mise en page quatre (mise en page en double colonne, l'exemple est fixe à gauche et adaptatif à droite) :

Effet :

Code :

html :

<p class="left">left</p>
<p class="right">right</p>

Copier après la connexion

css :

body{
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
  display:table;
  text-align:center;
}
.left,.right{
  display:table-cell;
}
.left{
  width:300px;
  background:tomato;
}
.right{
  background:skyblue;
}

Copier après la connexion

Mise en page cinq (mise en page à trois colonnes, exemple : gauche fixe, droite fixe, milieu adaptatif) :

Effet :

Code :

html :

<p class="left">left</p>
<p class="middle">middle</p>
<p class="right">right</p>

Copier après la connexion

css :

body{
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
  display:table;
  text-align:center;
}
.left,.middle,.right{
  display:table-cell;
}
.left{
  width:300px;
  background:tomato;
}
.middle{
  background:#ffe69e;
}
.right{
  width:200px;
  background:skyblue;
}

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Animation de séquence d'animation CSS3

Explication détaillée de la fonction de transformation en CSS3

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!