1. 图片压缩

相对与文本来说，图片是相当占用空间的。压缩图片是重中之重。

图片压缩工具推荐：

• Shrink-O-Matic
• Smush It
• 光影魔术手

2. Javascipt 压缩

为了增加页面的交互性及动画效果，很多页面大量使用 Javascript ，特别是 Jquery。

推荐工具：

• Javascript Compressor
• JS Compressor

3. CSS 压缩

由于 CSS 代码有很多缩写，所以使用压缩工具压缩一下，能大大的降低CSS文件的大小。

推荐工具：

• CSS Optimiser
• CSS Compressor
• Clean CSS

4. HTML 压缩

推荐使用 Dreamweaver 的清理工具。

附：Google Chrome 插件 —— 网页加载速度分析工具  Speed Tracer (by Google)

实例预览：

HTML代码：

<div id="menu">
<ul>
<li><a href="http://www.renniaofei.com"> <span class="title">任鸟飞</span> <span class="text">博客简介</span> </a> </li>
<li><a href="http://www.renniaofei.com"> <span class="title">博主</span> <span class="text">博主简介</span> </a> </li>
<li><a href="http://www.renniaofei.com"> <span class="title">博客</span> <span class="text">网页设计类博客</span> </a> </li>
<li><a href="http://www.renniaofei.com"> <span class="title">联系</span> <span class="text">请联系我们</span> </a> </li>
</ul>
</div>

CSS代码：

#menu ul {
	list-style:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1.4em;
	border:2px solid #000;
	border-left:none;
	float:left;
	clear:both;
	padding: 0px;
}
#menu ul li{
    float:left;
}
#menu ul li a{
    display:block;
    text-decoration:none;
    background-color:#444;
    padding:5px 10px;
    color:#fff;
    width:140px;
    border-right:1px solid #666;
    border-left:1px solid #000;
}
#menu ul li a span{
    display:block;
}
#menu ul li a span.title{
    border-bottom:1px solid #444;
}
#menu ul li a:hover span.title{
    border-bottom:1px dashed #f0f0f0;
    color:#ef0000;
}
#menu ul li a span.text{
    visibility:hidden;
    font-size:13px;
    text-align:right;
}
#menu ul li a:hover span.text{
    visibility:visible;
}

利用:hover特性制作的CSS导航菜单栏——最终效果预览

注：由于IE6不支持除a标签以外的:hover属性，故此例在IE6中没有预想中的效果。

#mydiv {
	position:absolute;
	top: 50%;
	left: 50%;
	width:350px;
	height:300px;
	margin-top: -150px; /* 顶边距设置为高度的 1/2 */
	margin-left: -175px; /*左边距设置为宽度的 1/2 */
	border: 2px solid #2982C6;
	background-color: #FFF;
    text-align: center;
}

具体实例预览

上面的CSS代码其实很好理解，首先要绝对定位，然后设置绝对定位的top和left属性值（50%），目的是使左上角的坐标位于父层元素高度和长度方向的中心（50%），然后将顶边距和左边距各往相反方向偏移高度和长度方向的一半（1/2）。

1. 去除链接外围边框

a:active, a:focus{outline:none;}

2. 元素水平居中

margin:0 auto;

3.遇到空格禁止换行

a{white-space:nowrap;}

4.溢出隐藏

#main{overflow:hidden;}

5.行高设置

line-height:24px;

6.清除左右两侧内容

clear: both;

7.显示成块

display: block;

8.文本缩进

text-indent: 20px;

有时候最简单的方法也是最有效率的方法，至于如何搭配使用这些常用的CSS的代码，那就要靠自己慢慢琢磨研究了。

不管怎么说，Google对Adsense布局样式进行调整还是顺了“民心”的，因为Google Adsense文字显示广告的显示样式确认很“难看”。

Google Adsense 调整前的文字显示广告的显示样式

Google Adsense 调整后的文字显示广告的显示样式

下面这个Adsense广告的尺寸是728×90，显示样式调整幅度更大，我很喜欢。

调整后的Google Adsense 文字显示广告，给我耳目一新的感觉。根据个人经验，文字显示广告的显示样式就应该经常的变更一下，而不仅仅还停留在对字体颜色，背景色的调整上，变化的食物不容易导致“审美疲劳”，这样间接导致广告点击率也会相应提高。

一. Google网页字体目录服务 地址及预览

网页字体目录服务网址：http://code.google.com/webfonts

网页字体目录服务预览：http://code.google.com/webfonts/preview

二. Google网页字体目录服务 使用方法

1. 在目录中选中字体，点击进入字体详细页面，如下图。

2. 点击 Get the code

将下面的字体链接代码复制到head内。

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

然后就可以在样式的定义中自由使用这个（Cantarell）字体了

<style>
h1 { font-family: 'Cantarell', arial, serif; }
</style>

三. 总结

Google 提供了很多类似的服务，使用Google网站字体目录服务，可以自由定义网站字体，不受本地影响，而且Google的服务质量和下载速度自不必多说。

我们可以直接使用 Google网站字体目录服务的预览 功能，自动生成对应的代码。

一.  含义

• a:link —— 初始链接的样式
• a:visited —— 链接访问之后的样式
• a:hover —— 鼠标悬浮到链接时的样式
• a:active —— 按住链接的样式

二. 普通用法

通常情况下，按照上面的顺序，定义其样式即可。

三. a:visited:hover高级用法

a:visited:hover的含义——链接访问之后，鼠标再次悬浮到链接时的样式。 这样就可以对比链接点击前后样式的变化，进一步告诉用户，此链接已经被访问过。

四.  a:visited:hover 使用示例

预览：a:visited:hover 高级应用

HTML

<div id="page_nav">
 <span> Page 3 of 8 </span>
 <a href='#1'>First</a>
 <a href='#2'>2</a>
 <span class='current'>3</span>
 <a href='#4'>4</a>
 <a href='#5'>5</a>
 <a href='#6'>6</a>
</div>

CSS

#page_nav {
 font-weight: bold;
 font-family: Helvetica, Arial, Helvetica, sans-serif;
}
#page_nav a {
 background-color: #ebf2ff;
 border: 1px solid #ccdeff;
 line-height: 25px;
 padding-right: 8px;
 padding-left: 8px;
 height: 25px;
 display: inline-block;
 margin-right: 3px;
}
#page_nav a:visited {
 TEXT-DECORATION: none;
 color: #aaa;
 border: 1px solid #eee;
}
#page_nav a:hover {
 border: 1px solid #7AABFF;
}
#page_nav span.current {
 border: 1px solid #ccdeff;
 padding-right: 8px;
 padding-left: 8px;
 line-height: 25px;
 height: 25px;
 display: inline-block;
 margin-right: 3px;
}
#page_nav span.disabled {
 DISPLAY: none
}
#page_nav a:visited:hover  /* 设置 a:visited:hover*/ {
 border:1px solid #a9a9a9;
 color:#666;
}

五. 浏览器对 a:visited:hover  支持情况

在Chrome、IE8、Firefox、Opera下通过测试，其他的浏览器暂未测试。

六. 总结

只需要简单设置一下 a:visited:hover  ，就可实现如此别致的效果，还不赶快试一下！

利用CSS制作内容浮动层效果预览

默认情况下

鼠标滑过时

示例预览：利用CSS制作内容浮动层效果

制作内容浮动层效果需要使用的3个CSS属性

• 伪类（:hover）—— 其作用就是响应鼠标滑过滑出动作
• z-index —— 元素层级，层级高的元素会覆盖层级低的元素
• display —— 元素显示类型

制作内容浮动层效果的HTML代码

<div class="infobox">
  <img src="http://www.renniaofei.com/wp-content/themes/renniaofei/images/default-thumbnail.gif" width="200">
  <div class="infotxt"><a href="http://www.renniaofei.com" title="任鸟飞网页设计博客">任鸟飞网页设计博客</a></div>
  <div class="more">任鸟飞网页设计博客，是一个专注于网页设计、网站建设、图形图像设计、搜索引擎、互联网趣味信息等的原创博客，作者任鸟飞。
Twitter：<a href="http://www.twitter.com/renniaofei">@renniaofei</a></div>
</div>

制作内容浮动层效果的CSS代码

.infobox {
	position:relative;
	border:1px solid #000;
	background-color:#FFFFFF;
	width:200px;
	padding:10px;
}
.infobox img {
	position:relative;
	z-index:2; /* 此元素的层级 z-index 须大于 .infobox:hover .more中设置的层级 */
}
.infobox .infotxt {
	text-align: center;
	margin-top: 10px;
}
.infobox .more {
	display:none; /* 默认情况下设置为不可见 */
}
.infobox:hover .more {
	display:block; /* 鼠标滑过时 显示层 */
	position:absolute;
	z-index:1;
	left:4px;
	top:4px;
	width:500px;
	height:200px;
	padding:5px 5px 5px 220px;
	border:1px solid #900;
	background-color:#FFEFEF;
}

总结

制作浮动层关键点在display和z-index。使用display控制元素的显示与否；使用z-index控制元素的层级。

一. 利用锚点快速返回页面顶端具体实现方法

紧接着<body>，添加如下代码

<a name="top"></a>

页面底部的快速返回顶端链接代码

<a href="#top">返回页面顶端</a>

二. 利用ID属性实现锚点功能

<body>
<div id="header">Header</div>
<a href="header">返回顶部</a>
</body>

因此利用ID属性实现页面的快速定位，代码相当简单。

利用此功能，我们可以开发更为强大的功能，比如说，我们也可以链接到其他页面的指定位置。

<a href="http://www.renniaofei.com/tools/short-url-untiny/#respond">20条评论</a>

上面的示例代码其实就是Wordpress博客中实现快速定位评论具体位置的html代码。所以说在修改Wordpress主题的时候要小心点，尽量不要删除标签ID属性值。

其实任鸟飞网页设计博客的主题就有此问题，在编写评论部分代码时，将评论ID丢掉了，你可以看到本博客右侧页面有 读者墙 功能，正常情况下是可以快速定位到该留言者的具体位置。

举例来说，读者墙某一评论者的链接如下:

<a href="http://www.renniaofei.com/tools/bluehost-webhosting-review/#comment-296" title="国外的比咱的好。">

本应该在

http://www.renniaofei.com/tools/bluehost-webhosting-review/

 页面的评论部分设置该评论者的ID（comment-296），但实际情况，本主题并没有。

先看一下主流浏览器对 _  *  !important 的支持情况

我们可以利用上面的差异，单独针对IE6编写相应的CSS代码。

符号功能解释：

• _（下划线）：只有只有IE6支持
• *（星号）：只有IE6和IE7支持
• !important：此行定义的属性值不会被后续定义覆盖，拥有最高优先级，IE7以上版本都会支持此属性。

知道_ * !important这三个符号的意义后，就可以编写单独针对IE6的CSS样式代码。

注：在CSS定义中，如果对某一属性有重复定义，则后面定义的属性值会覆盖前面的定义。

实例一 在IE6中使用GIF代替PNG

#logo {
background-image: url(logo.png); /*除IE6和IE7之外，其他浏览器都会使用PNG格式*/
background-repeat: no-repeat;
height: 80px;
width: 290px;
text-indent: -9999px;
}
/*使用 星号 */
* #logo {
background-image: url(logo.gif);  /*在IE6和IE7中，使用GIF图像格式代替PNG*/
}

实例二 兼容IE6的最小高度 min-height 设置方法

.box-min-height {
  min-height:550px;
  height:auto !important;  /*IE6 不支持!important，因此会忽略掉本行*/
  height:550px;
}