css制作天猫

使用CSS制作天猫首页布局

天猫首页的布局包含导航栏、轮播图、商品分类、推荐商品等模块。以下通过CSS实现核心布局结构。

导航栏设计

天猫导航栏通常包含logo、搜索框、分类菜单和用户操作区。使用Flex布局实现水平排列：

.navbar {
  display: flex;
  align-items: center;
  height: 80px;
  background-color: #FF0036;
  padding: 0 120px;
}
.logo {
  width: 190px;
  height: 60px;
}
.search-box {
  flex: 1;
  margin: 0 30px;
}

轮播图区域

主轮播图通常采用全屏宽度，使用相对定位控制导航点：

.slider {
  position: relative;
  height: 500px;
  overflow: hidden;
}
.slide-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

商品分类网格

商品展示区采用CSS Grid布局实现响应式网格：

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 30px 120px;
}
.product-card {
  border: 1px solid #e5e5e5;
  transition: box-shadow 0.3s;
}
.product-card:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

悬浮购物车效果

实现右侧悬浮购物车图标，固定定位保持可见：

.float-cart {
  position: fixed;
  right: 30px;
  bottom: 100px;
  width: 60px;
  height: 60px;
  background-color: #FF0036;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  color: white;
  font-size: 24px;
}

响应式处理

通过媒体查询适配不同屏幕尺寸：

@media (max-width: 768px) {
  .navbar {
    padding: 0 20px;
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 15px;
  }
}

完整实现需要配合HTML结构和JavaScript交互功能。建议参考天猫实际页面的DOM结构进行深度还原，注意天猫特有的红色主题色（#FF0036）和间距体系。动画效果可使用CSS transition或animation属性实现平滑交互。