一个有趣的CSS实例——模拟Google公司Logo

牛腩新闻发布系统看完也有天了,这几天整理了下笔记,也顺便看了一下关于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;   /* 规定的字体 */
}

此时,呈现的效果图

一个有趣的CSS实例——模拟Google公司Logo

然而,在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>
最终的效果图

一个有趣的CSS实例——模拟Google公司Logo

你可能感兴趣的:(Google)