1、html做布局(超文本标记语言，标准通用标记语言下的一个应用。超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
2、javascript或者jquery添加切换效果(javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html标准通用标记语言下的一个应用)网页上使用，用来给html网页增加动态功能。
超出指定文本以省略号显示效果，用css的"text-overflow:ellipsis"实现
text-overflow:ellipsis 溢出的部分用 省略号 表示。
<!DOCTYPE html><html>
<head>
<style>
div.test
{
white-space:nowrap
width:123px
overflow:hidden
border:1px solid #000000
text-overflow:ellipsis
}
</style>
</head>
<body>
<p>这个 div 使用 "text-overflow:ellipsis" ：</p>
<div class="test">
This is some long text that will not fit in the box
</div>
</body>
</html>
在div块中要设置宽度，"overflow:hidden"要跟"text-overflow:ellipsis"使用才行
使鼠标经过显示 css3 绘图三角形参考下面方法：<a class="tooltips" href="#tooltips">这就是Tooltips<span>这些附加的说明文字在鼠标经过的时候显示。
</span></a>
<style type="text/css">
/*Tooltips*/
.tooltips{
position:relative/*这个是关键*/
z-index:2
}
.tooltips:hover{
z-index:3
background:none/*没有这个在IE中不可用*/
}
.tooltips span{
display: none
}
.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:block
position:absolute
top:21px
left:9px
width:15em
border:1px solid black
background-color:#ccFFFF
padding: 3px
color:black
}
</style>
