当前位置

：网站首页> 电脑教程 > 网页设计 > HTML5 > 浏览文章

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

作者：小梦来源: 网络时间: 2024-01-28 阅读: 大中小

　　我们见过很多页面右侧浮动效果，最早有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>

标签:quot lt gt 效果 class 收藏本文

相关阅读

热点阅读

网友最爱

关于我们周公解梦服务条款免责声明广告联系联系我们

Copyright © 2014-2022 常梦网 All Rights Reserved. 豫ICP备15026022号-3

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！

本站周公解梦大全查询仅供娱乐,请勿盲目迷信