CSS结合DIV实现的右侧浮动效果

10/24/2015来源:HTML教程人气:1027

  我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果。

  HTML

  我们希望悬浮效果最后加载,因此一般将其放置在页面HTML的末尾,我们建立一个.side-bar,里面包含了QQ在线咨询,微信(鼠标滑向弹出二维码效果),微博,以及Email联系方式等内容,这些内容我们都以标签包裹。

  代码如下:


<div class="side-bar">
<a href="#" class="icon-qq">QQ在线咨询</a>
<a href="#" class="icon-chat">微信<div class="chat-tips"><i></i>
<img style="width:138px;height:138px;" src="helloweba.jpg" alt="微信订阅号"></div></a>
<a target="_blank" href="" class="icon-blog">微博</a>
<a href="http://www.jb51.net" class="icon-mail">mail</a>
</div>