css制作网页 首页

设计网页首页的CSS方法

布局规划
使用CSS Grid或Flexbox构建响应式布局。Grid适合复杂网格结构，Flexbox适合线性排列元素。例如：

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}
.header {
  grid-column: 1 / -1;
}

色彩与字体
定义CSS变量统一主题色和字体，便于全局调整：

:root {
  --primary-color: #3498db;
  --font-main: 'Roboto', sans-serif;
}
body {
  font-family: var(--font-main);
  color: #333;
}

导航栏样式
使用Flexbox水平排列导航项，添加悬停效果：

.navbar {
  display: flex;
  background: var(--primary-color);
}
.nav-item {
  padding: 15px;
  transition: background 0.3s;
}
.nav-item:hover {
  background: #2980b9;
}

英雄区域设计
全宽横幅区域，搭配文字和按钮：

.hero {
  height: 400px;
  background: url('hero-image.jpg') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-content {
  text-align: center;
  color: white;
}

卡片组件
为内容块添加阴影和圆角：

.card {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 20px;
  background: white;
}

响应式处理
通过媒体查询适配不同设备：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  .navbar {
    flex-direction: column;
  }
}

动画效果
添加微交互提升体验：

.button {
  transition: transform 0.2s;
}
.button:hover {
  transform: translateY(-3px);
}

优化加载
使用CSS精灵图或内联关键CSS：

.logo {
  background: url('sprites.png') -10px -50px;
  width: 100px;
  height: 50px;
}

浏览器兼容
添加前缀确保多浏览器支持：

.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}