<style>
/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
 
<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

实例解析：
HTML) 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠标移动到 <div> 上时显示提示信息。
提示文本放在内联函数上(如 <span>) 并使用class="tooltiptext"。
CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。
tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。
CSS3 border-radius 属性用于为提示框添加圆角。
:hover 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示。

定位提示工具

以下实例中，提示工具显示在指定元素的右侧(left:105%) 。
注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。
如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。
在提示框显示在左边的情况也是这个原理
如果你想要提示工具显示在头部和底部。我们需要使用 margin-left 属性，并设置为 -60px。 这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。
底部提示框/顶部箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* 提示工具头部 /
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
右侧提示框/左侧箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; / 提示工具左侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

淡入效果

我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:
左侧提示框/右侧箭头：
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}

图片廊

图片响应式：class="responsive"

图像透明/不透明

看看下面的CSS：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。
IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

图像的透明度 - 悬停效果
CSS样式：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 /
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); / IE8 及其更早版本 */
}
3.拼合图像创建导航列表
实例

navlist{position:relative;}

navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}

navlist li, #navlist a{height:44px;display:block;}

home{left:0px;width:46px;}

home{background:url('img_navsprites.gif') 0 0;}

prev{left:63px;width:43px;}

prev{background:url('img_navsprites.gif') -47px 0;}

next{left:129px;width:43px;}

next{background:url('img_navsprites.gif') -91px 0;}

尝试一下 »

实例解析：

• navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位

• navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位

• navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px

现在开始每个具体部分的定位和样式：

• home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px

• home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）

• prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。

• prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）

• next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.

• next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）