纯Css实现网页上的Tips提示之小三角箭头_html-js-css

概述使用纯Css实现的网页上一个Tips提示效果，相信大家都在一些大网站见到过，例如，我们经常在淘宝网上购物时看到的小提示功能，如图一，在本例子中我们仅实现了小三角箭头，并没有实现关闭功能，因为关闭功能还需要引入相应的JS才可以。下边我们来看实例代码：<!DOCTYPE html PUBLIC &qu…

　　使用纯CSS实现的网页上一个Tips提示效果，相信大家都在一些大网站见到过，例如，我们经常在淘宝网上购物时看到的小提示功能，如图一，在本例子中我们仅实现了小三角箭头，并没有实现关闭功能，因为关闭功能还需要引入相应的Js才可以。

　　下边我们来看实例代码：

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><head><Meta http-equiv="Content-Type" content="text/HTML; charset=gbk" /><Title>Tip中小三角的实现!</Title><link type="text/CSS" rel="stylesheet" href="http://www.wfuyu.com/images/JsCSS/lIEhuo_main.CSS" /><style type="text/CSS" />.SD-tipBox{ background-color: #FFFFE9; border: 1px solID #FFDE8E; padding: 5px 25px 5px 10px; margin:10px; position: absolute; z-index: 100; Font-size:12px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-Box-shadow:1px 1px 2px rgba(0,.2); -webkit-Box-shadow:1px 1px 2px rgba(0,.2); Box-shadow:1px 1px 2px rgba(0,.2);}.SD-tipBox .close-ico,.SD-notice-tip .close-ico { position:absolute; top:5px; right:5px; display:block; wIDth:16px; height:16px; background-image:url(/uploads/allimg/1108/close-ico.png); text-indent:-900px; overflow:hidden; }.SD-tipBox .close-ico:hover,.SD-notice-tip .close-ico:hover { background-position:0 -16px; }.SD-tipBox p { line-height:1.5 }.SD-tipBox .SD-tipBox-direction{position: absolute; }.SD-tipBox .SD-tipBox-direction em,.SD-tipBox .SD-tipBox-direction span{ height: 19px; wIDth: 17px; Font-family: Simsun; Font-size: 16px;line-height: 21px; overflow: hIDden;position: absolute;}.SD-tipBox .SD-tipBox-direction em{color: #FFDE8E; }.SD-tipBox .SD-tipBox-direction span{color: #FFFFE9; }.SD-tipBox .SD-tipBox-up{left: 50%; margin-left:-8px; top:-10px;*top:-11px; _top:-10px;}.SD-tipBox .SD-tipBox-up span{ top:1px}.SD-tipBox .SD-tipBox-down{left: 50%; margin-left:-8px; bottom:9px; }.SD-tipBox .SD-tipBox-down span{ top:-1px}.SD-tipBox .SD-tipBox-right{top: 50%; margin-top:-8px; right:7px; }.SD-tipBox .SD-tipBox-right span{ left:-1px}.SD-tipBox .SD-tipBox-left{top: 50%; margin-top:-8px; left:-8px; }.SD-tipBox .SD-tipBox-left span{ left:1px}/*--------------*/.SD-notice-tip { wIDth:200px; margin:0px;}.SD-notice-tip p { line-height:22px }</style></head><body><div style="position:relative; height:100px"><div class="SD-tipBox"><div class="cntBox"><p><a href="http://www.wfuyu.com/a/vIEw/37505.HTML">Tip中小三角的实现!</a></p></div><div class="SD-tipBox-direction SD-tipBox-up"><em>◆</em><span>◆</span></div><div class="SD-tipBox-direction SD-tipBox-down"><em>◆</em><span>◆</span></div><div class="SD-tipBox-direction SD-tipBox-left"><em>◆</em><span>◆</span></div><div class="SD-tipBox-direction SD-tipBox-right"><em>◆</em><span>◆</span></div><a Title="关闭" onclick="return false" class="close-ico" href="#">关闭</a></div></div><hr /><div style="position:relative; height:100px"><div class="SD-tipBox"><div class="cntBox"><p>可以同步设置展示<br />我的空间内容了~</p></div><div class="SD-tipBox-direction SD-tipBox-up" style="left:20px"><em>◆</em><span>◆</span></div><div class="SD-tipBox-direction SD-tipBox-down"><em>◆</em><span>◆</span></div><div class="SD-tipBox-direction SD-tipBox-left"><em>◆</em><span>◆</span></div><div class="SD-tipBox-direction SD-tipBox-right"><em>◆</em><span>◆</span></div><a Title="关闭" onclick="return false" class="close-ico" href="#">关闭</a></div></div></body></HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

总结

以上是内存溢出为你收集整理的纯Css实现网页上的Tips提示之小三角箭头全部内容，希望文章能够帮你解决纯Css实现网页上的Tips提示之小三角箭头所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1022308.html

纯Css实现网页上的Tips提示之小三角箭头

发表评论

评论列表（0条）