css制作google

使用CSS制作Google风格界面

Google的界面以简洁、现代和响应式设计著称。以下是实现类似风格的CSS关键点：

颜色与字体

• 主色调使用Google标志性的蓝色 #4285F4，红色 #EA4335，黄色 #FBBC05，绿色 #34A853
• 字体推荐使用Roboto（Google的标准字体）：

  body {
    font-family: 'Roboto', sans-serif;
    color: #202124;
  }

搜索框样式

.search-box {
  width: 584px;
  height: 46px;
  border-radius: 24px;
  border: 1px solid #dfe1e5;
  padding: 0 20px;
  font-size: 16px;
}
.search-box:hover {
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

按钮样式

.button {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  padding: 0 16px;
  height: 36px;
  font-size: 14px;
}
.button:hover {
  border: 1px solid #dadce0;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

布局结构

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-top: 200px;
}

导航栏

.navbar {
  display: flex;
  justify-content: flex-end;
  padding: 6px;
}
.nav-item {
  padding: 5px 10px;
  color: rgba(0,0,0,0.87);
  font-size: 13px;
}

响应式设计

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

图标使用 Google Material Icons可通过以下方式引入：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

.icon {
  color: #5f6368;
  font-size: 20px;
}

阴影效果

.card {
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  transition: box-shadow 0.2s ease;
}

动画效果

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.loading {
  animation: fadeIn 0.5s ease;
}

这些CSS片段组合起来可以创建出类似Google的干净、简约界面。实际实现时需要根据具体需求调整尺寸、颜色和布局细节。