利用css制作简单的提示框_html/css

来源：动视网责编：小采时间：2020-11-27 16:15:32

利用css制作简单的提示框_html/css

利用css制作简单的提示框_html/css_WEB-ITnose:在网页开发中，为了提高用户体验，经常会用到一些提示框来引导用户，这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮这里用到的主要是一些定位的知识，运用relative和absolute可以快速制作这样的一个提示框，想详细了解，点击这

推荐度：

点击下载本文 文档为doc格式

导读利用css制作简单的提示框_html/css_WEB-ITnose:在网页开发中，为了提高用户体验，经常会用到一些提示框来引导用户，这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮这里用到的主要是一些定位的知识，运用relative和absolute可以快速制作这样的一个提示框，想详细了解，点击这

在网页开发中，为了提高用户体验，经常会用到一些提示框来引导用户，这里分享下一些简单的提示框的制作

1.首先类似一个长方形右上角一个关闭按钮

这里用到的主要是一些定位的知识，运用relative和absolute可以快速制作这样的一个提示框，想详细了解，点击这里

html代码：

 提示信息 ×

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

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：

      提示框    提示信息 × 这里是提示信息！！！

利用css制作简单的提示框_html/css

推荐度：

点击下载本文 文档为doc格式

标签：制作弹出 html

热门焦点

利用css制作简单的提示框_html/css

利用css制作简单的提示框_html/css

利用css制作简单的提示框_html/css

最新推荐

猜你喜欢

热门推荐