使用HTML顯示Google的圖標

0. 我們先看一下Google的圖標是怎麼樣的:

而我們要做的就是使用HTML模擬一個Google的logo

其中各個字母的顏色我已經使用取色器取出(有誤差):

G-#4285F4
o-#EA4335
o-#FBBC05
l-#34A853

1. 分析

oogle的大小是一樣的,我們只需要對他們使用相同的標籤,然後對G使用不同的id區分開即可
兩個G的顏色是相同,對其class都設置為public-color-g
o和e同理,設置為public-color-oe

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>GoogleLogo</title>
    <style>
        #G {
            font-size: 100px;
        }
        
        span {
            font-size: 50px;
        }
        
        .public-color-g {
            color: #4285F4;
        }
        
        .public-color-oe {
            color: #EA4335;
        }
    </style>
</head>

<body>
    <span id="G" class="public-color-g">G</span>
    <span class="public-color-oe">o</span>
    <span style="color: #FBBC05;">o</span>
    <span class="public-color-g">g</span>
    <span style="color: #34A853;">l</span>
    <span class="public-color-oe">e</span>
</body>

</html>

最後的結果: