使用 CSS Grid 展示宠物服务

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在「Pet's House」这个为宠物爱好者打造的虚拟世界中,网页开发者 Alex 开始了一项任务:使用 CSS Grid 重新设计他们的服务展示页面。

本实验的目标是通过以有序且视觉吸引人的方式呈现服务,来吸引用户。Alex 的任务是将「Display」部分转换为网格布局,以优雅且高效的方式突出宠物服务。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/AdvancedLayoutGroup -.-> css/grid_layout("`Grid Layout`") subgraph Lab Skills css/box_model -.-> lab-289077{{"`使用 CSS Grid 展示宠物服务`"}} css/margin_and_padding -.-> lab-289077{{"`使用 CSS Grid 展示宠物服务`"}} css/width_and_height -.-> lab-289077{{"`使用 CSS Grid 展示宠物服务`"}} css/display_property -.-> lab-289077{{"`使用 CSS Grid 展示宠物服务`"}} css/positioning -.-> lab-289077{{"`使用 CSS Grid 展示宠物服务`"}} css/grid_layout -.-> lab-289077{{"`使用 CSS Grid 展示宠物服务`"}} end

Position 属性

CSS 的 position 属性是一个强大的工具,允许开发者精确控制页面中元素的位置。它使元素能够基于其正常流、相对于父元素、相对于视口(viewport)或相对于最近的滚动祖先进行定位。

静态定位(Static Positioning)

static 是所有元素的默认值,意味着元素按照正常的文档流布局。静态定位的元素不受 toprightbottomleft 属性的影响。

当你希望元素遵循标准流时,静态定位是最佳选择。

例如,页面左侧有一个机器人图片,如果我们将该元素设置为 position:static,那么当我们滚动页面时,这张图片也会随着页面流滚动。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .full-page-img {
        width: 100%;
        margin-left: 15%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: static;
        top: 100px;
        left: 0;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <img src="robot.png" class="ad-l" />
    <div class="full-page-img">
      <img src="page.png" />
    </div>
  </body>
</html>
静态定位机器人示例
固定定位(Fixed Positioning)

fixed 定位将元素相对于浏览器窗口的视口进行定位。即使页面滚动,元素也会保持在相同的位置。

适用于制作固定在页面顶部或底部的导航栏。

例如,页面左侧有一个机器人图片,如果我们将该元素设置为 position:fixed,那么当我们滚动页面时,这张图片不会因为页面滚动而消失,图片会固定在某个位置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .full-page-img {
        width: 100%;
        margin-left: 15%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: fixed;
        top: 100px;
        left: 0;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <img src="robot.png" class="ad-l" />
    <div class="full-page-img">
      <img src="page.png" />
    </div>
  </body>
</html>
固定定位机器人示例
相对定位(Relative Positioning)

relative 定位允许你相对于元素的正常位置进行偏移。即使偏移,元素仍然占据其原始空间。

当你需要在不影响布局其他部分的情况下微调元素的位置时,可以使用相对定位。

例如,我们将页面左侧的机器人图片相对于其正常位置在 topleft 方向上移动了设定的像素数。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: relative;
        top: 70px;
        left: 70px;
      }
    </style>
  </head>
  <body>
    <img src="labby.png" class="ad-l" />
    <div class="box">
      <img src="page.png" />
    </div>
  </body>
</html>
相对定位机器人图片
绝对定位(Absolute Positioning)

absolute 定位使元素相对于其最近的已定位祖先元素(如果有)进行定位,否则相对于初始包含块(initial containing block)。它从文档流中移除,不占据空间。

当你需要创建浮动元素时,例如模态框或下拉菜单,可以使用绝对定位。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: absolute;
        top: 70px;
        left: 70px;
      }
    </style>
  </head>
  <body>
    <img src="labby.png" class="ad-l" />
    <div class="box">
      <img src="page.png" />
    </div>
  </body>
</html>
绝对定位示例

一旦你理解了 position 属性的用法,我们可以将以下内容添加到 style.css 中:

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
.navigation li {
  position: relative;
  display: inline-block;
}
.service figure {
  position: relative;
}
.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}
✨ 查看解决方案并练习

Grid 基础

在之前的实验中,我们学习了 Flexbox,但宠物页面的布局仍未达到我们想要的效果,因此接下来我们将学习另一种布局方式——Grid 布局。

CSS Grid 布局(Grid)是一种基于网格的布局系统,允许开发者创建响应式的网页布局。Grid 可以将页面划分为主要区域,或定义较小组件的布局。

要使用 Grid 布局,首先需要在容器元素上设置 display: grid; 属性。我们可以将以下内容添加到 style.css 中:

.container {
  display: grid;
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
.services {
  width: 90%;
  display: grid;
  margin: 20px auto;
}
✨ 查看解决方案并练习

定义行和列

接下来,使用 grid-template-columnsgrid-template-rows 属性来定义容器中的行和列。

例如,.container 设置了具有特定列和行尺寸的网格显示模式:

  • display: grid; 为容器激活网格布局。
  • grid-template-columns: 50px 100px; 定义了两列,其中第一列宽 50 像素,第二列宽 100 像素。
  • grid-template-rows: 30px 60px; 定义了两行,其中第一行高 30 像素,第二行高 60 像素。
网格布局示例可视化

我们可以将以下内容添加到 style.css 中:

.container {
  display: grid;
  grid-template-columns: 100%;
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
.services {
  width: 90%;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  margin: 20px auto;
}

fr 是一个灵活的长度单位,表示网格容器中可用空间的一部分。

✨ 查看解决方案并练习

网格间距

grid-gap 属性(现在推荐使用 gaprow-gapcolumn-gap)可以设置网格行和列之间的间距。

CSS 网格间距示例

我们可以将以下内容添加到 style.css 中:

.services {
  width: 90%;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  gap: 5%;
  margin: 20px auto;
}
✨ 查看解决方案并练习

总结

在本实验中,Alex 成功利用 CSS Grid 重新设计了“宠物之家”展示部分,以结构化且美观的网格布局展示了宠物服务。这种方法不仅提升了视觉呈现效果,还展示了 CSS Grid 在网页设计中的灵活性和强大功能。

您可能感兴趣的其他 CSS 教程