首页 > 网站 > WEB开发 > 正文

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

2024-04-27 14:59:49

字体：大中小

来源：转载

供稿：网友

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

上一篇：HTML5 canvas标签实现刮刮卡效果

下一篇：Html5+JS实现手机摇一摇功能

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿创2023年5月以来最大单周涨幅

2024-04-27 13:35:46

雷军：小米正在申请3万件专利，以提升自身的竞争力

2024-04-27 13:33:47

人参泡酒15年后竟“复活”？网友：这酒还能喝不？

2024-04-24 22:53:44

芯片股普涨！英伟达市值一夜大涨6000亿元

2024-04-23 19:32:50

面馆老板1天卖100碗刚够交房租要卖到150碗才能实现盈利

2024-04-23 19:25:50

跌近30%！茶百道上市一小时跌没3年净利润

2024-04-23 19:13:19

疑难解答

图片精选

网友关注