Maison > Article > interface Web > Comment utiliser la mise en page CSS Positions pour concevoir la mise en page des cartes pour les pages Web

Comment utiliser la mise en page CSS Positions pour concevoir la mise en page des cartes pour les pages Web

王林original: 2023-09-28 08:17:151507parcourir

如何使用CSS Positions布局设计网页的卡片布局

Comment utiliser la disposition des positions CSS pour concevoir la disposition des cartes pour les pages Web

Dans la conception Web, la disposition des cartes est une méthode de conception courante et populaire. Il divise le contenu en cartes indépendantes, chaque carte contient certaines informations et peut facilement créer un effet de page soigné et superposé. Dans cet article, nous présenterons comment utiliser la disposition des positions CSS pour concevoir la disposition des cartes d'une page Web et joindrons des exemples de code spécifiques.

Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML pour représenter la disposition de la carte. Voici un exemple simple :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="card-container">
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
  </div>
</body>
</html>

Dans le code ci-dessus, nous utilisons un conteneur div (class="card-container") qui contient plusieurs cartes, et chaque carte est un élément div indépendant (class="card "), qui contient le titre et le contenu.

Styles CSS

Ensuite, nous devons utiliser les styles CSS pour contrôler la disposition de la carte. Nous utiliserons la propriété CSS Positions pour positionner la carte.

.card-container {
  display: flex;
  justify-content: center;
}

.card {
  width: 300px;
  height: 200px;
  background-color: #F2F2F2;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

Dans le code ci-dessus, nous utilisons la disposition flex (display : flex) pour centrer la carte horizontalement (justify-content : center).

Le style de la carte comprend la largeur et la hauteur (largeur et hauteur), la couleur d'arrière-plan, la marge et le remplissage, ainsi que le rayon de bordure et l'ombre (ombre de boîte), etc.

Utiliser le positionnement relatif

Si nous voulons que la carte soit positionnée librement à différents endroits du conteneur, nous pouvons utiliser le positionnement relatif (position : relative) pour y parvenir.

.card {
  position: relative;
}

.card:first-child {
  top: -100px;
  left: -100px;
}

.card:nth-child(2) {
  top: 50px;
  left: 50px;
}

.card:nth-child(3) {
  top: 200px;
  left: 200px;
}

Dans le code ci-dessus, nous définissons la propriété position de chaque carte sur relative. Utilisez ensuite les propriétés top et left pour spécifier la position de chaque carte par rapport au conteneur.

Par exemple, la première carte utilise le sélecteur de pseudo-classe :first-child pour définir sa position par rapport au conteneur comme étant en haut (en haut : -100px) et à gauche (à gauche : -100px). La deuxième carte utilise le sélecteur de pseudo-classe :nth-child(2) pour définir sa position par rapport au conteneur vers le bas (en haut : 50 px) et vers la droite (à gauche : 50 px). La troisième carte utilise le sélecteur de pseudo-classe :nth-child(3) pour définir sa position par rapport au conteneur vers le bas (en haut : 200 px) et vers la droite (à gauche : 200 px).

Utiliser le positionnement absolu

Si nous voulons que la carte soit positionnée à une position fixe dans le conteneur sans être affectée par d'autres éléments, nous pouvons utiliser le positionnement absolu (position : absolue) pour y parvenir.

.card-container {
  position: relative;
}

.card {
  position: absolute;
}

.card:nth-child(1) {
  top: 0;
  left: 0;
}

.card:nth-child(2) {
  top: 0;
  right: 0;
}

.card:nth-child(3) {
  bottom: 0;
  right: 0;
}

Dans le code ci-dessus, nous définissons la propriété position du conteneur sur relative. Et définissez la propriété position de chaque carte sur absolue. Utilisez ensuite les propriétés top, right, bottom et left pour spécifier la position de chaque carte par rapport au conteneur.

Par exemple, la première carte utilise le sélecteur de pseudo-classe :nth-child(1) pour définir sa position par rapport au conteneur dans le coin supérieur gauche (en haut : 0, à gauche : 0). La deuxième carte utilise le sélecteur de pseudo-classe :nth-child(2) pour définir sa position par rapport au conteneur dans le coin supérieur droit (en haut : 0, à droite : 0). La troisième carte utilise le sélecteur de pseudo-classe :nth-child(3) et définit sa position par rapport au conteneur dans le coin inférieur droit (en bas : 0, à droite : 0).

Résumé :

Utiliser la mise en page CSS Positions pour concevoir la mise en page des cartes d'une page Web est une méthode simple et puissante. En utilisant différentes méthodes de positionnement, nous pouvons obtenir un positionnement libre ou fixe de la carte sur la page. Avec une structure de mise en page et des paramètres de style raisonnables, nous pouvons facilement créer de belles mises en page de cartes hiérarchiques.

J'espère que les exemples de code de cet article pourront vous aider à mieux comprendre et appliquer la disposition des positions CSS pour concevoir la disposition des cartes, et apporter plus d'inspiration et de créativité à votre conception Web.

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!

css html class 选择器外边距内边距 display position margin padding border 伪类 background flex

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'application de la disposition élastique CSS Flex dans l'affichage d'images réactifArticle suivant：Explication détaillée de l'application de la disposition élastique CSS Flex dans l'affichage d'images réactif

Articles Liés

Voir plus