HTML 및 CSS를 사용하여 Android 로고 구현

16752 단어 androidhtmlcss
본고에서 우리는 HTML과 CSS로만 안드로이드 로고를 실현할 것이다.이것은 마치 무거운 일인 것 같지만, 우리는 한 걸음 한 걸음 완성할 것이다.나는 가능한 한 많이 설명할 것이다.
본고의 마지막 부분에서, 나는 Github에 있는 코드 라이브러리에 대한 링크를 공유할 것이다.
index.html라는 간단한 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부터 시작합시다.우리는 flex box를 사용하여 이 점을 실현할 것이다.
다음을 수행합니다.
  • height 중의 100vh 파일 본문을 제시합니다.그러면 바디 높이가 페이지를 보는 현재 장치의 높이로 설정됩니다.로고를 수직으로 정렬하려면 고도의 속성이 필요합니다.
  • 문서 본문의 display 속성을 flex 로 설정합니다.이 속성은 유연성 항목의 유연성 길이를 설정합니다.이것은 우리로 하여금 다른 flex 속성을 설정할 수 있게 한다.
  • 바디의 justify-content 속성을 center 로 설정합니다.기본적으로 일부 html 요소는 부모 요소의 폭의 100%를 차지한다.이 속성은 요소가 수평 축을 따라 있는 위치를 설정합니다.
  • 바디의 align-items 속성을 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로 설정합니다.
    • 그리고 안드로이드 로고의 머리를 디자인할 거예요.
    다음을 수행합니다.
  • headclass(.head의 너비와 높이를 각각 200px과100px로 설정합니다.
  • top 속성을 32px로 설정하여 안테나에 공간을 남긴다.
  • 안드로이드 헤드의 반원형 모양을 실현하기 위해 경계 반경 속성을 220px 220px 0 0로 설정합니다.머리의 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단의 경계 반지름이 각각 설정됩니다.우리는 이곳에서 속기 속성을 사용했고, 우리도 사용할 수 있다border-top-left-radius, border-top-right-radius 등등.
    • 이 점에서 우리는 약간 반원형의 머리가 있어야 한다. 우리의 안드로이드 로고가 이렇게 튀어나와야 한다.

    Waiting for the css code? No sorry I won't give it to you just yet. Try to follow along and see how much of this you can get correctly, it will make your learning experience better.


    계속 합시다.

    다음은 안드로이드의 눈과 안테나.


    눈.


    유사성에 대해서는 다음과 같이 하십시오.
  • 두 눈의 배경색을 흰색으로 설정합니다.
  • 너비와 높이를 20px 로 설정합니다.
  • position 속성을 absolute로 설정하여 원하는 위치로 이동할 수 있도록 합니다.
  • top 속성을 42px 로 설정합니다.
  • 과 경계 반지름 a100%.
    • 차이점에 대해서는 다음과 같이 하십시오.
  • 왼쪽 눈의 왼쪽 속성을 50px 로 설정합니다.
  • 오른쪽 눈의right 속성을 50px 로 설정합니다.

    • TV 수신 안테나


    유사성에 대해서는 다음과 같이 하십시오.
  • 폭과 높이를 6px 및 50px 로 설정합니다.
  • position 속성을 absolute로 설정하여 원하는 위치로 이동할 수 있도록 합니다.
  • top 속성을 -34px 로 설정합니다.
  • 과 경계 반지름 a3px.
    • 차이점에 대해서는 다음과 같이 하십시오.
  • 왼쪽 안테나의 left 속성을 50px로 설정하고 회전-30도
  • 오른쪽 안테나의right 속성을 50px로 설정하고 30도 회전
    • 이 점에서 우리는 우리의android 로고의 머리를 이렇게 보여야 한다

    다음은 시체.


    이것은 사실상 가장 간단한 부분이다. 왜냐하면 그것은 단지 직사각형일 뿐이기 때문에 우리는 머리를 처리하는 것처럼 경계 반경 속성을 처리할 수 있다.
    android 로고의 주체에 대해 다음과 같이 하십시오.
  • 너비와 높이를 각각 200px 및 184px 로 설정합니다.
  • top 속성을 42px로 설정합니다.
  • 경계 반지름을 0 0 25px 25px 로 설정합니다.
    • 이 점에서 우리는 우리의android 로고의 머리를 이렇게 보여야 한다

    그래, 그래, 환한 웃음을 지어라.

    다음은 팔과 다리.


    팔과 다리는 비슷한 점이 있다.
  • 양팔과 두 다리의 너비를 50px 로 설정합니다.
  • 위치를 절대적으로 설정합니다.
    • 팔의 유사성에 대해서는 다음과 같이 하십시오.
  • 높이를 150px 로 설정합니다.
  • 경계 반지름을 25px 로 설정합니다.
    • 두 팔 사이의 차이는 몸 양측58px에서 끌어내야 한다는 점이다.
    다리의 유사성에 대해서는 다음과 같이 하십시오.
  • 로고의 다리가 팔뚝보다 짧기 때문에 높이를 100px로 설정합니다.
  • 경계 반지름을 0 0 25px 25px 로 설정합니다.
  • top 속성을 192px 로 설정합니다.이것은 다리를 몸의 바로 아래로 끌어당겨 그들 사이에 약간의 공간을 증가시킬 것이다.
    • 두 다리 사이의 차이는 몸 양쪽에서 끌어내야 한다는 것이다40px.

    Hoola 우리 android 로고 봐.



    그러면 다음과 같이 해야 합니다.
    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;
}
    이것은github의 저장소 링크입니다

    네드 유돔바트 / Android 로고


    Android 로고는 순수 css와 html로 만들어졌습니다.


    Android 로고


    HTML과 CSS로 제작된 Android 로고입니다.
    연결 Interface
    View on GitHub
    및 전체 preview
    마음대로 나누세요.논평과 정정을 환영합니다.
    TimeZone 계산 시간대 및 여름철 처리, 파충류에 사용 가능
    win10 uwp 어떻게 WebView가 win10 핸드폰을 표시하는지

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage