css制作google

使用CSS制作Google风格界面

创建一个类似Google首页的界面需要关注简洁的布局、特定的颜色和字体样式。以下是关键CSS样式和结构实现方法。

HTML基础结构

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

CSS样式实现

.google-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}

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

.search-container {
  width: 580px;
  position: relative;
  margin-bottom: 30px;
}

.search-box {
  width: 100%;
  padding: 13px 20px;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  font-size: 16px;
  outline: none;
}

.search-box:hover {
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}

.buttons {
  display: flex;
  gap: 10px;
}

.search-btn, .lucky-btn {
  padding: 10px 16px;
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  font-size: 14px;
  cursor: pointer;
}

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

颜色方案

• 主蓝色: #4285F4 (用于Google标志)
• 搜索框边框: #dfe1e5
• 按钮背景: #f8f9fa
• 文字颜色: #3c4043

字体设置

使用Arial或Roboto字体家族实现Google的标准字体外观：

body {
  font-family: 'Arial', sans-serif;
  /* 或使用Google字体 */
  /* font-family: 'Roboto', sans-serif; */
}

响应式调整

添加媒体查询确保在不同设备上正常显示：

@media (max-width: 650px) {
  .search-container {
    width: 90%;
  }

  .logo {
    font-size: 60px;
  }
}