Frontend Mentor Challenges 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01152/article/details/142009514

Frontend Mentor Challenges 项目教程

frontend-mentor-challengesMy submissions for the Frontend Mentor Challenges项目地址:https://gitcode.com/gh_mirrors/fr/frontend-mentor-challenges

1. 项目目录结构及介绍

frontend-mentor-challenges/
├── 01-order-summary-component/
│   ├── css/
│   │   ├── styles.css
│   ├── images/
│   │   ├── illustration-hero.svg
│   ├── index.html
├── 02-stats-preview-card-component/
│   ├── css/
│   │   ├── styles.css
│   ├── images/
│   │   ├── image-header-desktop.jpg
│   ├── index.html
├── ...
├── README.md

目录结构说明

项目根目录：包含多个子目录，每个子目录代表一个独立的挑战项目。
子目录：每个子目录包含一个挑战项目的所有文件，通常包括HTML、CSS和图片资源。
README.md：项目的总体介绍文件，包含项目的概述、使用说明和贡献指南。

2. 项目的启动文件介绍

每个挑战项目的启动文件是 index.html，这是项目的入口文件。用户可以通过打开这个文件来查看和测试项目的效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <title>Order Summary Component</title>
</head>
<body>
    <div class="container">
        <!-- 项目内容 -->
    </div>
</body>
</html>

启动文件说明

index.html：包含HTML结构和基本的页面布局。
<link rel="stylesheet" href="css/styles.css">：引入项目的CSS样式文件。

3. 项目的配置文件介绍

该项目没有统一的配置文件，每个挑战项目都是独立的，配置主要体现在HTML和CSS文件中。

配置文件说明

styles.css：每个挑战项目的CSS文件，包含项目的样式配置。
HTML文件：包含页面的结构和布局，通常不需要额外的配置文件。

示例

/* styles.css */
body {
    font-family: 'Red Hat Display', sans-serif;
    background-color: hsl(225, 100%, 94%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    max-width: 350px;
    text-align: center;
}