如何模仿Apple官网的CSS页面样式？-网页设计-锦华智联科技

下面我将从核心设计原则、关键 CSS 技巧（包括 CSS 变量）、布局结构和一个完整的代码示例四个方面，为你详细拆解如何实现 Apple 风格的 CSS。

（图片来源网络，侵删）

核心设计原则

在写代码之前,理解其背后的设计理念至关重要，Apple 官网的 CSS 风格主要基于以下几点：

极致的留白
- 目的：引导用户视线，突出核心内容，营造高级、宁静的氛围。
- 实现：大量使用 margin 和 padding，尤其是在元素之间，容器宽度受限，在超大屏幕上居中显示，两侧留出大片空白。
高对比度与清晰的排版
- 目的：确保在任何设备上都易于阅读，建立强烈的视觉层级。
- 实现：
  - 字体：使用系统字体栈 (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif)，保证在不同平台上的原生外观和最佳可读性。
  - 字号：正文通常使用 16px 或 18px，通过 line-height (如 5 或 6) 增加行间距。
  - 颜色：背景几乎是纯白 (#ffffff)，文字是深灰或黑色 (#1d1d1f, #86868b)，链接使用品牌色 (#0071e3)，并有下划线动画。
简洁的卡片式布局
（图片来源网络，侵删）
- 目的模块化，结构清晰，易于浏览。
- 实现：每个产品或内容区块都像一个独立的卡片，有明确的边框（通常是极细的 1px solid #d2d2d7）、圆角和阴影。
精致的微交互与动画
- 目的：提供即时反馈，增强用户体验，让页面“活”起来。
- 实现：
  - 导航栏：滚动时背景从透明变为半透明白色。
  - 链接：悬停时下划线从无到有，或从左向右延伸。
  - 按钮：悬停时有轻微的颜色变化或阴影加深。
  - 图片/视频：悬停时有微妙的缩放效果。
响应式设计
- 目的：在手机、平板、桌面等所有设备上都能提供一流的体验。
- 实现：使用 flexbox 和 grid 进行灵活布局，并通过媒体查询 (@media) 调整字体大小、间距和布局结构。

关键 CSS 技巧与代码示例

这里提供一些核心的 CSS 片段，你可以直接使用或作为灵感来源。

基础样式与字体

/* 重置默认样式 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 使用系统字体栈，这是 Apple 风格的关键 */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5; /* 增加行高，提升可读性 */
}
body {
  background-color: #ffffff;
  color: #1d1d1f; /* 主要文本颜色 */
  -webkit-font-smoothing: antialiased; /* 在 macOS 上启用字体平滑 */
  -moz-osx-font-smoothing: grayscale; /* 在其他系统上启用字体平滑 */
}

布局容器与留白

Apple 的内容区域通常很窄，并居中显示。

（图片来源网络，侵删）

/* 主容器，限制最大宽度并居中 */
.container {
  max-width: 1060px; /* Apple 常用的宽度 */
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* 大型区块的上下间距 */
.hero-section,
.content-section {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 734px) { /* iPad 竖屏及更小 */
  .hero-section,
  .content-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

标题与文本层级

h1 {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.002em;
}
@media (max-width: 734px) {
  h1 {
    font-size: 40px;
  }
}
p {
  font-size: 18px;
  line-height: 1.6;
  color: #86868b; /* 次要文本颜色 */
}

块

这是 Apple 产品展示的核心。

.product-card {
  border-radius: 18px;
  border: 1px solid #d2d2d7;
  overflow: hidden; /* 确保内部内容圆角被裁剪 */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.product-card:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px); /* 轻微上浮效果 */
}
.product-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.product-card:hover .product-image {
  transform: scale(1.05); /* 图片悬停放大 */
}

链接与按钮

/* Apple 风格的链接 */
a {
  color: #0071e3; /* Apple 蓝 */
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0071e3;
  transition: width 0.3s ease;
}
a:hover {
  color: #0051d5;
}
a:hover::after {
  width: 100%; /* 悬停时下划线从左向右延伸 */
}
/* Apple 风格的按钮 */
.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #0071e3;
  color: #ffffff;
  border-radius: 980px; /* 极大值，形成胶囊形 */
  text-decoration: none;
  font-size: 17px;
  font-weight: 400;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.button:hover {
  background-color: #0051d5;
}
.button:active {
  transform: scale(0.98); /* 点击时轻微缩小 */
}

动态导航栏

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease;
}
/* 默认状态（透明背景） */
.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px); /* 毛玻璃效果，非常 Apple */
  -webkit-backdrop-filter: blur(20px);
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px; /* 导航栏高度 */
  padding-top: 0;
  padding-bottom: 0;
}

使用 CSS 变量（最佳实践）

为了统一管理和维护颜色、间距等，强烈推荐使用 CSS 变量。

:root {
  /* 颜色 */
  --color-primary: #1d1d1f;
  --color-secondary: #86868b;
  --color-link: #0071e3;
  --color-link-hover: #0051d5;
  --color-border: #d2d2d7;
  --color-background: #ffffff;
  /* 间距 */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 80px;
  /* 字体大小 */
  --font-size-body: 18px;
  --font-size-heading-1: 56px;
}
/* 然后在其他地方使用这些变量 */
body {
  background-color: var(--color-background);
  color: var(--color-primary);
}
h1 {
  font-size: var(--font-size-heading-1);
}
p {
  font-size: var(--font-size-body);
  color: var(--color-secondary);
}

HTML 结构示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Apple 风格页面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 动态导航栏 -->
    <nav class="navbar" id="navbar">
        <div class="container">
            <a href="#" class="logo">Apple 风格</a>
            <div class="nav-links">
                <a href="#">Mac</a>
                <a href="#">iPad</a>
                <a href="#">iPhone</a>
                <a href="#" class="button">购买</a>
            </div>
        </div>
    </nav>
    <main>
        <!-- Hero Section -->
        <section class="hero-section">
            <div class="container">
                <h1>非凡之力，触手可及。</h1>
                <p>全新 iPhone 15 Pro，钛金属设计，A17 Pro 芯片，带来专业级体验。</p>
                <a href="#" class="button">进一步了解</a>
            </div>
        </section>
        <!-- Content Grid -->
        <section class="content-section">
            <div class="container">
                <div class="grid">
                    <div class="product-card">
                        <img src="https://via.placeholder.com/400x300" alt="产品图片" class="product-image">
                        <div class="card-content">
                            <h3>MacBook Pro</h3>
                            <p>为专业人士打造的终极笔记本。</p>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/400x300" alt="产品图片" class="product-image">
                        <div class="card-content">
                            <h3>iPad Air</h3>
                            <p>强大、轻巧、多姿多彩。</p>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/400x300" alt="产品图片" class="product-image">
                        <div class="card-content">
                            <h3>Apple Watch Series 9</h3>
                            <p>更智能的健康伙伴。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
    </script>
</body>
</html>

完整 CSS 文件 (`style.css`)

将以下所有代码保存为 style.css 文件，并与上面的 HTML 文件放在同一目录下。

/* ========================================
   1. 基础样式与重置
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  /* 颜色 */
  --color-primary: #1d1d1f;
  --color-secondary: #86868b;
  --color-link: #0071e3;
  --color-link-hover: #0051d5;
  --color-border: #d2d2d7;
  --color-background: #ffffff;
  /* 间距 */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 80px;
  /* 字体大小 */
  --font-size-body: 18px;
  --font-size-heading-1: 56px;
}
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background-color: var(--color-background);
  color: var(--color-primary);
}
/* ========================================
   2. 布局与容器
   ======================================== */
.container {
  max-width: 1060px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.hero-section,
.content-section {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
}
/* ========================================
   3. 导航栏
   ======================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease;
}
.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}
.logo {
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
}
.nav-links a {
  color: var(--color-primary);
  text-decoration: none;
  margin-left: var(--spacing-md);
  font-size: var(--font-size-body);
}
/* ========================================
   4. 标题与文本
   ======================================== */
h1 {
  font-size: var(--font-size-heading-1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.002em;
  margin-bottom: var(--spacing-md);
}
@media (max-width: 734px) {
  h1 {
    font-size: 40px;
  }
}
p {
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
}
/* ========================================
   5. 链接与按钮
   ======================================== */
a {
  color: var(--color-link);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-link);
  transition: width 0.3s ease;
}
a:hover {
  color: var(--color-link-hover);
}
a:hover::after {
  width: 100%;
}
.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--color-link);
  color: #ffffff;
  border-radius: 980px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 400;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.button:hover {
  background-color: var(--color-link-hover);
}
.button:active {
  transform: scale(0.98);
}
/* ========================================
   6. 卡片与内容
   ======================================== */
.product-card {
  border-radius: 18px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}
.product-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.product-card:hover .product-image {
  transform: scale(1.05);
}
.card-content {
  padding: var(--spacing-md);
}
.card-content h3 {
  font-size: 24px;
  margin-bottom: var(--spacing-xs);
}
.card-content p {
  margin-bottom: 0;
}

通过以上代码和解释,你应该能够构建出一个非常接近 Apple 官网风格的页面，真正的精髓在于对细节的追求和对留白的巧妙运用。

如何模仿Apple官网的CSS页面样式？