How to use CSS Positions layout to design card layout for web pages-CSS Tutorial-php.cn

How to use CSS Positions layout to design card layout for web pages

王林

Release： 2023-09-28 08:17:15

Original

1555 people have browsed it

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

How to use CSS Positions layout to design card layout for web pages

In web design, card layout is a common and popular design method. It divides the content into independent cards, each card contains certain information, and can easily create a neat and layered page effect. In this article, we will introduce how to use CSS Positions layout to design the card layout of a web page, and attach specific code examples.

Create HTML structure

First, we need to create HTML structure to represent the card layout. The following is a simple example:

<!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>

Copy after login

In the above code, we use a container div (class="card-container") containing multiple cards, and each card is an independent div element ( class="card"), which contains the title and content.

CSS Style

Next, we need to use CSS styles to control the card layout. We will use the CSS Positions property to position the card.

.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);
}

Copy after login

In the above code, we use flex layout (display: flex) to center the card horizontally (justify-content: center).

The card style includes width and height (width and height), background color (background-color), outer margin (margin) and inner margin (padding), and border radius (border-radius) and Shadow (box-shadow), etc.

Use relative positioning

If we want the card to be freely positioned at different positions within the container, we can use relative positioning (position: relative) to achieve this.

.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;
}

Copy after login

In the above code, we set the position attribute of each card to relative. Then use the top and left properties to specify the position of each card relative to the container.

For example, the first card uses the :first-child pseudo-class selector to set its position relative to the container to be up (top: -100px) and left (left: -100px). The second card uses the :nth-child(2) pseudo-class selector to set its position relative to the container to down (top: 50px) and right (left: 50px). The third card uses the :nth-child(3) pseudo-class selector to set its position relative to the container to down (top: 200px) and right (left: 200px).

Use absolute positioning

If we want the card to be positioned at a fixed position within the container without being affected by other elements, we can use absolute positioning (position: absolute )to fulfill.

.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;
}

Copy after login

In the above code, we set the position property of the container to relative. And set the position property of each card to absolute. Then use the top, right, bottom, and left properties to specify the position of each card relative to the container.

For example, the first card uses the :nth-child(1) pseudo-class selector to set its position relative to the container to the upper left corner (top: 0, left: 0). The second card uses the :nth-child(2) pseudo-class selector to set its position relative to the container to the upper right corner (top: 0, right: 0). The third card uses the :nth-child(3) pseudo-class selector and sets its position relative to the container to the lower right corner (bottom: 0, right: 0).

Summary:

Using CSS Positions layout to design the card layout of a web page is a simple and powerful method. By using different positioning methods, we can achieve free or fixed positioning of the card on the page. With reasonable layout structure and style settings, we can easily create beautiful, hierarchical card layouts.

I hope the code examples in this article can help you better understand and apply CSS Positions layout to design card layout, and bring more inspiration and creativity to your web design.

The above is the detailed content of How to use CSS Positions layout to design card layout for web pages. For more information, please follow other related articles on the PHP Chinese website!