<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Document</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{max-width: 640px; margin: 0 auto; background-color: #ddd; font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;}
a{text-decoration: none; color: #333;}
.friendship{ overflow: hidden; position: relative; height: 55px; background-color: #fff; }
.friendship a{ float: left; display: block; margin: 5px; }
.friendship i{ position: absolute; bottom: 10px; right: 10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top:10px solid #0066cc; cursor: pointer;}
.f_up{
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
}
</style>
</head>
<body>
<div class="friendship" id="friendship">
<i class="f_down" onclick="var obj_link=document.getElementById('friendship');this.className=='f_up'?(this.className='f_down',obj_link.style.height='55px'):(this.className='f_up',obj_link.style.height='auto');"></i>
<a href="#">百度</a>
<a href="#">淘宝</a>
<a href="#">京东</a>
<a href="#">第一星座</a>
<a href="#">付费算命</a>
<a href="#">取名网</a>
<a href="#">爱花卉</a>
<a href="#">福缘殿</a>
<a href="#">水晶物语</a>
<a href="#">命里网</a>
<a href="#">百度</a>
<a href="#">淘宝</a>
<a href="#">京东</a>
<a href="#">第一星座</a>
<a href="#">付费算命</a>
<a href="#">取名网</a>
<a href="#">爱花卉</a>
<a href="#">福缘殿</a>
<a href="#">水晶物语</a>
<a href="#">命里网</a>
<a href="#">百度</a>
<a href="#">淘宝</a>
<a href="#">京东</a>
<a href="#">第一星座</a>
<a href="#">付费算命</a>
<a href="#">取名网</a>
<a href="#">爱花卉</a>
<a href="#">福缘殿</a>
<a href="#">水晶物语</a>
<a href="#">命里网</a>
<a href="#">百度</a>
<a href="#">淘宝</a>
<a href="#">京东</a>
<a href="#">第一星座</a>
<a href="#">付费算命</a>
<a href="#">取名网</a>
<a href="#">爱花卉</a>
<a href="#">福缘殿</a>
<a href="#">水晶物语</a>
<a href="#">命里网</a>
</div> </body>
</html>
效果如图：
展开后
如果文章中有不对之处，随时欢迎您的纠正~~