源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

专卖店网站静态页

2026/02/11
18
0

题目

使用 HTML、CSS 和少量 JavaScript 实现一个耳机音箱专卖店的响应式静态首页，包含固定头部导航、主产品展示区、产品缩略图切换功能以及移动端菜单交互。

说明

本题旨在考察开发者对以下前端核心技能的综合运用能力：

  • HTML 语义化结构搭建

  • CSS 布局（Flexbox + Grid）与响应式设计（Media Queries）

  • CSS 自定义属性（变量）管理主题色

  • 基础 DOM 操作与事件处理（JavaScript）

  • 第三方图标库（Font Awesome）的集成使用

页面需在桌面端呈现左右布局（左侧图片，右侧文字），在移动端自动切换为单列布局，并支持通过点击底部圆形缩略图切换主产品图。同时，当屏幕宽度小于 890px 时，顶部导航栏应折叠为汉堡菜单，点击可展开。

👈点击左箭头查看答案（一定要在自己思考并实现后再看参考答案哦！）

规律分析

1. 页面结构拆解

  • <header>：固定定位，包含 Logo、导航菜单、购物车及菜单图标。

  • <section class="home">：主体内容区，采用 CSS Grid 实现两栏布局。

  • .main：绝对定位的产品缩略图选择器，三个圆形按钮对应不同产品图。

  • .bottom：右下角“查看更多”链接，仅在桌面端显示。

2. 核心交互逻辑

  • 图片切换：点击 .main 中的任意 <img>，触发 slider() 函数，动态修改主图 src。

  • 移动端菜单：点击 .bx-menu 图标，通过 JS 切换 .navbar 的 open 类，控制其从右侧滑入。

3. 响应式断点设计

屏幕宽度

主要变化

≤ 1740px

内边距缩小，.main 和 .bottom 靠近边缘

≤ 1625px / 1400px

标题字体逐级缩小，缩略图尺寸减小

≤ 1000px

转为单列布局，隐藏“查看更多”按钮

≤ 890px

导航菜单折叠为弹出式，使用汉堡图标控制显隐

≤ 600px

进一步压缩内边距和字体大小

4. 主题色管理

通过 CSS :root 定义变量，便于统一维护：

:root {
  --bg-color: #101113;
  --text-color: #fff;
  --main-color: #34e7f8; /* 主强调色（青蓝色）*/
  --other-color: #fcfcfc;
}

程序实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>专卖店网站的静态页面</title>
  
  <!-- 字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
  
  <style>
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
      text-decoration: none;
      list-style: none;
    }
    :root{
      --bg-color: #101113;
      --text-color: #fff;
      --main-color: #34e7f8;
      --other-color: #fcfcfc;
      --h1-font: 6rem;
      --p-font: 1rem;
    }
    body{
      background: radial-gradient(50.53% 50.53% at 50.23% 49.47%, #414d59 0%, #1d2631 100%);
      color: var(--text-color);
    }
    header{
      position: fixed;
      width: 100%;
      top: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 8%;
      transition: all .55s ease;
      background: transparent;
    }
    .logo{
      display: flex;
      align-items: center;
      color: var(--text-color);
      font-size: 28px;
      font-weight: bold;
    }
    .logo i{
      color: var(--main-color);
      font-size: 32px;
      margin-right: 5px;
    }
    .navbar{
      display: flex;
    }
    .navbar a{
      color: var(--other-color);
      font-size: var(--p-font);
      font-weight: 500;
      margin: 0 30px;
      transition: all .55s ease;
    }
    .navbar a:hover{
      color: var(--main-color);
    }
    .navbar a.active{
      color: var(--main-color);
    }
    .header-icons{
      display: flex;
      align-items: center;
    }
    .header-icons i{
      margin-right: 25px;
      font-size: 28px;
      cursor: pointer;
      transition: all .55s ease;
    }
    .header-icons i:hover{
      transform: translateY(-5px);
      color: var(--main-color);
    }

    /* 汉堡菜单样式 */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 25px;
      height: 18px;
      cursor: pointer;
      margin-left: 20px;
    }
    .hamburger span {
      width: 100%;
      height: 2px;
      background: var(--text-color);
      transition: 0.3s;
    }

    section{
      padding: 0 15%;
    }
    .home{
      position: relative;
      height: 100vh;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      gap: 2rem;
      padding-top: 100px; /* 避免被 fixed header 遮挡 */
    }
    .home-text h1{
      font-size: var(--h1-font);
      line-height: 1.2;
      margin-bottom: 2px;
    }
    .home-text h5{
      color: #ffffff99;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 60px;
    }
    .home-text h3{
      font-size: 40px;
      font-weight: 700;
      letter-spacing: 2px;
      margin-bottom: 35px;
    }
    .btn{
      display: inline-block;
      padding: 15px 70px;
      font-size: 16px;
      font-weight: 500;
      background: transparent;
      border: 2px solid var(--text-color);
      color: var(--text-color);
      transition: all .55s ease;
    }
    .btn:hover{
      background: var(--text-color);
      border: 2px solid var(--text-color);
      color: #000;
    }
    .home-img img{
      max-width: 100%;
    }

    .main{
      position: absolute;
      top: 50%;
      left: 8%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2.5rem;
    }
    .main li img{
      width: 60px;
      height: auto;
      max-width: 100%;
    }
    .row{
      height: 80px;
      width: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--main-color);
      transition: all .55s ease;
      cursor: pointer;
    }
    .row:hover{
      transform: translateY(-8px);
    }
    .row2{
      background: #ff758d;
    }
    .row3{
      background: #ffd06d;
    }

    .bottom{
      position: absolute;
      bottom: 35px;
      right: 8%;
      display: flex;
      align-items: center;
      color: var(--text-color);
      font-size: 15px;
      font-weight: 500;
    }
    .bottom i{
      color: var(--main-color);
      font-size: 25px;
      margin-left: 15px;
      transition: all .55s ease;
    }
    .bottom i:hover{
      transform: translateY(-8px);
    }

    @media (max-width: 1740px){
      header{
        padding: 14px 2%;
      }
      .main{
        left: 2%;
        transition: .2s;
      }
      .bottom{
        right: 2%;
        transition: .2s;
      }
    }

    @media (max-width: 1625px){
      :root{
        --h1-font: 5rem;
      }
    }
    @media (max-width: 1400px){
      :root{
        --h1-font: 4rem;
      }
      .row{
        height: 60px;
        width: 60px;
      }
      .main li img{
        width: 40px;
      }
    }

    @media (max-width: 1150px){
      section{
        padding: 0 6%;
      }
    }
    @media (max-width: 1000px){
      section{
        padding: 40px 18%;
      }
      .home{
        height: auto;
        grid-template-columns: 1fr;
        padding-top: 80px;
      }
      .home-img{
        text-align: center;
      }
      .home-img img{
        width: 400px;
        height: auto;
        max-width: 100%;
      }
      :root{
        --h1-font: 3.5rem;
      }
      .home-text{
        text-align: center;
      }
      .home-text h5{
        margin-bottom: 15px;
      }
      .home-text h3{
        font-size: 28px;
        margin-bottom: 45px;
      }
      .btn{
        padding: 10px 30px;
        font-size: 14px;
      }
      .bottom{
        display: none;
      }
    }

    @media (max-width: 890px){
      .header-icons i.fa-shopping-cart { 
        display: none; 
      }
      .hamburger { 
        display: flex; 
      }

      .navbar{
        position: absolute;
        top: 100%;
        right: -200%;
        width: 200px;
        height: auto;
        min-height: 20vh;
        background: var(--main-color);
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        padding: 20px;
        border-radius: 4px;
        transition: all .55s ease;
      }
      .navbar a{
        display: block;
        margin: 8px 0;
        color: var(--text-color) !important;
        transition: all .45s ease;
      }
      .navbar a:hover{
        transform: translateY(0);
        color: #000 !important;
        background: rgba(255,255,255,0.2);
        padding: 4px 10px;
        border-radius: 4px;
      }
      .navbar.open{
        right: 2%;
      }

      /* 汉堡变关闭图标 */
      .navbar.open ~ .header-icons .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }
      .navbar.open ~ .header-icons .hamburger span:nth-child(2) {
        opacity: 0;
      }
      .navbar.open ~ .header-icons .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
      }
    }

    @media (max-width: 600px){
      section{
        padding: 100px 18%;
      }
      .home{
        height: auto;
      }
      .home-img img{
        width: 300px;
        height: auto;
        max-width: 100%;
      }
      :root{
        --h1-font: 2.1rem;
      }
    }
  </style>
</head>
<body>
  <header>
    <a href="#" class="logo"><i class="fa fa-headphones"></i> 耳机音箱</a>
    <ul class="navbar">
      <li><a href="#" class="active">全部产品</a></li>
      <li><a href="#">网络教学专用</a></li>
      <li><a href="#">耳机</a></li>
      <li><a href="#">音箱</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
    <div class="header-icons">
      <i class="fa fa-shopping-cart"></i>
      <div class="hamburger" id="menu-icon">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </header>

  <section class="home">
    <div class="home-img">
      <!-- 使用占位图确保效果可见 -->
      <img src="https://imgservice.suning.cn/uimg1/b2c/image/BbAsuFcdThfTJnRYn1hFwQ.jpg_800w_800h_4e" alt="无线蓝牙耳机" class="one">
    </div>
    <div class="home-text">
      <h1>无线蓝牙耳机</h1>
      <h3>视频网络教学专用</h3>
      <h3>¥199.00</h3>
      <a href="#" class="btn">马上购买</a>
    </div>
  </section>

  <ul class="main">
    <li class="row" data-img="https://via.placeholder.com/500x500/414d59/ffffff?text=Product+1">
      <img src="https://cdnimg.chinagoods.com/jpg/2023/04/26/0899d2bedb47bf6db95b1824535dbc8a.jpg" alt="产品1">
    </li>
    <li class="row row2" data-img="https://via.placeholder.com/500x500/ff758d/ffffff?text=Product+2">
      <img src="https://cdnimg.chinagoods.com/jpg/2021/10/18/ce8bce78ba4db0d9db5b2487bf359c9b.jpg" alt="产品2">
    </li>
    <li class="row row3" data-img="https://via.placeholder.com/500x500/ffd06d/000000?text=Product+3">
      <img src="https://cdnimg.chinagoods.com/im/94168/21c61f8b89a77c9aa321f44a1acf0a43.jpg" alt="产品3">
    </li>
  </ul>

  <a href="#" class="bottom">查看更多产品<i class="fa fa-arrow-circle-o-down"></i></a>

  <script>
    // 图片切换
    document.querySelectorAll('.main li').forEach(item => {
      item.addEventListener('click', () => {
        const imgSrc = item.getAttribute('data-img');
        document.querySelector('.one').src = imgSrc;
      });
    });

    // 移动端菜单切换
    const menuIcon = document.getElementById('menu-icon');
    const navbar = document.querySelector('.navbar');
    if (menuIcon && navbar) {
      menuIcon.addEventListener('click', () => {
        navbar.classList.toggle('open');
      });
    }
  </script>
</body>
</html>

运行示例

  • 桌面端：左右布局，三色圆形缩略图位于左侧中部，可点击切换主图。

  • 移动端（<890px）：

    • 导航栏隐藏，右上角出现三条横线（汉堡菜单）；

    • 点击后菜单从右侧滑出，背景为青蓝色；

    • 主内容区变为上下布局，图片居中显示。

补充说明

  • 本题是典型的营销落地页（Landing Page） 布局练习，重点在于视觉层次与交互反馈。

  • 所有资源（字体、图标）均通过 CDN 引入，确保开箱即用。

  • 单文件设计便于直接保存为 .html 并在浏览器中运行，无需额外配置。

  • 若需进一步扩展，可加入：

    • 产品详情弹窗

    • 购物车数量徽章

    • 淡入淡出图片切换动画（使用 opacity + transition）