使用 HTML 和 CSS 实现 Android 徽标

Android 标志

在本文中，我们将仅使用 HTML 和 CSS 来实现 Android 徽标。这看起来工作量很大，但我们会一步一步地讲解。我会尽可能详细地解释。

我将在本文末尾分享 Github 上代码库的链接。

让我们首先创建一个名为的简单 html 文件index.html，其中包含此代码。

<!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Android Logo</title>
  </head>

  <body>
    <div class="android">
        <div class="head">
          <div class="left_antenna"></div>
          <div class="right_antenna"></div>
          <div class="left_eye"></div>
          <div class="right_eye"></div>
        </div>
        <div class="body">
          <div class="left_arm"></div>
          <div class="right_arm"></div>
          <div class="left_leg"></div>
          <div class="right_leg"></div>
        </div>
    </div>
  </body>

</html>

这个标记很容易理解。虽然腿放在身体部分看起来有点奇怪，但不用担心，随着我们继续讲下去，你会理解这个概念的。

接下来：创建一个index.css文件并将其链接到您的index.html文件。

<link rel="stylesheet" href="index.css">

此时用户界面上不显示任何内容，因为标记元素没有内容。

首先，我们将 Android 屏幕垂直和水平居中对齐。我们将使用弹性框来实现这一点。
请执行以下操作：

为文档正文指定一个height。100vh这会将正文的高度设置为当前查看页面的设备的高度。还需要 height 属性来垂直对齐徽标。
display将文档正文的属性设置为flex。此属性设置弹性项目的弹性长度。这使我们能够设置其他弹性属性。
justify-content将body 的属性设置为center。默认情况下，某些 HTML 元素会占据其父元素 100% 的宽度。此属性设置元素沿水平轴的位置。
align-items将body 的属性设置为center。设置高度后，所有子元素都会垂直定位到视图的中心。
将 div 中所有 div 的位置设置为relative，并将其背景设置为#A4CA39

此时你的index.css文件应该看起来像这样

body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
}

div div {
    background: #a4ca39;
    position: relative;
}

布局已经设置好了，如果你尝试在浏览器中访问它，你什么也看不到，只有一片空白。事不宜迟，让我们深入探讨一下 Android 样式。

我们将从设计 android 本身开始
：

.android将android类（）的宽度和高度分别设置为340px和400px。

然后我们将设计我们的 Android 徽标的头部样式，
请执行以下操作：

.head将头部类（）的宽度和高度分别设置为200px和100px。
将顶部属性设置为32px给天线留出空间。
为了实现机器人头部的半圆形，我们将 border-radius 属性设置为220px 220px 0 0。这将分别设置头部左上角、右上角、右下角和左下角的边框半径。这里我们使用了一个简写属性，我们也可以使用border-top-left-radius, border-top-right-radius等。

此时，我们应该看到一个半圆形的 Android 徽标弹出来，就像这样

还在等 CSS 代码吗？抱歉，我现在还不给你。试着跟着做，看看你能答对多少，这会让你的学习体验更棒。

让我们继续

接下来是我们的机器人的眼睛和天线

眼睛

对于相似之处，请执行以下操作：

将双眼的背景颜色设置为白色。
将宽度和高度设置为20px。
将位置属性设置为绝对，以便我们可以将其移动到我们想要的位置。
将顶部属性设置为42px。
并将 border-radius 设置为100%。

对于差异，请执行以下操作：

将左眼的left属性设置为50px。
将右眼的right属性设置为50px。

天线

对于相似之处，请执行以下操作：

将宽度和高度设置为6px和50px。
将位置属性设置为绝对，以便我们可以将其移动到我们想要的位置。
将顶部属性设置为-34px。
并将 border-radius 设置为3px。

对于差异，请执行以下操作：

将左天线的 left 属性设置为50px并将其旋转 -30 度
将右天线的 right 属性设置为50px并将其旋转 30 度

此时，我们的 Android 徽标的头部应该看起来像这样

接下来是身体

这部分其实比较简单，因为它只是一个矩形，我们可以像处理头部一样操作 border-radius 属性。
对于 Android 徽标的主体部分，请执行以下操作：

分别将宽度和高度设置为200px和184px。
将顶部属性设置为 42px。
将 border-radius 设置为0 0 25px 25px。

此时，我们的 Android 徽标的头部应该看起来像这样

是啊，笑得灿烂一些吧。

接下来是手臂和腿

手臂和腿有一些相似之处，看看它们的作用：

将双臂和双腿的宽度设置为50px。
将位置设置为绝对位置。

对于武器的相似性，请执行以下操作：

将高度设置为150px。
将 border-radius 设置为25px。

58px两只手臂之间的区别在于它们需要从身体两侧拉开。

对于腿部的相似性，请执行以下操作：

将高度设置为100px，因为徽标上的腿比手臂短。
将 border-radius 设置为0 0 25px 25px。
将 top 属性设置为192px。这会将腿部拉到身体下方，并在它们之间增加一点空间。

两条腿的区别在于，它们需要从身体40px两侧拉入。

HOOALA 看看我们的 Android 标志

此时你的index.css表现应该如下所示：

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div div {
  background: #A4CA39;
  position: relative;
}

.android {
  height: 400px;
  width: 340px;
}

.head {
  width: 200px;
  height: 100px;
  top: 32px;
  border-radius: 220px 220px 0 0;
}

.left_eye,
.right_eye {
  background: #fff;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 42px;
  border-radius: 100%;
}

.left_eye {
  left: 50px;
}

.right_eye {
  right: 50px;
}

.left_antenna,
.right_antenna {
  width: 6px;
  height: 50px;
  position: absolute;
  top: -34px;
  border-radius: 3px;
}

.left_antenna {
  left: 50px;
  transform: rotate(-30deg);
}

.right_antenna {
  right: 50px;
  transform: rotate(30deg);
}

.body {
  width: 200px;
  height: 184px;
  top: 42px;
  border-radius: 0 0 25px 25px;
}


.left_arm,
.right_arm,
.left_leg,
.right_leg {
  width: 50px;
  position: absolute;
}

.left_arm,
.right_arm {
  height: 150px;
  border-radius: 25px;
}

.left_leg,
.right_leg {
  height: 100px;
  top: 192px;
  border-radius: 0 0 25px 25px;
}

.left_arm {
  left: -58px;
}

.right_arm {
  right: -58px;
}

.left_leg {
  left: 40px;
}

.right_leg {
  right: 40px;
}