当前位置：首页 > CSS

安踏网页制作css

2026-03-12 03:12:27CSS

安踏网页制作CSS指南

安踏作为运动品牌，网页设计需体现运动、活力和专业性。以下CSS关键点可帮助实现品牌风格：

配色方案

安踏主色调为红色（#E41F27）和黑色（#000000），辅以白色背景。建议在CSS中定义变量便于统一管理：

:root {
  --anta-red: #E41F27;
  --anta-black: #000000;
  --anta-white: #FFFFFF;
}

字体选择

推荐使用现代无衬线字体，如Helvetica或Arial：

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

导航栏样式

导航栏需突出品牌标识：

安踏网页制作css

.navbar {
  background-color: var(--anta-white);
  border-bottom: 2px solid var(--anta-red);
}

.nav-logo {
  height: 50px;
  padding: 10px 0;
}

.nav-link {
  color: var(--anta-black);
  font-weight: 600;
  text-transform: uppercase;
}

产品展示区

产品卡片需强调视觉冲击力：

.product-card {
  border: 1px solid #eee;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.product-tag {
  background-color: var(--anta-red);
  color: white;
  padding: 3px 10px;
  font-size: 0.8rem;
}

按钮样式

行动按钮需醒目：

安踏网页制作css

.btn-anta {
  background-color: var(--anta-red);
  color: white;
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: bold;
  text-transform: uppercase;
}

.btn-anta:hover {
  background-color: #c5171f;
}

响应式设计

确保移动端体验：

@media (max-width: 768px) {
  .navbar-collapse {
    background-color: var(--anta-white);
  }

  .product-grid {
    grid-template-columns: 1fr;
  }
}

动画效果

适当添加运动感动画：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.featured-product {
  animation: pulse 2s infinite;
}

页脚设计

保持品牌一致性：

.footer {
  background-color: var(--anta-black);
  color: var(--anta-white);
  padding: 40px 0;
}

.footer-links a {
  color: #ccc;
  margin-right: 15px;
}

这些CSS元素组合可创建符合安踏品牌形象的网页界面，建议根据实际内容结构调整具体数值。