您當(dāng)前位置：首頁 > web前端 > htmlcss > 純Css實現(xiàn)網(wǎng)頁上的Tips提示之小三角箭頭

純Css實現(xiàn)網(wǎng)頁上的Tips提示之小三角箭頭

來源：程序員人生發(fā)布時間：2013-11-23 13:13:41 閱讀次數(shù)：2693次

　　使用純Css實現(xiàn)的網(wǎng)頁上一個Tips提示效果，相信大家都在一些大網(wǎng)站見到過，例如，我們經(jīng)常在淘寶網(wǎng)上購物時看到的小提示功能，如圖一，在本例子中我們僅實現(xiàn)了小三角箭頭，并沒有實現(xiàn)關(guān)閉功能，因為關(guān)閉功能還需要引入相應(yīng)的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中小三角的實現(xiàn)!</title><link type="text/css" rel="stylesheet" href="http://www.jyygyx.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.jyygyx.com/a/view/37505.html">Tip中小三角的實現(xiàn)!</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="關(guān)閉" onclick="return false" class="close-ico" href="#">關(guān)閉</a></div></div><hr /><div style="position:relative; height:100px"><div class="SD-tipbox"><div class="cntBox"><p>可以同步設(shè)置展示<br />我的空間內(nèi)容了~</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="關(guān)閉" onclick="return false" class="close-ico" href="#">關(guān)閉</a></div></div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進(jìn)行捐贈
程序員人生

------分隔線----------------------------

上一篇 Access 2000教程：6.9 補充內(nèi)容

下一篇 西聯(lián)匯款的現(xiàn)匯、現(xiàn)鈔買入價與基準(zhǔn)價問題

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

純Css實現(xiàn)網(wǎng)頁上的Tips提示之小三角箭頭