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

最新推荐文章于 2024-01-21 17:20:17 发布

iteye_3224

最新推荐文章于 2024-01-21 17:20:17 发布

阅读量835

点赞数

文章标签： xhtml

牛腩新闻发布系统看完也有天了，这几天整理了下笔记，也顺便看了一下关于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>

最终的效果图