Explication détaillée de l'alignement des div et de la mise en page des pages Web-tutoriel HTML-php.cn

Explication détaillée de l'alignement des div et de la mise en page des pages Web

巴扎黑

Libérer： 2017-09-02 09:54:23

original

1455 Les gens l'ont consulté

La mise en page p est au centre de l'apprentissage. Cet article présente principalement en détail le matériel d'apprentissage pertinent sur l'alignement p et la mise en page des pages Web. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

La raison pour laquelle. La disposition p doit être bien apprise car la disposition du tableau est vraiment difficile à utiliser s'ils sont dans le même tableau, la répartition des spécifications de chaque ligne ne peut pas du tout être ajustée. Par exemple, le code très simple suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body>  
<table border="1">  
<tr>  
<td width="5%">11111111111111</td>  
<td width="85%">11111111111111</td>  
<td width="5%">11111111111111</td>  
<td width="5%">11111111111111</td>  
</tr>  
<tr>  
<td width="5%">11111111111111</td>  
<td width="5%">11111111111111</td>  
<td width="85%">11111111111111</td>  
<td width="5%">11111111111111</td>  
</tr>  
</table>  
</body>  
</html>

Copier après la connexion

Je voulais écrire une mise en page comme celle-ci :

Mais l'effet réel est le suivant :

C'est normal, car seule la première ligne de la disposition du tableau est effective pour le paramètre td, et les paramètres td des lignes restantes seront définis pour la première ligne couverte. .

Ce problème est très grave, surtout pour les web designers. Lorsque vous définissez l'attribut border du tableau à 0, il est difficile de comprendre ce qui s'est passé ?

Pour résoudre ce problème, si vous utilisez toujours la disposition des tableaux, vous disposez de deux méthodes. L'une consiste à faire en sorte que les deux lignes ne soient pas dans le même tableau et l'autre consiste à utiliser l'imbrication des tableaux.

Mais c'est trop pénible, n'est-ce pas ? Devez-vous utiliser un nouveau tableau à chaque mise en page ? Et comment le script numérote-t-il autant de tables ? Comment contrôler ?

La mise en page Web du tableau n'est donc pas très utile et ne peut être utilisée que pour la mise en page en ligne. Le rôle du tableau dans la mise en page en ligne est en effet beaucoup plus puissant pour p.

Mais p layout peut également compléter la mise en page en ligne, mais vous devez définir l'attribut float avec style et compléter une mise en page en ligne, vous devez utiliser clear:both dans le style pour envelopper la ligne.

La décharge de la couche ci-dessus est réalisée grâce au code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>p</title>  
</head>  
  
<body>  
<!--默认情况下的p对齐-->  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>  
<!--更换对齐方式，必须使用clear:both换行，这个换行符的高度为10px，默认为0px，颜色同网页的背景色-->  
<p style="clear:both; height:10px;"></p>  
<!--使用了行内右对齐的方式，是先写最右图层，再写次右图层，与常人思维相反-->  
<p style="background:#F00; width:10%; height:100px; float:right; margin-right:10%"></p>  
<p style="background:#00f; width:10%; height:100px; float:right;"></p>  
<p style="clear:both; height:10px;"></p>  
<!--使用行内左对齐方式-->  
<p style="background:#0f0; width:10%; height:100px; float:left;"></p>  
<p style="background:#F00; width:10%; height:100px; float:left;"></p>  
<p style="clear:both; height:10px;"></p>  
<p style="background:#00f; width:10%; height:100px; float:left;"></p>  
<!--如果你更换对齐方式，这里是希望从行内左对齐更变成一个无论大小的图层占用一行，而不用clear:both换行的话，这两个图层会叠放在一起，出错-->  
<p style="background:#0af; width:15%; height:100px;"></p>  
<!--此乃正确的使用方式。-->  
<p style="clear:both; height:10px;"></p>  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>  
</body>  
</html>

Copier après la connexion

Et pour certains Par exemple, les calques tels que les barres de navigation qui sont fixes au début ou à la fin de la page, et certains calques publicitaires qui sont libres du système, doivent utiliser la méthode d'alignement de position, la première est fixe et la seconde est absolue.

Dans le code ci-dessus, continuez à ajouter le code suivant :

<p style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游离于体系之外</p>  
<p style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游离于体系之外</p>  
<!--下面两个图层，只是为了说明上面两行代码可以放在任何位置，但不影响网页布局之用-->  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>

Copier après la connexion

L'effet suivant apparaîtra :

Le calque avec position:fixed aura toujours la tête baissée même si la barre de défilement est abaissée :

Ce qui précède à propos de la "Barre de navigation" " Couche Les deux lignes de code avec la couche "Annonce" peuvent être placées n'importe où sans affecter la mise en page Web. Ensuite, tout le code de la page web évolue vers ce qui suit :

  
  
  
  
p  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
<p style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游离于体系之外</p>  
<p style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游离于体系之外</p>  
<!--下面两个图层，只是为了说明上面两行代码可以放在任何位置，但不影响网页布局之用-->  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>