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

Home

Web Front-end

CSS Tutorial

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

王林

Sep 28, 2023 am 08:17 AM

Web Design css positions layout card layout

如何使用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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7493

CakePHP Tutorial

1377

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

Revealing the unique advantages of absolute positioning in web design Jan 23, 2024 am 08:16 AM

Explore the unique advantages of absolute positioning in web design. In web design, absolute positioning is a commonly used layout method. By using absolute positioning, elements can be placed precisely at specified locations on the web page, and some special layout effects can be easily achieved. This article explores these advantages and illustrates them with specific code examples. Precise positioning of elements Absolute positioning allows precise control of the position of elements on a web page. By specifying the top, right, bottom, and left attributes of the element, the element can be

How to create a card layout page using HTML and CSS Oct 27, 2023 pm 12:30 PM

How to create a card layout page using HTML and CSS In web design, card layout has become a very popular design trend. It displays information in the form of cards, making the page look clean, intuitive, and easy to navigate. In this article, I will introduce you to how to use HTML and CSS to create a simple card layout page, and provide specific code examples. Step 1: Create HTML Structure First, we need to create the basic structure of HTML. Here is a simple example code: &

Web design skills and practical experience sharing based on CSS3 Sep 08, 2023 pm 07:07 PM

Sharing of web design skills and practical experience based on CSS3 In today's Internet era, web design is becoming more and more important. With the advent of CSS3, designers can now use a variety of stunning effects to engage users. This article will share some web design skills and practical experience based on CSS3, aiming to help readers improve their web design level. 1. Use transition effects. Transition effects can produce smooth animation effects for elements from one state to another. By using the CSS3 transition property, we can

Study the impact of introducing CSS third-party frameworks on web design Jan 16, 2024 am 10:32 AM

Exploring the impact of the introduction of third-party frameworks into CSS on web design Introduction: With the rapid development of the Internet, web design has become increasingly important. In order to improve user experience and provide richer functions, developers often need to use third-party frameworks to assist design and development. This article will explore the impact of introducing CSS third-party frameworks on web design and give specific code examples. 1. What is CSS third-party framework? CSS third-party framework is a set of predefined CSS styles and components that can be called directly when building a web page. These frameworks are rich in content,

CSS3 animation brings creative inspiration and unlimited possibilities to web designers Sep 09, 2023 pm 08:45 PM

Overview of the creative inspiration and unlimited possibilities that CSS3 animation brings to web designers: In modern web design, animation effects have become an important factor in improving user experience and increasing website attractiveness. The emergence of CSS3 animation technology has brought more flexible, rich and creative design options to web designers. This article will explore the creative inspiration and unlimited possibilities that CSS3 animation brings to web designers, and provide some code examples. 1. Basic concepts and syntax of CSS3 animation. Before introducing CSS3 animation, we first need to

How to use CSS Positions layout to design card layout for web pages Sep 28, 2023 am 08:17 AM

How to use CSSPositions 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 CSSPositions layout to design the card layout of a web page, and attach specific code examples. Create the HTML structure First, we need to create the HTML structure to represent the card layout.

Application fields of element selectors in web design Jan 13, 2024 am 10:35 AM

The application of element selectors in web design requires specific code examples. In web design, element selectors are a very important CSS selector, which can help us control and adjust the styles of elements in web pages. By flexibly using element selectors, various exquisite web design effects can be achieved. 1. Basic syntax and usage of element selectors The element selector is the simplest type of CSS selector. It selects the corresponding element by specifying the tag name of the HTML element. The basic syntax of the element selector is: tag name {

How to use CSS Positions layout to achieve deep positioning of web pages Sep 28, 2023 am 10:45 AM

How to use CSSPositions layout to achieve depth positioning of web pages. In web design, depth positioning is an important technical means that can help us accurately position and layout elements. By using the Positions property of CSS, we can position elements outside the document flow to achieve a more flexible and precise layout effect. This article will introduce how to use CSSPositions layout to achieve deep positioning of web pages, and provide specific code examples. The Positions property includes four values:

See all articles