浮出层是web页面中经常用到的功能,带有小小尖角的浮出层则更为生动,所以今天带给大家的是有角的浮出层,一起看看吧!
是的,我们即将实现的就是以上功能,是不是很生动?
贴上HTML:
<div class="poptip"> <span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span> <span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span> <span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span> <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span> Hi,知道吗? <br>大前端D7主题很快就疯抢了! </div>
以上HTML构成了一个浮出层和四个方向的尖角,其实你只需要其中的一个span标签,所以真正用上的代码并没那么多。
贴上CSS:
/* poptip */ .poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;} .poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;} .poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;} .poptip-arrow em{color: #FFBB76;} .poptip-arrow i{color: #FFFCEF;text-shadow:none;} .poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;} .poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;} .poptip-arrow-top{top: -6px;} .poptip-arrow-top em{top: -1px;} .poptip-arrow-top i{top: 0px;} .poptip-arrow-bottom{bottom: -6px;} .poptip-arrow-bottom em{top: -8px;} .poptip-arrow-bottom i{top: -9px;} .poptip-arrow-left{left:-6px;} .poptip-arrow-left em{left:1px;} .poptip-arrow-left i{left:2px;} .poptip-arrow-right{right:-6px;} .poptip-arrow-right em{left:-6px;} .poptip-arrow-right i{left:-7px;}
这段CSS写的已经很简练了,所以不要嫌多,因为它具有很强的扩展性。
如果你希望尖角居中显示,可以在.poptip-arrow
这个span上加上style="left:50%"
或者style="top:50%"
这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器,所以不必担心其兼容性和实用性。据悉,支付宝等站点采用的也是此方式。
当然,不排除还有更好的实现方式,如你知道,请留言告诉大家,谢谢!
用背景图片?
很强, 学习了
.poptip-arrow-bottom em{top: -8px;}
.poptip-arrow-bottom i{top: -9px;}
这里的top:-8px改为bottom:-1px不就行了吗,只改了下bottom
挺漂亮
不错 , 欢迎来我博客坐坐!
微利古德!!!
不错的方法,学习了
不错!!很值得借鉴 😀
ie6下面有点问题 底部的箭头显示不正常,这里不能截图
可能用◆放在底层,上面再用一层盖住◆的一半这样更简单点。。。
考虑过搜索引擎抓取问题吗?这算是比较严重的一个缺陷吧?
最早看到这种实现的是在张鑫旭的博客
很棒!我给你加了套皮肤~http://imshanks.com/colorful-poptip-only-css/
Don’t you understand that it’s the best time to get the loans, which would realize your dreams.
感谢分享…!支持!!!
支持先锋性网站!越看越舒服啊!
好方法。。。学习了。。
一般都用:after,:before生成三角。
不错,很有创意
这个方法在centOS的firefox下没有效果。。
mac下木有simsun字体~
这种写法是不是还与字体挂钩啊?
是的,所以我们设置了simsun , 宋体
学习了,楼主真棒!
哈哈,之前也写了篇博客“三种纯CSS实现三角形的方法”,用的border,◆ 字符和 transfrom 旋转 45 度。
附上链接,前端因分享而更精彩:)
http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html
链接呢?哪里去了?
http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html 我上面写了啊?没出来?晕。。
浩子的在线代码高亮不错,一直用着
感觉很强大,在ietester测试过了,连ie6都没问题。向你学习。
长时间存在觉得好不爽
CSS
纠结的东西!
每次登陆浩子大哥都有新奇的东西分享谢谢啦 😳
呵呵 用来弄个公告 不错
浩子,”点此查看实例展示 ” 或者 “实例下载”是用的啥插件实现的呀?
耗子你的站是不是遭黑了? 还是你添加了广告?
为什么我点开任何连接 都有窗口弹出?
弹出的全是性药或网游广告
mark。。。。
不晓得为什么,我怎么用了以后发现总是布局中啊。浩子看一下好不?
学习学习了哦
全系高手的~\(≧▽≦)/~啦啦啦
博主那个实例页面是怎么实现的?这样?pid=4518
这个,近期会出一篇文章写写,因为不是一句话的事儿!
好的,感谢
另外,贵站Logo那的浮出层显示在了新会员白菜网送体验金微博下面了。
嗯,你用的是IE? 没测试过iE,去看看!
发现你公布的CSS代码第一、二行超出了。。。。。
在opera下有问题,上方箭头和右边的箭头定位不准确
css3被大家开始慢慢的新会员白菜网送体验金起来了。
这个木有用到CSS3啊
挺好的,我记得新浪微博就是用的这种
浩子,给提个建议,你把博客加上返回顶部,没有这个功能,很不方便。
必须有,这几天就加上
博主,公布下代码吧!
这就对了!加油!
还没完,你加上这个返回顶部按钮之后,再让他别一下子跳上去,而是有个滚动的过程,效果就完美了!升级完,再发我份最新滴:)
用js实现就好,网上一大堆,很简单。
向您学习致敬
好厉害,向你学习。。。。
哇,很好啊!
耗子哥,你真是越来越厉害了
这话怎么说,这个不过是比较简单的CSS,所以,继续学习中
哇塞,这个先复制了
不用复制,永久保存在这,记得看完点下下面的广告就是了,哈哈
ip很熟悉啊
大致明白原理,但没有实践过~
你的网站越来越漂亮了,谁设计的
木有设计,凭感觉写滴,也只能给咱这些个代码仔看看了,哈哈
这个方法不错。我都是用position+border实现的。呵呵
<ul><li class="current_page_item">网站首页<span></span></li></ul>
.current_page_item {
background: none repeat scroll 0 0 #85D4F3;
position: relative;
}
.current_page_item span {
border-color: #85D4F3 #85D4F3 #FFFFFF;
border-style: solid;
border-width: 5px;
bottom: -1px;
font-size: 0;
left: 50%;
line-height: 0;
margin-left: -5px;
position: absolute;
}
这种方法存在很多缺陷,想必你已知道,不过够用就好!
说一下,给我们扫扫盲。
我该说的都在上面了哇
你是不是要问博主的呀?
是呀。