网页设计基础二十一讲： 从零开始掌握Grid布局：构建响应式在线商店页面

TechLearn
1,718 阅读6分钟

本文通过创建一个包含响应式导航栏和书籍列表的在线商店页面实例，深入浅出地介绍了CSS Grid布局的核心概念及其应用技巧。从基本的块级容器定义到复杂的响应式设计实现，读者将学习如何利用Grid布局灵活地控制网页元素的排列与对齐，以及如何通过媒体查询优化不同设备上的显示效果。本教程适合初学者及希望提高响应式网页设计技能的前端开发者。

知识回顾

Grid布局

块级容器

display: grid;

行内容器（宽度随内容自适应）时

display: inline-grid;

划分列

grid-template-columns: 100px 1fr 1fr;                // fr 是fraction 的缩写，意为"片段"，可以与绝对长度的单位结合使用
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);               // repeat()接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);   // minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: repeat(auto-fill, 100px);     // 空白匿名网格
grid-template-columns: repeat(auto-fit, 100px);      // 空白匿名网格折叠合并
grid-template-columns: fit-content(100px) fit-content(100px) 40px auto;  // 让尺寸适应于内容，但不超过设定的尺寸,只支持数值和百分比值

划分行

grid-template-rows  //  使用方法与列相同

设置行/列的间距

row-gap: 20px;       // 行间距
column-gap: 30px;    // 列间距
gap: 20px;           // 行列间距

设置单元格内的对齐方式

justify-items 指定单元格内容的水平对齐方式，属性值有：
stretch：【默认值】拉伸，占满单元格的整个宽度。
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
align-items 指定单元格内容的垂直对齐方式，属性值有：
normal：【默认值】会根据使用场景的不同表现为stretch或者start。
stretch：拉伸，占满单元格的整个宽度。
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
baseline：基线对齐（align-items属性特有属性值）
place-items 是align-items属性和justify-items属性的合并简写形式：
place-items: start end;

单个项目的对齐方式

justify-self 跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self 跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self 是align-self属性和justify-self属性的合并简写形式。

任务描述

image.png

设计要求详细说明

  1. 页面结构：

    • 导航栏：

      • 使用background-color: #333;设置背景色。
      • color: #fff;设置文本颜色。
      • 使用padding: 15px;增加内边距。
      • 使用text-align: center;使导航项居中对齐。

    • 商品展示区：

      • 每个商品的容器使用padding: 15px;增加内边距。
      • 商品之间的间隔使用grid-gap: 15px;。

    • 客户评价区：

      • 使用background-color: #e0e0e0;进行背景设置。
      • 使用padding: 20px;和border-radius: 8px;设置内边距和边角圆润。

  2. 布局要求：

    • 商品展示区：

      • 使用display: grid;属性实现网格布局。
      • 使用grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));动态生成列数，最小宽度为200px，最大宽度为1fr自适应。
      • 设置grid-gap: 15px;以增加商品之间的间距。

    • 导航栏：

      • 使用display: flex;实现水平排列。
      • 使用justify-content: center;使导航项居中分布。

  3. 视觉效果：

    • 商品样式：

      • 使用background: #f0f0f0;提供商品容器背景色。
      • 使用border-radius: 8px;使每个商品的角变得圆润。
      • 使用box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);增加阴影效果。
      • 在鼠标悬停商品时，使用transition: transform 0.2s;实现缩放效果，通过transform: scale(1.05);使商品略微放大。

    • 图片样式：

      • 商品图片使用max-width: 100%;确保其宽度不超过父容器。
      • 使用border-radius: 8px;使图片的角也变得圆润。

  4. 响应式设计：

    • 使用媒体查询：

      • 当屏幕宽度小于768px时，使用@media (max-width: 768px)，将.container的grid-template-columns改为1fr，实现单列布局。

    • 确保字体和其他元素的大小在不同屏幕尺寸下自适应。

  5. 用户体验：

    • 导航栏：

      • 使用cursor: pointer;为导航项提供指示，增强可点击性。

    • 商品描述：

      • 使用text-align: center;确保文本在商品区域的居中对齐，提升整体美观性。

任务实施

步骤1：准备开发环境

  1. 创建项目文件夹：

    • 在本地计算机上创建一个新的文件夹，例如online-store。

  2. 创建文件：

    • 在项目文件夹内创建一个HTML文件，命名为index.html。
    • 创建一个CSS文件，可以命名为styles.css（如果不使用内嵌样式，可以将之前的样式放入此文件）。

步骤2：编写HTML结构

  1. 打开index.html文件：

    • 使用文本编辑器（如VS Code、Sublime Text等）打开index.html。

2 编写基础HTML结构：

-   粘贴以下HTML代码到文件中：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线商店</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 此处添加CSS样式 */
        /* 详见之前的设计要求具体属性 */
    </style>
</head>
<body>
    <div class="container">
        <header class="navbar">
            <nav>
                <ul>
                    <li>首页</li>
                    <li>商品</li>
                    <li>购物车</li>
                    <li>联系</li>
                </ul>
            </nav>
        </header>
        <div class="products">
            <div class="product">
                <img src="product1.jpg" alt="商品1">
                <h3>商品名称 1</h3>
                <p>价格: ¥199</p>
                <p>简短描述...</p>
            </div>
            <div class="product">
                <img src="product2.jpg" alt="商品2">
                <h3>商品名称 2</h3>
                <p>价格: ¥299</p>
                <p>简短描述...</p>
            </div>
            <div class="product">
                <img src="product3.jpg" alt="商品3">
                <h3>商品名称 3</h3>
                <p>价格: ¥399</p>
                <p>简短描述...</p>
            </div>
            <div class="product">
                <img src="product4.jpg" alt="商品4">
                <h3>商品名称 4</h3>
                <p>价格: ¥99</p>
                <p>简短描述...</p>
            </div>
        </div>
        <div class="customer-reviews">
            <h2>客户评价</h2>
            <p>“非常喜欢这个商店，商品质量很好！”</p>
            <p>“客服态度很好，购物体验非常愉快！”</p>
        </div>
    </div>
</body>
</html>

步骤3：编写CSS样式

  1. 在styles.css中编写样式（如果没有使用内嵌样式）：

    • 粘贴之前提供的CSS样式代码，适当地添加到styles.css文件中。

  2. 确保样式表链接正确：

    • 检查HTML中的<link rel="stylesheet" href="styles.css">，确保它指向正确的CSS文件。

步骤4：添加商品图片

  1. 准备图片：

    • 准备示例商品图片，并将其命名为product1.jpg、product2.jpg、product3.jpg和product4.jpg。

  2. 将图片文件放入项目文件夹：

    • 将准备好的图片文件放入项目的根目录中，确保路径正确。

步骤5：测试和调整

  1. 在浏览器中打开HTML文件：

    • 双击index.html文件，以在浏览器中打开页面，检查布局和样式效果。

  2. 调整样式：

    • 如果发现布局不如预期，返回到CSS文件中进行相应的调整。
    • 通过更改属性的值来实现预期效果，例如调整grid-template-columns、padding、margin等。

步骤6：实现响应式设计

  1. 进行设备测试：

    • 使用浏览器的开发者工具检查页面在不同屏幕尺寸下的表现。

  2. 根据需要进行修改：

    • 根据测试结果，针对不同的设备进行必要的CSS修改，确保网站在所有设备上都能良好展示。

步骤7：完成并预览

通过浏览器，预览实际效果。

实验实训

待补充完善

avatar
文章
阅读
粉丝