css常用浮出层(tip效果)的写法
网站建设 2023-01-28 21:39www.1681989.com免费网站
HTML
复制代码
代码如下:<div class="poptip">
<span class="poptip-arrow poptip-arrow-"><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,知道吗?
很快就疯抢了!
</div>
以上HTML构成了一个浮出层和四个方向的尖角,其实你只需要其中的一个span标签,所以真正用上的代码并没那么多。
CSS
复制代码
代码如下:/ poptip /
.poptip{position: absolute;: 20px;left:20px;paddg: 6px 10px 5px;paddg: 7px 10px 4px;le-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 #c;}</p> <p>.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;:0;font-style: normal;}
.poptip-arrow em{color: #FFBB76;}
.poptip-arrow i{color: #FFFCEF;text-shadow:none;}</p> <p>.poptip-arrow-,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;marg-left:-6px;}
.poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;: 12px;marg-:-6px;}</p> <p>.poptip-arrow-{: -6px;}
.poptip-arrow- em{: -1px;}
.poptip-arrow- i{: 0px;}</p> <p>.poptip-arrow-bottom{bottom: -6px;}
.poptip-arrow-bottom em{: -8px;}
.poptip-arrow-bottom i{: -9px;}</p> <p>.poptip-arrow-left{left:-6px;}
.poptip-arrow-left em{left:1px;}
.poptip-arrow-left i{left:2px;}</p> <p>.poptip-arrow-right{right:-6px;}
.poptip-arrow-right em{left:-6px;}
.poptip-arrow-right i{left:-7px;}
如果你希望尖角居中显示,可以在.poptip-arrow这个span上加上style="left:50%"或者style=":50%"
这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器,所以不必担心其兼容性和实用性。据悉,支付宝等站点采用的也是此方式。
上一篇:css3新增颜色表示方式分享
下一篇:css盒子模型详解加示例
网站设计
- 静宁会SEO的网站建设公司:全面提升您的网络影
- 提升在线业务的关键:选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司:打造您的在线品牌
- 灵山SEO网站建设公司:提升您的在线业务表现
- 蒙城网站建设优化公司:提升您网站表现的理想
- 阳谷企业网站优化:提升线上业务力的关键
- 樟树专业的网站建设公司:打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司:助您轻松打造在线业务
- 巫溪百度网站优化:提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱?全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销