1. Créer une barre de menu horizontale
1.1 Créer une simple barre de menu horizontale avec un lien hypertexte
attribut display
L'attribut display spécifie si/comment l'élément est affiché.
Chaque élément HTML a une valeur d'affichage par défaut, en fonction de son type d'élément. La valeur d'affichage par défaut pour la plupart des éléments est block ou inline.
block : la méthode par défaut pour les éléments de niveau bloc
inline : la méthode par défaut pour les éléments en ligne
indice: Vous pouvez masquer la barre de navigation via la valeur d'attribut none et la modifier pour bloquer via JS pour l'affichage.
Éléments de niveau bloc : occupent toute la largeur horizontale ;
éléments en ligne : occupent la largeur restante.
La réalisation de la barre horizontale consiste à transformer les éléments en ligne en une barre de navigation horizontale.
Remplacer la valeur d'affichage par défaut :
comme mentionné précédemment, chaque élément a une valeur d'affichage par défaut. Cependant, vous pouvez le remplacer.
Changer les éléments en ligne en éléments de bloc, et vice versa, est utile pour faire apparaître les pages d'une certaine manière tout en respectant les normes Web.
Un exemple courant est la génération <li>d'éléments en ligne pour les menus horizontaux :
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>把链接列表显示为水平导航栏：</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
Extension : utilisez floatla barre horizontale, voir ci-dessous.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
1.2 Masquer la barre de menu
- Les éléments peuvent être masqués en définissant
displayl'attribut sur aucun. L'élément sera caché et la page sera affichée comme si l'élément n'était pas là : visibility:hidden; peut également masquer des éléments. Cependant, l'élément occupera toujours le même espace qu'auparavant. L'élément sera masqué, mais affectera toujours la mise en page :
Combinez js et css pour masquer et afficher la barre de menu :
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">点击这里来显示面板</p>
<div id="panel">
<p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p>
<p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p>
<p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p>
<p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>
Résumer:
| Les attributs | décrire |
|---|---|
| afficher | Spécifie comment l'élément doit être affiché. |
| visibilité | Spécifie si l'élément doit être visible. |
1.3 Centrer la barre de menu
Dans les feuilles de style en cascade, utilisez margin:auto.
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
2. Positionnement
2.1 attribut de position
positionAttributs : L'attribut position spécifie le type de méthode de positionnement appliqué à l'élément.
Il existe cinq valeurs de position différentes :
static: Les éléments positionnés statiquement ne sont pas affectés par les propriétés top, bottom, left et right. L'élément box est généré normalement. Les éléments de niveau bloc génèrent une boîte rectangulaire dans le cadre du flux de documents, tandis que les éléments en ligne créent une ou plusieurs boîtes de ligne à placer dans leur élément parent.
relative: Positions par rapport à sa position normale. Définir les propriétés haut, droite, bas et gauche d'un élément relativement positionné entraînera son ajustement par rapport à sa position normale.Le reste du contenu n'est pas ajusté pour s'adapter à l'espace laissé par l'élément. L'élément box est décalé d'une certaine distance. L'élément conserve sa forme non positionnée et l'espace qu'il occupait à l'origine est conservé.
absolute: L'élément est positionné par rapport à la position la plus proche 祖先元素(plutôt que par rapport à la fenêtre, comme dans fixe). L'élément box est complètement supprimé du flux de documents et positionné par rapport à son bloc conteneur. Le bloc conteneur peut être un autre élément du document ou le bloc conteneur initial. L'espace que l'élément occupait auparavant dans le flux de documents normal est fermé comme si l'élément n'existait pas. L'élément est positionné pour générer une boîte au niveau du bloc, quel que soit le type de boîte qu'il a généré à l'origine dans le flux normal.
Cependant, si un élément en position absolue n'a pas d'ancêtres, il utilisera le corps du document et se déplacera avec le défilement de la page.
Remarque : Un élément "positionné" est tout élément dont la position n'est pas statique. Il est souvent utilisé pour
relativedéterminer le bloc de contenu etabsolutemodifier le contenu à l'intérieur.
fixed: les éléments sont positionnés par rapport à la fenêtre, ce qui signifieIl est toujours à la même position même lorsque la page défile. Les propriétés top, right, bottom et left permettent de positionner cet élément. Les éléments à position fixe ne laissent aucun espace sur la page où ils seraient normalement placés.
Notez la différence
fixedetsticky
sticky:ÉlémentsPositionnement basé sur la position de défilement de l'utilisateur.
Les éléments collants basculent entre relatif et fixe en fonction de la position de défilement. Au début, il sera relativement positionné jusqu'à ce que le décalage donné soit rencontré dans la fenêtre - puis il sera "collé" en place (par exemple position:fixed).
Remarque : Safari nécessite le préfixe -webkit- (voir l'exemple ci-dessous). Vous devez également spécifier au moins l'un des éléments suivants : haut, droite, bas ou gauche pour que le positionnement collant fonctionne.
positionnement relatifUn indice : le positionnement relatif est en fait considéré comme faisant partie du modèle de positionnement du flux normal, car la position de l'élément est relative à sa position dans le flux normal. Décalage un peu de la position normale du flux.
positionnement absoluAstuce : étant donné que les blocs positionnés de manière absolue n'ont rien à voir avec le flux de documents, ils peuvent recouvrir d'autres éléments de la page.z-indexL'ordre d'empilement de ces boîtes peut être contrôlé en définissant la propriété.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Les éléments sont en fait positionnés à l'aide des propriétés top, bottom, left et right. Cependant, ces propriétés n'auront aucun effet à moins que la propriété de position ne soit d'abord définie. Selon la valeur de la position, ils fonctionnent différemment.
2.2 Mécanisme de positionnement CSS
CSS a trois mécanismes de positionnement de base : flux normal, flottants et positionnement absolu.
- Toutes les boîtes sont positionnées en flux normal sauf indication contraire. Autrement dit, la position d'un élément dans le flux normal est déterminée par la position de l'élément dans (X)HTML.
- Les boîtes de niveau bloc sont disposées les unes après les autres de haut en bas, et la distance verticale entre les boîtes est calculée par la marge verticale de la boîte.
- Les boîtes en ligne sont disposées horizontalement dans une rangée. Ils peuvent être espacés à l'aide d'un rembourrage horizontal, de bordures et de marges. Cependant, le remplissage vertical, les bordures et les marges n'affectent pas la hauteur de la boîte en ligne. Une boîte horizontale formée par une ligne est appeléeBoîte de ligne, la hauteur d'une boîte de ligne est toujours suffisamment grande pour contenir toutes les boîtes en ligne qu'elle contient. Cependant, le réglage de la hauteur de ligne peut augmenter la hauteur de cette boîte.
2.3 Découpage d'élément
Pour l'élément affiché seul, clip: rect(0px,60px,200px,0px);l'élément est découpé, seule la forme de la taille spécifiée est affichée et la taille de l'élément d'origine ne sera pas déformée.
2.4 Chevauchement ou cascade
- Lorsque des éléments sont positionnés, ils peuvent chevaucher d'autres éléments. L'attribut z-index spécifie l'ordre d'empilement des éléments (quel élément doit être placé devant ou derrière les autres éléments).
- Les éléments peuvent être définis positifs ou négatifsordre d'empilement: Comme l'image a un z-index de -1, elle est positionnée derrière le texte.
- Les éléments avec un ordre d'empilement supérieur précèdent toujours les éléments avec un ordre d'empilement inférieur.
Remarque : Si deux éléments positionnés se chevauchent sans spécifier de z-index, le dernier élément du code HTML sera affiché en haut.
- balise img : un élément de bloc en ligne. Semblable à inline-block peut être enveloppé par des balises p.
<p><img src="1.jpg"></p>Par exemple, p est centrémargin:autoet l'image est également centrée.- balise p : élément de niveau bloc, la largeur par défaut occupe une ligne.
Résumé :
| Les attributs | décrire |
|---|---|
| bas | Définit le bord de la marge inférieure de la boîte positionnée. |
| agrafe | Clipser les éléments absolument positionnés. |
| gauche | Définit le bord de la marge gauche de la boîte positionnée. |
| position | Spécifie le type de positionnement de l'élément. |
| droite | Définit le bord droit de la marge de la boîte positionnée. |
| haut | Définit le bord supérieur de la marge de la boîte positionnée. |
| indice z | Définit l'ordre d'empilement des éléments. |
3. Débordement
overflowL'attribut spécifie s'il faut découper le contenu ou ajouter une barre de défilement lorsque le contenu de l'élément est trop volumineux pour tenir dans la zone spécifiée. Les valeurs suivantes peuvent être définies :
visible- défaut. Le débordement n'est pas coupé. Le contenu est rendu en dehors de la boîte de l'élémenthidden- le débordement est tronqué et le reste du contenu ne sera pas visiblescroll- le débordement est écrêté lors de l'ajout d'une barre de défilement pour voir le resteauto- Similaire au défilement, mais n'ajoute des barres de défilement que si nécessaire
Remarque : La propriété overflow ne s'applique qu'aux éléments de bloc avec la hauteur spécifiée. De manière générale, vous n'avez pas besoin de définir une hauteur fixe lorsque vous créez un site Web comme Taobao, car vous ne connaissez pas la taille et la hauteur des images commerciales explorées, ainsi que la longueur du texte. défini, et il peut être adapté de manière flexible en fonction du contenu.
| Les attributs | décrire |
|---|---|
| débordement | Spécifie ce qui se passe si le contenu déborde de la boîte de l'élément. |
| débordement-x | Spécifie comment gérer les bords gauche/droit du contenu si la zone de contenu de l'élément déborde. |
| débordement-y | Spécifie comment gérer les bords supérieur/inférieur du contenu si la zone de contenu de l'élément déborde. |
4. Flottez pour obtenir du texte entouré d'images
float Les attributs spécifient comment les éléments sont flottants. Utilisé pour positionner et formater le contenu, le flottement entraînera la rupture de l'élément avec le flux de documents, ce qui équivaut à flotter au-dessus du flux de documents, et d'autres éléments le compléteront. L'une des valeurs suivantes peut être définie :
left- L'élément flotte à gauche de son conteneurright- L'élément flotte à droite de son conteneurnone- l'élément ne flottera pas (il apparaîtra là où il vient d'apparaître dans le texte),Valeurs par défautinherit- L'élément hérite de la valeur flottante de son parent
Remarque : Toutes les propriétés liées au flotteur
| Les attributs | décrire |
|---|---|
| dimensionnement de la boîte | Définit comment la largeur et la hauteur des éléments sont calculées : s'ils doivent inclure le rembourrage et les bordures. |
| clair | Spécifie quels éléments peuvent flotter à côté de l'élément en cours d'effacement et de quel côté. |
| flotter | Spécifie comment l'élément doit être flottant. |
| débordement | Spécifie ce qui se passe si le contenu déborde de la boîte de l'élément. |
| débordement-x | Spécifie comment gérer les bords gauche/droit du contenu lors du débordement de la zone de contenu de l'élément. |
| débordement-y | Spécifie comment gérer les bords supérieur/inférieur du contenu lors du débordement de la zone de contenu de l'élément. |
L'utilisation la plus simple est que l'attribut float peut obtenir l'effet (sur un journal) du texte entourant une image.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h1>向右浮动</h1>
<p>在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>
<p><img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="海贼王" style="width:220px;height:170px;margin-left:15px;">
《海贼王》是一部热血漫。 传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”,许多人为了争夺“ONE PIECE”,争相出海,许多海贼开始树立霸权,而形成了“大海贼时代”。十年后,蒙其·D·路飞为了要实现与因救他而断臂的‘红发’香克斯的约定而出海,并在快乐的航海中拥有了一群值得信赖的伙伴,一起进入“伟大航道”,目标当上“海贼王”。每个伙伴都有自己的梦想,自由,友情,梦想是它的主题!</p>
</body>
</html>
Remarque :
1. La réalisation de l'effet surround est basée sur la définition d'une étiquette en ligne dans l'étiquette de bloc, l'étiquette en ligne flotte et le contenu de l'étiquette de bloc entourera l'image, comme illustré dans la figure ci-dessus.
2. S'il est défini dans deux boîtes de ligne (bordures en ligne), l'une des lignes flottantes couvrira l'autre boîte de ligne.
3. Les propriétés CSSclearspécifient quels éléments peuvent flotter à côté de l'élément effacé et de quel côté.
5. Réalisez la formation de descriptions de texte sur les images et la formation d'un affichage de style carte
Notes sur la prémisse :
1. Pour obtenir le texte apparaissant sur l'image au lieu d'au-dessus, l'utilisation z-indexd'attributs ne peut pas directement atteindre l'objectif, car z-index ne contrôle que l'élémentHiérarchie verticale[C'est-à-dire que celui qui est affiché en premier sur le calque supérieur, mais ne peut pas former un bloc approprié, il occupera toute une rangée de cadres de ligne], ne peut pas affecter la position de l'élément dans la direction horizontale.
2. L'élément parent est défini pour flotter. Le but principal est de faire en sorte que l'image et le texte soient disposés dans la même ligne ou colonne, et le texte peut être affiché en haut ou en bas ou à gauche ou à droite de l'image, afin d'obtenir un certain effet de mise en page. Dans le même temps, le flottement permet d'organiser étroitement d'autres contenus autour d'images et de texte, ce qui rend la mise en page de la page plus compacte et plus belle. Vous pouvez utiliser des flottants pour afficher du texte sur des images, mais vous devez faire attention à certains détails.
3. Réalisez que le texte apparaît sur l'image.
- besoin d'être dansimageSuperposer unélément de texte, et définissez son
positionattribut sur absolu ou relatif [l'élément parent est défini sur relatif, et l'élément de texte à l'intérieur est de préférence défini sur absolu, ce qui n'est pas facile à déformer dans ce bloc], afin qu'il puisse être positionné par rapport à l'image , puis via les attributs top, left , right, bottom pour contrôler la position du texte.
Procédez comme suit:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.float {
float: left;
position: relative; /*添加position:relative*/
}
.caption {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.container {
float: left;
position: relative;
}
.text {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="float">
<img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="pptssjx.jpg" style="width:220px;height:170px;margin-left:15px;">
<div class="caption">这里是文字说明</div>
</div>
<div class="container">
<div class="text">这是要显示在图片上的文字</div>
<img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="pptssjx.jpg" style="width:220px;height:170px;margin-left:15px;">
</div>
</body>
</html>
Six flotteurs transparents
6.1 Résoudre le problème de la couleur de fond flottante
Pour empêcher la boîte de ligne de s'enrouler autour de la boîte flottante, vous devez appliquer clearune propriété à la boîte. clear La valeur de l'attribut peut être left, right, both ou none,Il indique quels côtés de la boîte ne doivent pas toucher la boîte flottante。
Éléments environnants (couleur de fond, etc.) Éléments flottants environnants :
Remarque :
- Un nouveau problème se pose, car il n'y a pas d'élément existant sur lequel appliquer le nettoyage, nous ne pouvons donc qu'ajouter un élément vide et le nettoyer, comme indiqué dans l'image ci-dessus. Dans l'élément parent html ajouter
<div class="clear"></div>
.clear {
clear: both;
}
- Il existe un autre moyen, qui consiste à faire flotter la div du conteneur. Malheureusement, l'élément suivant est affecté par cet élément flottant. Pour contourner ce problème, certaines personnes choisissent de tout flotter dans la mise en page, puis de nettoyer ces flotteurs avec des éléments significatifs appropriés (souvent le pied de page du site). Cela permet de réduire ou d'éliminer les balises inutiles.
| valeur | décrire |
|---|---|
| gauche | Les éléments flottants ne sont pas autorisés à gauche. |
| droite | Les éléments flottants ne sont pas autorisés à droite. |
| les deux | Les éléments flottants ne sont pas autorisés à gauche ou à droite. |
| aucun | Valeurs par défaut. Permet aux éléments flottants d'apparaître des deux côtés. |
| tu hérites | Spécifie que la valeur de l'attribut clear doit être héritée de l'élément parent. |
6.2 Résoudre le problème de débordement causé par le non réglage de la hauteur (similaire au problème ci-dessus)
Si un élément est plus grand que l'élément qui le contient et qu'il flotte, il "débordera" à l'extérieur de son conteneur. Nous pouvons alors résoudre ce problème en ajoutant overflow: auto; à l'élément conteneur :
.clearfix {
overflow: auto;
}
clearfix hack pour gérer le flux de mise en page. overflow: auto clearfix Fonctionne bien tant que vous contrôlez les marges et le rembourrage (sinon vous pourriez voir des barres de défilement) . Cependant, la nouvelle technique de hack clearfix moderne est beaucoup plus sûre à utiliser, le code suivant est utilisé sur la plupart des sites Web :
/* 写在父标签内。*/
.clearfix::after {
content: "";
clear: both;
display: table;
}
6.3 Quatre façons de supprimer le flottant
1. Ajoutez de la hauteur à la zone d'étiquette parente pour éviter que la hauteur ne s'effondre
.father {
width: 100%;
border: 2px solid red;
height: 300px;
}
2. Ajouter une étiquette vide
.box {
width: 100%;
height: 300px;
}
.clear {
clear: both;
Ajoutez une balise vide du même niveau sous la mise en page écrite et ajoutez la classe ci-dessus dans la balise vide.
3. Ajoutez l'attribut overflow au parent
Ajouter à la balise parent overflow: hidden;
4. Ajouter un pseudo-élément after au parent
Le principe de cette méthode est le même que celui de la méthode des balises supplémentaires, sauf qu'un élément de niveau bloc est ajouté derrière la boîte parent de l'élément flottant en utilisant une pseudo-classe.
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
7. Utilisez le flottement pour obtenir la mise en page [disposition en grille]
Vous pouvez facilement créer trois flotteurs côte à côte. Cependant, lorsque vous ajoutez quelque chose qui augmente la largeur de chaque boîte (par exemple, un remplissage ou des bordures), les boîtes se cassent. La propriété box-sizing nous permet d'inclure un rembourrage et des bordures dans la largeur (et la hauteur) globale de la boîte, en s'assurant que le rembourrage reste à l'intérieur de la boîte sans se casser.
En termes simples : si box-sizing : border-box ; est défini sur un élément, la largeur et la hauteur incluront le rembourrage et les bordures
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
padding: 50px; /* 如果需要在图片间增加间距 */
}
Extension 1 : Grid布局
Grid layout est un module CSS pour la mise en page de pages Web, qui fournit un moyen puissant de positionner et d'aligner des éléments à l'intersection de lignes et de colonnes. La disposition en grille permet aux développeurs de définir et de distribuer des éléments sur une page Web dans une grille bidimensionnelle, au lieu d'être disposés dans une direction le long de l'axe horizontal ou vertical comme les méthodes de disposition traditionnelles. Cela permet aux développeurs de contrôler plus finement la position et la taille des éléments sur la page Web, obtenant ainsi des effets de mise en page plus complexes et diversifiés.
La disposition de la grille est définie parconteneur de grille(Grid Container) etélément de grille(élément de grille) pour fonctionner. Un conteneur de grille est un élément qui contient des éléments de grille, définis comme une boîte avec la propriété display définie sur grid ou inline-grid. Les éléments de grille sont des éléments enfants dans le conteneur de grille, ils sont placés dans des cellules de la grille et peuvent s'étendre sur plusieurs cellules.
La disposition Grille fournit une série de propriétés pour contrôler les lignes et les colonnes de la grille, notamment , grid-template-rows, grid-template-columns, grid-template-areas, grid-row, grid-column, grid-row-start, grid-row-end, grid-column-startetc. grid-column-endEn définissant ces propriétés, les développeurs peuvent définir le nombre, la taille et l'espacement des lignes et des colonnes de la grille, et peuvent placer les éléments de la grille dans des cellules spécifiques.
En général, la mise en page en grille est une méthode de mise en page flexible et puissante, qui offre aux développeurs plus de contrôle et de liberté, ce qui rend la mise en page des pages Web plus diversifiée et raffinée.
Voici les attributs communs de la disposition en grille et leurs fonctions :
| Les attributs | effet |
|---|---|
| grille-modèle-colonnes/grille-modèle-lignes | Définit la taille de colonne/ligne et le nombre de conteneurs de grille. |
| zones de modèle de grille | Définit la disposition des régions dans un conteneur de grille. |
| grille-ligne/grille-colonne | Spécifie la position de ligne/colonne de l'élément de grille. |
| grille-ligne-début/grille-ligne-fin/grille-colonne-début/grille-colonne-fin | Spécifie la position de ligne/colonne où les éléments de la grille commencent et se terminent. |
| grille-colonne-espace/grille-ligne-espace | Définit l'espacement entre les lignes/colonnes de la grille. |
| justifier-éléments/aligner-éléments | Contrôle l'alignement des éléments de la grille sur les lignes/colonnes. |
| justifier-contenu/aligner-contenu | Contrôle l'alignement de la grille sur les lignes/colonnes, utilisé lorsque la taille du conteneur de la grille est supérieure au contenu de la grille. |
| grille-auto-lignes/grille-auto-colonnes | Définit la taille des lignes/colonnes qui ne sont pas explicitement dimensionnées dans le conteneur de grille. |
| grille-flux automatique | Définit l'orientation et l'ordre des éléments de grille qui sont automatiquement placés dans le conteneur de grille. |
| modèle de grille | Définit la taille des colonnes/lignes et le nombre de conteneurs de grille, ainsi que la disposition des zones de grille. |
| zone de grille | Spécifie la taille et la position de l'élément de grille et donne également à l'élément un nom à utiliser dans les zones de modèle de grille. |
| commande | Définit l'ordre des éléments de grille dans le conteneur de grille. |
| indice z | Définit l'ordre des éléments de la grille dans l'ordre d'empilement de la grille, avec un effet d'empilement. |
Extension 2 : Faire un cadre élastique, apprenez Flexbox 布局 en cliquant ici
8. Créer un site Web à l'aide de flotteurs
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<ul class="topmenu">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="clearfix">
<div class="column sidemenu">
<ul>
<li><a href="#flight">The Flight</a></li>
<li><a href="#city" class="active">The City</a></li>
<li><a href="#island">The Island</a></li>
<li><a href="#food">The Food</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#history">The History</a></li>
<li><a href="#oceans">The Oceans</a></li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Shanghai</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
Supplément : règles d'imbrication des balises
La plupart des balises peuvent être imbriquées librement, mais il existe également des règles spéciales, par exemple : les balises de niveau bloc telles que les balises p et les balises div ne peuvent pas être imbriquées dans les balises p.
1. Règles d'imbrication des éléments de niveau bloc
① Éléments spéciaux <p>、<h1> ~ <h6>、<dt>de niveau bloc
Ces éléments ont des règles spéciales : ces balises ne peuvent pas imbriquer d'éléments de niveau bloc, seuls les éléments en ligne ou les éléments de bloc en ligne peuvent être imbriqués, même si nous donnons des éléments de niveau bloc. display: inline ne fonctionne pas non plus.
Si nous imbriquons des éléments de niveau bloc dans ces éléments spéciaux, le navigateur analysera les deux balises avant et après l'élément en deux paires de balises. Pour le moment, le style que nous avons défini pour l'élément ne peut pas être appliqué à l'élément imbriqué.