这是一款纯纯CSS3带头像的垂直彩色手风琴菜单代码,个人信息手风琴展开显示代码,使用简单,而且当鼠标滑过菜单项时,当前菜单项即可显示一个精美的头像,并且在头像旁边显示一些格式化的文字。
使用方法
在页面引入需要显示的CSS3文件,完美兼容IE9+
<link rel="stylesheet" href="css/style.css">
在需要显示的位置插入Html代码:
<div class="container"> <div class="box box1"> <div class="name"> <h4>知网资讯</h4> <h5>Hello</h5> </div> <p>66.6%</p> </div> <div class="box box2"> <div class="name"> <h4>知网资讯</h4> <h5>Hi</h5> </div> <p>62.3%</p> </div> <div class="box box3"> <div class="name"> <h4>知网资讯</h4> <h5>Bye</h5> </div> <p>60.6%</p> </div> <div class="box box4"> <div class="name"> <h4>知网资讯</h4> <h5>Bye!</h5> </div> <p>62.6%</p> </div> </div>