1.4 添加网站LOGO
网站LOGO通常是指一个标志符号，该标志符号通常使用文字、图形、色彩等手法组合而成，并表达出一定的特殊内涵。我们举一些例子，互联网巨头（譬如Google、Facebook、Microsoft等）的门户网站一般都使用以自己公司名称为主题设计制作的网站LOGO；产品设备制造商（譬如汽车、服装、食品等）的公司网站一般都使用其产品注册商标为主题设计制作的网站LOGO；而诸如提供娱乐、购物、旅游等在线服务类网站的LOGO，设计理念更为丰富多彩，写意性和抽象性的特点更为突出。可以说，无论公司网站采用什么风格形式的LOGO，其最突出的特征就是能够表达出公司的核心价值，能够给用户最直接、最深刻、最具想象力的视觉效果。
网站LOGO设计大概可以分为以下几大类：
● 第一大类是文字LOGO，指使用中文、英文、数字等符号经过艺术处理和美化加工后形成的文字标志，且往往是以公司名称为主体而设计的。
● 第二大类是图形LOGO，指由点、线、面等不规则图形所组成，并配有鲜明色彩对比所创造出来的新图形，且该图形更具抽象性。
● 第三大类是图像LOGO，指以现实生活中存在的事物为主体所制作的图像，产品类公司网站一般采用这种LOGO。
目前，网站LOGO基本使用CSS样式代码来设计制作，使用CSS方式设计网站LOGO有多种实现方法，下面我们一一举例。
1.4.1 添加网站图像LOGO
下面这段代码（参见源代码chapter01/ch01-htmlcomp-logo-png.html文件）实现一个网站图像LOGO。
【示例1-14】 CSS之网站图像LOGO
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <style type="text/css">
06 body {
07 margin: 32px; /** 设置页面边距 */
08 font: normal 12px/1.0em arial,verdana; /** 设置页面字体 */
09 }
10 /** h1 */
11 h1 {
12 margin: 16px; /** 设置外边距 */
13 padding: 8px; /** 设置内边距 */
14 font: bold 16px/1.6em arial,verdana; /** 设置字体 */
15 letter-spacing: 2px; /** 设置字符间距 */
16 text-align: center; /** 设置字符居中 */
17 }
18 /** div */
19 div {
20 margin: 32px; /** 设置外边距 */
21 padding: 2px; /** 设置内边距 */
22 }
23 /** span */
24 span {
25 width: 50%; /** 设置宽度 */
26 height: auto; /** 设置高度 */
27 }
28 /** p */
29 p {
30 margin: 4px; /** 设置外边距 */
31 padding: 2px; /** 设置内边距 */
32 font: bold 12px/1.2em arial,verdana; /** 设置字体 */
33 letter-spacing: 2px; /** 设置字符间距 */
34 }
35 /** .logo */
36 .logo {
37 width:100px; /** 设置宽度 */
38 height:100px; /** 设置高度 */
39 background-image:url(images/logo.png); /** 引用图像 */
40 background-position:2px 2px;
41 background-repeat:no-repeat;
42 float:left; /** 设置浮动定位 */
43 }
44 </style>
45 <title>HTML之CSS图像logo</title>
46 </head>
47 <!-- 添加文档主体内容 -->
48 <div>
49 <span class="logo" title="logo"></span>
50 <h1>HTML之CSS图像logo</h1>
51 </div>
52 <hr>
53 <div>
54 <p>HTML之CSS图像logo</p>
55 </div>
56 <!-- 添加文档主体内容 -->
57 </body>
58 </html>
在这段HTML代码中，网站LOGO是通过CSS样式代码引用本地图像来实现的。下面解释这段代码。
第49行通过span标签定义了一个放置网站LOGO的区域，并使用class类属性引用了属性值为"logo"的CSS样式类，同时使用title属性定义了"logo"属性值。
而名称为"logo"的CSS样式类是在第36～43行中定义的，第39行通过background-image属性引用了本地图像（"images/logo.png"），第42行通过float属性定位浮动位置为左侧，这样就保证了网站LOGO的位置居于页面左上角。
第52行使用hr标签创建了一条水平分割线，这样使得第48～51行定义的div层看上去像是页面的标题栏，第49行定义的网站LOGO和第50行定义的标题均位于该标题栏内。
下面我们运行测试这个页面，页面打开后的效果如图1.18所示。我们看到使用CSS样式定义的网站LOGO显示出来了，使用图像方式定义LOGO还是很容易的。
图1.18 CSS之图像网站LOGO效果图
1.4.2 添加网站文字LOGO
我们再看一个示例，这段代码（参见源代码chapter01/ch01-htmlcomp-logo-text.html文件）实现一个动态文字网站LOGO。
【示例1-15】 CSS之网站文字LOGO
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <style type="text/css">
06 body {
07 margin: 32px; /** 设置页面边距 */
08 font: normal 12px/1.0em arial,verdana; /** 设置页面字体 */
09 }
10 @import url(http://fonts.googleapis.com/css?family=fantasy);
11 #logo {
12 width: auto;
13 height: 64px;
14 font-family: fantasy;
15 font-size: 24px;
16 color: purple;
17 margin: 16px;
18 -webkit-transition: all 3s ease-in-out;
19 -moz-transition: all 3s ease-in-out;
20 -o-transition: all 3s ease-in-out;
21 -ms-transition: all 3s ease-in-out;
22 transition: all 3s ease-in-out;
23 text-shadow:
24 1px 1px 0 rgba(36,117,203,1),
25 13px 3px 0 rgba(36,117,203,0.9),
26 5px 5px 0 rgba(36,117,203,0.8),
27 17px 7px 0 rgba(36,117,203,0.7),
28 9px -15px 0 rgba(36,117,203,0.6),
29 -11px 11px 0 rgba(36,117,203,0.5),
30 7px -13px 0 rgba(36,117,203,0.4),
31 15px 30px 0 rgba(36,117,203,0.3),
32 -20px 17px 0 rgba(36,117,203,0.2),
33 -19px 19px 0 rgba(36,117,203,0.1),
34 30px -21px 0 rgba(36,117,203,0.08),
35 23px 23px 0 rgba(36,117,203,0.06),
36 -25px 40px 0 rgba(36,117,203,0.04),
37 27px 27px 0 rgba(36,117,203,0.02),
38 -29px 29px 0 rgba(36,117,203,0.0);
39 }
40 #logo:hover {
41 -webkit-transform: rotate(3deg) scale(1.05);
42 -moz-transform: rotate(3deg) scale(1.05);
43 -o-transform: rotate(3deg) scale(1.05);
44 -ms-transform: rotate(3deg) scale(1.05);
45 transform: rotate(3deg) scale(1.05);
46 text-shadow:
47 10px 1px 0 rgba(36,117,203,0.1),
48 13px 23px 0 rgba(36,117,203,0.2),
49 15px 5px 0 rgba(36,117,203,0.03),
50 17px 7px 0 rgba(36,117,203,0.04),
51 9px 15px 0 rgba(36,117,203,0.2),
52 -11px -11px 0 rgba(36,117,203,0.06),
53 17px -13px 0 rgba(36,117,203,0.07),
54 15px 30px 0 rgba(36,117,203,0.1),
55 -20px -17px 0 rgba(36,117,203,0.06),
56 -19px 19px 0 rgba(36,117,203,0.08),
57 5px 21px 0 rgba(36,117,203,0.02),
58 23px -23px 0 rgba(36,117,203,0.1),
59 25px 40px 0 rgba(36,117,203,0.2),
60 27px 17px 0 rgba(36,117,203,0.1),
61 -29px -29px 0 rgba(36,117,203,0.1);
62 }
63 /** div */
64 div {
65 margin: 32px; /** 设置外边距 */
66 padding: 2px; /** 设置内边距 */
67 }
68 /** span */
69 span {
70 width: 33%; /** 设置宽度 */
71 height: auto; /** 设置高度 */
72 }
73 /** h1 */
74 h1 {
75 margin: 2px; /** 设置外边距 */
76 padding: 2px; /** 设置内边距 */
77 font: bold 16px/1.6em arial,verdana; /** 设置字体 */
78 letter-spacing: 2px; /** 设置字符间距 */
79 text-align: right; /** 设置字符居中 */
80 }
81 /** p */
82 p {
83 margin: 4px; /** 设置外边距 */
84 padding: 2px; /** 设置内边距 */
85 font: bold 12px/1.0em arial,verdana; /** 设置字体 */
86 letter-spacing: 2px; /** 设置字符间距 */
87 }
88 </style>
89 <title>HTML之CSS文本logo</title>
90 </head>
91 <!-- 添加文档主体内容 -->
92 <div>
93 <span id="logo"><a href="#">CSS文本logo</a></span>
94 <span><h1>HTML之CSS文本logo</h1></span>
95 </div>
96 <hr>
97 <div>
98 <p>HTML之CSS文本logo</p>
99 </div>
100 <!-- 添加文档主体内容 -->
101 </body>
102 </html>
在这段HTML代码中，网站LOGO是通过文字CSS样式代码来实现的。下面解释这段代码。
先来看第10行，这里使用一个不太常用的语法@import引入了一个名称为"fantasy"的文本字体，而引用该字体时通过url关键字定义了一个链接地址（http://fonts.googleapis.com/css?family=fantasy），这表明其取自于Google公司提供的字体库。之所以要引入这样一个字体，是因为这段代码要实现一个CSS样式的文本LOGO，使用一种特殊的风格字体显示出来会更吸引眼球。另外，关于@import的语法，读者可以参阅相关文档，其使用方法类似于link标签，但又不尽相同。
再来看第92～99行，这是页面的主体部分。第93行定义了一个id值为"logo"的span标签，这里就是我们要实现的文字LOGO；第94行定义了一段文字，相当于页面标题；第96行使用hr标签创建了一条水平分割线，这样使得第92～95行定义的div层与第97～99行定义的div层隔离开来，形成了页面标题栏和页面正文部分的效果。
而第93行定义id值"logo"，是在CSS样式代码部分的第11～39行与第40～62行中实现的。这里主要使用了文字渐变（"transition"）和文字阴影（"text-shadow"）两个CSS 3属性（注意，这两个是CSS 3版本才支持的属性）。使用渐变"transition"属性后，当鼠标放置于某区域中时会产生宽度上的变化效果，且针对不同的浏览器有不同的定义方法，在第18～22行和第41～45行中进行了定义；使用阴影"text-shadow"属性后会为文字增加阴影效果，在第23～38行和第46～61行中进行了定义。
下面我们运行测试这个页面，页面打开后的效果如图1.19所示。我们看到使用CSS样式定义的网站文字LOGO显示出来了，该LOGO还具有动态效果，当用户将鼠标放置于该LOGO区域中时，文字会产生动态旋转效果，如图1.20所示。
图1.19 CSS之网站文字LOGO效果图（1）
图1.20 CSS之网站文字LOGO效果图（2）
1.4.3 添加网站图形LOGO
我们再看一个示例，这段代码（参见源代码chapter01/ch01-htmlcomp-logo-drawing.html文件）通过CSS绘制图形来实现网站LOGO。
【示例1-16】 CSS之网站图形LOGO
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <style type="text/css">
06 body {
07 margin: 16px auto; /** 设置外边距 */
08 font: bold 16px/1.6em arial,verdana; /** 设置字体 */
09 text-align: center;
10 }
11 /** drawing */
12 .drawing-holder {
13 float: left; /** 定义浮动 */
14 margin: 32px; /** 设置外边距 */
15 text-align: center;
16 }
17 .drawing {
18 position: relative; /** 定义位置 */
19 background: white; /** 定义背景色 */
20 width: 100px; /** 定义宽度 */
21 height: 100px; /** 定义高度 */
22 border-radius: 48px; /** 定义圆角 */
23 box-sizing: border-box; /** 定义边框 */
24 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /** 定义边框阴影 */
25 }
26 .drawing:after { /** 定义伪类after */
27 content: '';
28 display: block;
29 clear: both;
30 }
31 .drawing-name {
32 line-height: 36px; /** 定义行高度 */
33 font-family: 'Oswald', sans-serif;
34 }
35 /* ----- logo ----- */
36 .drawing.logo { /** 定义logo类 */
37 padding: 24px;
38 }
39 .drawing.logo .wrap {
40 position: relative;
41 width: 100%;
42 height: 100%;
43 }
44 .drawing.logo .logoshape { /** 定义logoshape类 */
45 position: absolute; /** 定义位置 */
46 left: 18px; /** 定义位置"左" */
47 width: 16px; /** 定义宽度 */
48 height: 16px; /** 定义高度 */
49 background: black; /** 定义背景色 */
50 -webkit-transform: rotate(-8deg) skew(16deg, 16deg);/** 定义旋转 */
51 -moz-transform: rotate(-8deg) skew(16deg, 16deg); /** 定义旋转 */
52 -ms-transform: rotate(-8deg) skew(16deg, 16deg); /** 定义旋转 */
53 transform: rotate(-8deg) skew(16deg, 16deg); /** 定义旋转 */
54 }
55 .drawing.logo .logoshape:nth-child(2) { /** 定义第2个子元素 */
56 margin-top: 24px;
57 }
58 .drawing.logo .logoshape:nth-child(3) { /** 定义第3个子元素 */
59 margin-left: -24px;
60 }
61 .drawing.logo .logoshape:nth-child(4) { /** 定义第4个子元素 */
62 margin-left: 24px;
63 }
64 .drawing.logo .logoshape:nth-child(5) { /** 定义第5个子元素 */
65 margin-top: 48px;
66 }
67 .drawing.logo .logoshape:nth-child(3),
68 .drawing.logo .logoshape:nth-child(4) { /** 定义第3、4个子元素 */
69 margin-top: 24px;
70 }
71 /** title */
72 #title {
73 float: right;
74 margin: 32px;
75 height: 100px;
76 text-align: center;
77 }
78 /** h1 */
79 h1 {
80 margin: 2px; /** 设置外边距 */
81 padding: 2px; /** 设置内边距 */
82 font: bold 24px/2.0em arial,verdana; /** 设置字体 */
83 letter-spacing: 2px; /** 设置字符间距 */
84 text-align: right; /** 设置字符居中 */
85 }
86 </style>
87 <title>HTML之CSS图形logo</title>
88 </head>
89 <!-- 添加文档主体内容 -->
90 <div class="drawing-holder">
91 <div class="drawing logo">
92 <div class="wrap">
93 <div class="logoshape"></div>
94 <div class="logoshape"></div>
95 <div class="logoshape"></div>
96 <div class="logoshape"></div>
97 <div class="logoshape"></div>
98 </div>
99 </div>
100 <div class="drawing-name">LOGO</div>
101 </div>
102 <div id="title">
103 <h1>HTML之CSS图形logo</h1>
104 </div>
105 <!-- 添加文档主体内容 -->
106 </body>
107 </html>
在这段HTML代码中，网站LOGO是通过图形CSS样式代码来实现的。下面解释这段代码。
先来看第90～101行，这里使用嵌套的div层标签定义了一组图形。
第90行为最外面的div层，引用了一个CSS类（名称为"drawing-holder"），该CSS类的定义在第12～16行，主要用于实现一个图形LOGO的层（div）容器。
第91行为第二个div层，引用了一个CSS类（名称为"drawing logo"），注意"drawing"与"logo"之间的空格，表明"logo"是"drawing"的子类。"drawing"类的定义在第17～25行，定义了位置、长宽、背景、圆角和边框及其阴影等属性；"logo"类的定义在第36～38行，定义了内边距属性。
第92行为第三个div层，引用了一个CSS类（名称为"wrap"），可以将其理解为一组LOGO图形的小容器，"wrap"类的定义在第39～43行，定义了位置和长宽属性。
生成图形LOGO的主要代码在第93～97行，这里定义了一组div层，引用了相同的CSS类（名称为"logoshape"）。"logoshape"类的定义在第44～70行，其中第44～54行是对图形LOGO主体的定义，不但对位置、尺寸、背景色等属性进行了定义，还使用旋转变换属性美化了LOGO图形，其中rotate方法表示以图形中心进行旋转，skew方法表示沿着x轴进行2D旋转；而第55～70行代码使用伪类选择器nth-child对第2～5个图形的位置进行了定义，这样就可以在页面上展示一组完整的图形LOGO。
第100行使用div层标签定义了图形LOGO的文字描述部分，其引用了一个CSS类（名称为"drawing-name"），"drawing-name"类的定义在第31～34行，主要定义了字体属性。
下面我们运行测试这个页面，页面打开后的效果如图1.21所示。我们看到使用纯CSS样式代码定义的网站LOGO是一个包含5个小菱形及一个外部阴影的图形，5个小菱形呈梅花形状布置，图形LOGO整体十分简洁美观。
图1.21 CSS之网站图形LOGO效果图