search

Home  >  Article  >  Web Front-end  >  How to use CSS Positions layout to create responsive web pages

How to use CSS Positions layout to create responsive web pages

王林
王林Original
2023-09-29 20:10:58717browse

如何使用CSS Positions布局打造响应式网页

How to use CSS Positions layout to create a responsive web page

In today's mobile Internet era, responsive web design has become an essential skill. By using CSS Positions layout, we can easily implement a responsive web page so that the web page can automatically adapt to different screen sizes. This article will introduce how to use CSS Positions layout to create a responsive web page, and provide some specific code examples for reference.

1. Understand CSS Positions layout

Before we begin, we need to have a certain understanding of CSS Positions layout. CSS Positions layout mainly contains four types: static (default value), relative (relative positioning), absolute (absolute positioning) and fixed (fixed positioning).

  1. Static (default): The element's position is static and will not be affected by other elements.
  2. Relative (relative positioning): The element is positioned relative to its normal position. Relative position can be controlled through the top, right, bottom and left attributes.
  3. Absolute (absolute positioning): The element is positioned relative to its parent element, or relative to the document if there is no parent element. The absolute position can be controlled through the top, right, bottom and left attributes.
  4. Fixed (fixed positioning): The element is positioned relative to the browser window and is always fixed at the specified position. Similar to absolute positioning, fixed position can be controlled through the top, right, bottom and left attributes.

2. Use CSS Positions layout to create a responsive web page

Below we will use an example to demonstrate how to use CSS Positions layout to create a responsive web page. We will create a page with a title and three content blocks.

  1. HTML structure
<!DOCTYPE html>
<html>
<head>
    <title>响应式网页布局</title>
    <style>
        /* 在此处添加CSS样式 */
    </style>
</head>
<body>
    <header>
        <h1>响应式网页布局示例</h1>
    </header>
    <section id="content1">
        <h2>内容块1</h2>
        <p>这是内容块1的内容...</p>
    </section>
    <section id="content2">
        <h2>内容块2</h2>
        <p>这是内容块2的内容...</p>
    </section>
    <section id="content3">
        <h2>内容块3</h2>
        <p>这是内容块3的内容...</p>
    </section>
</body>
</html>
  1. CSS style
/* 基本布局 */
body {
    margin: 0;
    padding: 0;
}

header {
    background-color: #f5f5f5;
    padding: 20px;
    text-align: center;
}

section {
    padding: 20px;
    text-align: center;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

/* 响应式布局 */
@media screen and (min-width: 768px) {
    /* 横向排列 */
    section {
        display: inline-block;
        width: calc(33.33% - 20px);
    }
}

@media screen and (max-width: 767px) {
    /* 垂直排列 */
    section {
        display: block;
        width: 100%;
    }
}

The above code will create a page containing a title and three content blocks , and implements responsive layout in different screen sizes. Under a large screen (width greater than or equal to 768px), the three content blocks will be arranged horizontally, each occupying 1/3 of the screen width; under a small screen (width less than 768px), the three content blocks will be arranged vertically, each occupying 1/3 of the screen width. the entire screen width.

3. Summary

By using CSS Positions layout, we can easily implement a responsive web page. This article provides a specific code example based on CSS Positions layout. By modifying the style code, the page layout can be further customized and optimized. I hope this article will help you understand and use CSS Positions layout to create responsive web pages.

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

css html Static
Statement：
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
Previous article：CSS Positions layout and mobile web development skillsNext article：CSS Positions layout and mobile web development skills

Related articles

See more