在網頁開發中，為了提高用戶體驗，經常會用到一些提示框來引導用戶，這里分享下一些簡單的提示框的制作
1.首先類似一個長方形右上角一個關閉按鈕
這里用到的主要是一些定位的知識，運用relative和absolute可以快速制作這樣的一個提示框，想詳細了解，點擊這里
html代碼：
<div id="position"> <div class="position-relative"> <span>提示信息</span> <a href="javascript:;"><i class="icon">×</i></a> </div> </div>
css代碼：
#position { position: relative; width: 500px; height: 400px; margin: 0 auto; color: #fff; background: #66cccc; } #position .position-relative { position: relative; top: 20px; left: 20px; width: 300px; height: 200px; padding: 20px; background: #999; } #position .position-relative .icon { display: block; position: absolute; top: -10px; right: -10px; overflow: hidden; /* white-space: nowrap; text-overflow: ellipsis; */ border-radius: 50%; width: 20px; height: 20px; line-height: 20px; color: #eee; font-style: normal; text-align: center; background: #666; }
2.還有類似這種qq對話框
有了定位的知識后，這種對話框主要就是左邊的小三角的制作了，其實這個我們可以利用border來制作，首先我們先來開一個例子:
我們就給一個span標簽來看看
html
<span class="icon-s"></span>
css
.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 40px; border-top-color: red; border-right-color: blue; border-bottom-color: yellow; border-left-color: black; }
我們來看看效果：
怎么樣！很神奇對不對！其實到這里我們就可以看到我們要的三角形了，我們只要保留四個中的一個就行了，那么將其他三邊設置為透明就行了
css
.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 40px; border-top-color: transparent; /*-*/ border-right-color: red; border-bottom-color: transparent; /*-*/
border-left-color: transparent; /*-*/
}
現在我們可以看到一個基本的雛形，接下來我們在來改改，把上邊框的高度設為0，右邊框的寬度設長一點
css:
.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 40px; border-top-width: 0; // border-right-width: 70px; // border-top-color: transparent; border-right-color: red; border-bottom-color: transparent; border-left-color: transparent; }
這樣子左邊的三角形就出來了，接下來我們來簡化一下代碼：
.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-color: transparent red transparent transparent; border-width: 0 70px 40px 40px; }
考慮到IE低版本不支持transparent 屬性我們可以設置dotted或是dashed
原因是在IE6下, 點線與虛線均以邊框寬度為基准,點線長度必須是其寬度的3倍以上（height>=border-width*3）,虛線寬長度必須是其寬度的5倍 以上（height>=border-width*5）,否則點線和虛線都不會出現.
.icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: dashed solid dashed dashed; border-color: transparent red transparent transparent; border-width: 0 70px 40px 40px; }
完整的demo：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content="阿林十一"> <meta name="Keywords" content="關鍵字"> <meta name="Description" content="描述"> <title>提示框</title> <!--style start--> <style type="text/css"> /*-------- begin-base ------------*/ html, body, div, h1,h2,h3, ul,li, a, p, span { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body { color: #666; font-size: 14px; font-family: "Microsoft Yahei"; } a { color: #eee; text-decoration: none; } li { list-style: none; } /*-------- end-base -------*/ #position { position: relative; width: 500px; height: 400px; margin: 0 auto; color: #fff; background: #66cccc; } #position .position-relative { position: relative; top: 20px; left: 20px; width: 300px; height: 200px; padding: 20px; background: #999; } #position .position-relative .icon { display: block; position: absolute; top: -10px; right: -10px; overflow: hidden; /* white-space: nowrap; text-overflow: ellipsis; */ border-radius: 50%; width: 20px; height: 20px; line-height: 20px; color: #eee; font-style: normal; text-align: center; background: #666; } #position .position-relative .tip { position: absolute; right: -212px; top:50%; margin-top: -20px; width: 200px; height: 40px; border-radius: 5px; background: #4392e0; } #position .position-relative .tip .icon-tip { position: absolute; top: 8px; left: -23px; border: 12px solid transparent; border-top-width: 0; border-right-color: #4392e0; } .icon-s { display: block; margin: 0 auto; width: 0; height: 0; border-style: dashed solid dashed dashed; border-color: transparent red transparent transparent; border-width: 0 70px 40px 40px; } </style> <!--style end--> </head> <body> <!-- position 定位 （參照點） 1、static 2、relative 相對定位（self） 3、absolute 絕對定位（2 1、relative |absolute| absolute first 2、body） 4、fixed --> <div id="position"> <div class="position-relative"> <span>提示信息</span> <a href="javascript:;"><i class="icon">×</i></a> <div class="tip"> <span class="tx">這里是提示信息！！！</span> <span class="icon-tip"></span> </div> </div> </div> <span class="icon-s"></span> </body> </html>