<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电子商务网站 - 示例</title>
<style>
  /* 全局样式 */
  body {
    font-family: Arial, sans-serif; /* 设置页面字体为Arial，无衬线字体 */
    font-size: 16px; /* 设置全局字体大小为16像素 */
    color: #333; /* 设置全局文本颜色为深灰色 */
    background-color: #f7f7f7; /* 设置背景色为浅灰色 */
    margin: 0; /* 清除body元素的外边距 */
    padding: 20px; /* 给body添加20像素内边距 */
  }
  /* 主标题样式 */
  h1 {
    font-size: 32px; /* 设置h1标题的字体大小为32像素 */
    color: #007BFF; /* 设置标题颜色为深蓝色 */
    text-align: center; /* 让标题居中显示 */
    margin-bottom: 30px; /* 在标题下方增加30像素间距 */
    letter-spacing: 2px; /* 添加字母间距为2像素 */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); /* 为标题文字添加阴影效果 */
  }
  /* 超链接样式 */
  a {
    color: #007BFF; /* 默认超链接颜色设为深蓝色 */
    text-decoration: none; /* 取消下划线 */
    transition: all 0.3s ease; /* 添加平滑过渡效果 */
    cursor: pointer; /* 更改鼠标指针为手形，表示可点击 */
  }  
  /* 鼠标悬停或聚焦时的超链接样式 */
  a:hover,
  a:focus {
    color: #0056b3; /* 鼠标悬停和聚焦时的颜色变为较深的蓝色 */
    outline: none; /* 移除焦点轮廓 */
    text-decoration: underline; /* 添加下划线 */
  }
  /* 已访问过的超链接样式 */
  a:visited {
    color: #808080; /* 已访问过的超链接颜色设为灰色 */
  }
  /* 导航栏样式 */
  .navbar {
    display: flex; /* 使用Flex布局 */
    justify-content: space-between; /* 子元素在主轴方向上均匀分布 */
    align-items: center; /* 子元素在交叉轴居中对齐 */
    background-color: #007BFF; /* 导航栏背景色设置为深蓝色 */
    padding: 10px 20px; /* 内边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 盒子阴影效果 */
  }
  .navbar a {
    color: white; /* 导航栏内链接颜色设为白色 */
    margin-right: 15px; /* 链接之间的右侧间距 */
  }
  /* 商品列表样式 */
  .product-list {
    max-width: 900px; /* 列表最大宽度为900px */
    margin: 0 auto; /* 水平居中显示 */
  }
  .product-item {
    display: flex; /* 使用Flex布局 */
    align-items: center; /* 子元素在交叉轴居中对齐 */
    border: 1px solid #ccc; /* 边框为1像素实线，颜色为浅灰 */
    padding: 15px; /* 内边距 */
    margin-bottom: 20px; /* 下方外边距 */
    background-color: #fff; /* 背景颜色为白色 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 盒子阴影效果 */
    transition: transform 0.3s ease; /* 添加转换效果（例如鼠标悬停时的动画） */
  }
  .product-item:hover {
    transform: translateY(-2px); /* 鼠标悬停时向上移动2像素 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* 鼠标悬停时加强盒子阴影效果 */
  }
  .product-image {
    width: 150px; /* 图片宽度为150px */
    height: 150px; /* 图片高度为150px */
    object-fit: cover; /* 图片保持比例并填充容器 */
    margin-right: 20px; /* 图片与右侧内容的间距 */
  }
  .product-title {
    font-weight: bold; /* 标题加粗 */
    line-height: 1.5; /* 行高为1.5倍 */
  }
  .product-price {
    color: #6c757d; /* 价格颜色为淡灰色 */
  }
  /* 商品详情页样式 */
  .product-details {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自动适应列宽，最小为300px */
    grid-gap: 20px; /* 网格间间距为20px */
    padding: 30px 0; /* 上下内边距为30px，左右为0 */
  }
  .product-description {
    font-size: 18px; /* 描述文本字号为18px */
    line-height: 1.6; /* 行高为1.6倍 */
  }
  /* 购物车按钮样式 */
  .cart-button {
    background-color: #007BFF; /* 背景颜色为深蓝色 */
    color: white; /* 文本颜色为白色 */
    border: none; /* 去除边框 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 5px; /* 圆角为5像素 */
    cursor: pointer; /* 更改鼠标指针为手形 */
    transition: background-color 0.3s ease; /* 添加背景颜色平滑过渡效果 */
  }
  .cart-button:hover {
    background-color: #0056b3; /* 鼠标悬停时背景颜色变暗 */
  }
  /* 响应式设计 - 当屏幕宽度小于等于768px时 */
  @media (max-width: 768px) {
    .product-item {
      flex-direction: column; /* 将商品项目改为垂直堆叠 */
    }
    .product-image {
      margin-bottom: 15px; /* 图片下方增加15像素间距 */
    }
  }
</style>
</head>
<body>
  <header class="navbar">
    <a href="#">首页</a>
    <a href="#">商品分类</a>
    <a href="#">购物车</a>
    <a href="#">我的账户</a>
  </header>
  <h1>最新商品推荐</h1>
  <div class="product-list">
    <div class="product-item">
     <img class="product-image" src="sofa-image.png" alt="产品图片">
     <div>
       <h2 class="product-title">商品标题1</h2>
       <p class="product-price">$99.99</p>
       <p>描述：这是一个精美的商品...</p>
       <button class="cart-button">加入购物车</button>
     </div>
    </div>
    <!-- 更多商品项... -->
  </div>
  <!-- 商品详情、用户评价、相关产品等其他页面内容 -->
</body>
</html>
