CSS写的一个小型的提示框

nelson

于 2010-11-04 16:22:00 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 编译器 button input div ie

本文链接：https://blog.youkuaiyun.com/Do_it__/article/details/5987644

CSS 专栏收录该内容

35 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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定位的内容，就想到了这个其实可以拿过来用的。一试就行了。