介绍
在「Pet's House」这个为宠物爱好者打造的虚拟世界中,网页开发者 Alex 开始了一项任务:使用 CSS Grid 重新设计他们的服务展示页面。
本实验的目标是通过以有序且视觉吸引人的方式呈现服务,来吸引用户。Alex 的任务是将「Display」部分转换为网格布局,以优雅且高效的方式突出宠物服务。
在「Pet's House」这个为宠物爱好者打造的虚拟世界中,网页开发者 Alex 开始了一项任务:使用 CSS Grid 重新设计他们的服务展示页面。
本实验的目标是通过以有序且视觉吸引人的方式呈现服务,来吸引用户。Alex 的任务是将「Display」部分转换为网格布局,以优雅且高效的方式突出宠物服务。
CSS 的 position
属性是一个强大的工具,允许开发者精确控制页面中元素的位置。它使元素能够基于其正常流、相对于父元素、相对于视口(viewport)或相对于最近的滚动祖先进行定位。
static
是所有元素的默认值,意味着元素按照正常的文档流布局。静态定位的元素不受 top
、right
、bottom
或 left
属性的影响。
当你希望元素遵循标准流时,静态定位是最佳选择。
例如,页面左侧有一个机器人图片,如果我们将该元素设置为 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
定位将元素相对于浏览器窗口的视口进行定位。即使页面滚动,元素也会保持在相同的位置。
适用于制作固定在页面顶部或底部的导航栏。
例如,页面左侧有一个机器人图片,如果我们将该元素设置为 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
定位允许你相对于元素的正常位置进行偏移。即使偏移,元素仍然占据其原始空间。
当你需要在不影响布局其他部分的情况下微调元素的位置时,可以使用相对定位。
例如,我们将页面左侧的机器人图片相对于其正常位置在 top
和 left
方向上移动了设定的像素数。
<!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
定位使元素相对于其最近的已定位祖先元素(如果有)进行定位,否则相对于初始包含块(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;
}
在之前的实验中,我们学习了 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-columns
和 grid-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
属性(现在推荐使用 gap
、row-gap
和 column-gap
)可以设置网格行和列之间的间距。
我们可以将以下内容添加到 style.css
中:
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
gap: 5%;
margin: 20px auto;
}
在本实验中,Alex 成功利用 CSS Grid 重新设计了“宠物之家”展示部分,以结构化且美观的网格布局展示了宠物服务。这种方法不仅提升了视觉呈现效果,还展示了 CSS Grid 在网页设计中的灵活性和强大功能。