<!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>
效果如图：
展开后
如果文章中有不对之处，随时欢迎您的纠正~~