使用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>
最後的結果:
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· Windows编程----内核对象竟然如此简单？
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用