一個有趣的CSS例項——模擬Google公司Logo

紫竹風發表於2012-09-29
CSSGo

     牛腩新聞釋出系統看完也有天了，這幾天整理了下筆記，也順便看了一下關於CSS的書，在書上看到一個有趣的小例子，於是就想親自實現一下。這個例子很簡單，就是模擬Google的Logo。雖然模擬的並不是那麼的真實，但也算是長點知識吧。

簡單的頁面框架

新建一個Asp.net例項，新增主題、內容，並設定一些簡單的樣式。

HTML程式碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Google</title>
    <link href="common.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>Google</p>
</body>
</html>

CSS樣式

p 
{
    font-size: 80px;    /* 字號大小 */
    letter-spacing: -2px;   /* 字母間距 */
    font-family: Arial,Helvetica, Sans-Serif;   /* 規定的字型 */
}

此時，呈現的效果圖

 

     然而，在Google標誌中最醒目的是各個字母的顏色（除了特殊節日時的設計），因此需要對各個字母分別設定CSS風格樣式。我加入了<span>標記對其進行控制，並利用CSS分別設定各個字母的顏色。

HTML程式碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Google</title>
    <link href="common.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
</body>
</html>
最終的效果圖


相關文章