CSS写的一个小型的提示框

最新推荐文章于 2025-07-06 18:07:35 发布

原创最新推荐文章于 2025-07-06 18:07:35 发布 · 578 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #编译器 #button #input #div #ie

CSS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的弹窗提示效果。通过绝对定位和相对定位结合的方式，实现了简洁美观的提示框样式。该效果适用于网页中需要展示临时提示信息的场景。

<!doctype html> <html> <head> <meta charset="gbk"> <title>Popup Tips Demo</title> <style> body,button,input,select,textarea{ font:12px/1.5 Verdana,Tahoma,Arial,/5b8b/4f53;/*后面是宋体的编码*/ } #popup-tips{ position: absolute; background-color: #CCCCCC; } #tips-cont{ border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; position: relative; left: -3px; top: -3px; _margin-left: 1px; /*for IE 6 BUG*/ background-color: #EFEFEF; } #tips-cont div{ border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; padding: 5px; margin: 0px -1px; } </style> </head> <body> <div id="popup-tips"> <div id="tips-cont"><div>请与卖家协商取消订单，<br />每天不得取消超过5笔订单。</div></div> </div> </body> </html>

秀一下自己做的东西，不过这里没做HACK版本，因为编译器不支持。效果图：

请与卖家协商取消订单，
每天不得取消超过5笔订单。

O(∩_∩)O哈哈~今天突然想起我以前看的一本关于positon:relative以及position:abosolute定位的内容，就想到了这个其实可以拿过来用的。一试就行了。