首页 > Web开发 > 详细

使用HTML顯示Google的圖標

时间:2020-05-12 09:19:01      阅读:58      评论:0      收藏:0      [点我收藏+]

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

技术分享图片

 

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

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

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

1. 分析

  1. oogle的大小是一樣的,我們只需要對他們使用相同的標籤,然後對G使用不同的id區分開即可
  2. 兩個G的顏色是相同,對其class都設置為public-color-g
  3. 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>

最後的結果:

技术分享图片

 

使用HTML顯示Google的圖標

原文:https://www.cnblogs.com/ltozvxe/p/12873501.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!