网页css 浮动广告图标的代码是什么，最好是css的

来源：蜘蛛抓取(WebSpider) 时间：2012-05-10 08:42 标签： css 浮动广告
欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> +jQ弹出层特效、可弹出独立网页层、弹出图片层、div层网页变半透明灰色遮盖，点击非弹出层时弹出层消失，同时可以让弹出层自动隐藏。
本弹出特效兼容各大浏览器，并且点击焦点后弹出的层，可以为弹出独立另外的网页页面、可以为图片层、flash层、自动消失层，同时弹出层居于网页正中，突出背景为黑灰色半透明遮挡原来的网页内容，让弹出层突出显示，更具立体感。
弹出图片层截图
特效弹出网页层截图
css div弹出可自动消失的层特效截图
此弹出层特效包含了几种场合的使用效果，弹出加载一个网页、弹出加载一个图片、弹出加载一个flash、弹出加载一个层几秒后自动隐藏，非常实用简单兼容各大浏览器。
在线演示：
弹出层打包下载：
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 10:24
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台纯CSS结合DIV实现的右侧底部简洁悬浮效果
作者：佚名
字体：[ ] 来源：互联网 时间：09-10 15:11:52
右侧浮动效果，最早有QQ联系面板，对联广告等，大多数都是基于Javascript实现的动态效果，今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果
我们见过很多页面右侧浮动效果，最早有QQ联系面板，对联广告等，大多数都是基于Javascript实现的动态效果，今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果。 &HTML 我们希望悬浮效果最后加载，因此一般将其放置在页面HTML的末尾，我们建立一个.side-bar，里面包含了QQ在线咨询，微信（鼠标滑向弹出二维码效果），微博，以及Email联系方式等内容，这些内容我们都以&a&标签包裹。 代码如下: &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:138height:138" src="helloweba.jpg" _fcksavedurl=""helloweba.jpg"" alt="微信订阅号"&&/div&&/a& &a target="_blank" href="" class="icon-blog"&微博&/a& &a href=&a href="http://www.jb51.net"&http://www.jb51.net&/a& class="icon-mail"&mail&/a& &/div& CSS 我们使用CSS来完成浮动即鼠标滑向弹出效果。我们准备一张图片right_bg.png，包含了几个内容的图标，然后通过background-position各个图标对应的a内容。我们使用position: fixed以及设置bottom和right值将.side-bar固定在右下角，这样无论页面如何滚动，.side-bar将一直在右下角位置不变。这里需要提下ie6下fixed效果需要单独处理，但本文不做详解，放弃ie6吧。 代码如下: .side-bar a,.chat-tips i {background: url(right_bg.png) no-} .side-bar {width: 66position:bottom: 20right: 25font-size: 0;line-height: 0;z-index: 100;} .side-bar a {width: 66height: 66display: inline-background-color: #margin-bottom: 2} .side-bar a:hover {background-color: #669} .side-bar .icon-qq {background-position: 0 -62} .side-bar .icon-chat {background-position: 0 -130position:} .side-bar .icon-blog {background-position: 0 -198} .side-bar .icon-mail {background-position: 0 -266} 这里还有个鼠标滑向微信图标的效果，当鼠标hover时，.chat-tips的display属性设置为block，并且设置定位位置，一下代码还包含了一个箭头的CSS写法： 代码如下: .side-bar .icon-chat:hover .chat-tips {display:} .chat-tips {padding: 20border: 1px solid #d1d2d6;position:right: 78top: -55background-color: #display:} .chat-tips i {width: 9height: 16display: inline-position:right: -9top: 80background-position:-88px -350} .chat-tips img {width: 138height: 138} 简单的几行CSS代码就完成了一个简洁的右下角悬浮效果，快去试下吧。
大家感兴趣的内容
12345678910
最近更新的内容未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口标签： , , , , , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
希望拥有自己的域名博客？
如果你有1~3年前端开发经验，不妨
发表评论（目前69 条评论）
热门总排行扫描二维码用手机看文章

我要回帖

更多关于 css 浮动广告 的文章

 

随机推荐