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

发布时间：2018-10-06 19:04:48 所属栏目：经验来源：站长网

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

　　使用纯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.veryhuo.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,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,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.veryhuo.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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：帝国网站管理系统）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2022年消博会参展商采	二十年前成为中国首富
跨境游停摆约两年，旅	哲学家谈元宇宙夏莹