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>
最後的結果:
