css制作google

使用CSS制作Google首页样式

创建一个类似Google首页的页面需要关注简洁的布局、搜索框和按钮样式。以下是关键CSS代码和实现方法：

HTML结构

<div class="google-container">
  <div class="logo">Google</div>
  <div class="search-container">
    <div class="search-box">
      <input type="text" class="search-input">
    </div>
    <div class="buttons">
      <button class="search-button">Google Search</button>
      <button class="feeling-lucky">I'm Feeling Lucky</button>
    </div>
  </div>
</div>

CSS样式

.google-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
}

.logo {
  font-size: 80px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #4285F4;
}

.search-container {
  width: 100%;
  max-width: 584px;
}

.search-box {
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  height: 44px;
  padding: 0 16px;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 16px;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.search-button, .feeling-lucky {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  padding: 8px 16px;
  font-size: 14px;
}

.search-button:hover, .feeling-lucky:hover {
  border: 1px solid #dadce0;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

关键设计要点

Google首页设计以简洁为核心，主要元素包括居中布局、无边框搜索框和简单的按钮样式。搜索框采用圆角边框，按钮使用浅灰色背景。

颜色方案遵循Google的品牌色，Logo使用蓝色#4285F4，按钮和搜索框使用中性灰色调。交互效果包括鼠标悬停时按钮的轻微阴影和边框变化。

响应式调整

为适应不同屏幕尺寸，可添加媒体查询：

@media (max-width: 600px) {
  .logo {
    font-size: 60px;
  }

  .search-container {
    width: 90%;
  }

  .buttons {
    flex-direction: column;
    align-items: center;
  }
}

动画增强效果

为搜索框添加聚焦动画：

.search-box:focus-within {
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
  border-color: rgba(223,225,229,0);
}

这种实现保留了Google首页的核心视觉元素，同时保持代码简洁。可根据需要进一步添加导航栏、页脚等其他组件。