一个有趣的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; /* 规定的字体 */
}
此时，呈现的效果图
然而，在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>
最终的效果图
