看到下面的效果了吗？

本来我们站点是用下面的图片做的背景，

但是后期当更改完框中的提示内容，并且更新内容较多的时候，发现内容溢出了，如下图：

但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过qq网名为虫子²º¹³的大牛指点，用html + css，但不使用背景图片，同样做出了这种效果，直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

<!--body{padding:100px;}-->

<!--.tip{position: relative;padding:50px;border:1px solid #000;border-radius: 10px;}-->

.tip{position: absolute;padding:50px;border:1px solid #000;border-radius: 10px;}

.angle{width: 20px;height: 20px;line-height: 20px;overflow:hidden;font-size:20px;position: absolute;font-family:"SimSun";bottom:45px;left:-11px;}

.angle i{position: absolute;top:0;left:0;font-style: normal;}

.angle .b{color:#000;z-index: 1;}

.angle .t{color:#fff;z-index: 2;left:2px;}

</style>

<body>

    <div class="tip">

        <span class="angle">

            <i class="b">◆</i>

            <i class="t">◆</i>

        </span>

        <p> 版本号：v2.0.8大小：6.70M更新日期：14-08-27 15:37 </p>

        <p> 更新描述：优化了几个bug； </p>

        <p><button>下载SDK包</button></p>

    </div>

</body>

</html>

运行结果如图所示：

这样好处如下：

1. 可以省掉图片，

2. 大小和角标都可以随意控制

3. 位置和大小，颜色一样可以css控制

4. .tip设置为position:absolute，就可自适应内部内容大小；tip加box-shadow，还可以方便增加阴影;用图片做背景，对这些支持就很麻烦了。

但是这种css3的特性，只能适应高级浏览器，IE7及以下版本不支持，他们将显示为直角，而不是圆角，低版本解决办法是：定位4个圆角图片，放到4角。（我们觉得可以不用这么做，提示框是直角的也没什么。就看需求了。）

大牛告诉我说：

渐进增强，这个原则下，这样处理是最优的。
后期维护、减少请求数、效率。
这些因素就要靠自己权衡了。

特效的实现还得继续努力加油啊……以后多向大牛们学习学习……

html+css创建提示框的更多相关文章

  1. css悬浮提示框

    效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. Swift 动态创建提示框

    var alert = UIAlertController(title: "", message: "", prefferedStyle: UIAlertCon ...

  3. CSS气泡提示框 可自定义配置箭头

    在线演示 本地下载

  4. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  5. CSS圆角框，圆角提示框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery EasyUI 教程-Tooltip（提示框）

    <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta c ...

  7. EasyUI Tooltip 提示框

    通过 $.fn.tooltip.defaults 重写默认的 defaults. 当用户移动鼠标指针在某个元素上时,出现提示信息窗口用来显示额外信息.提示内容可以包含任何来自页面的或者通过 ajax ...

  8. tooltip提示框组件

    Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...

  9. 19. UIAlertController 提示框获取文本内容，打印控制台上

    1.首先定义一个全局字符串变量,方便接收获取的文本内容 2. -(void)viewDidAppear:(BOOL)animated{ UIAlertController * alert = [UIA ...

随机推荐

  1. java.lang.UnsupportedClassVersionError: TwoSum : Unsupported major.minor version 52.0

    编译的版本比运行的版本高. 两台电脑,一个装的是jdk1.7,另一个是1.8,在1.8上运行之后,上传到github然后1.7的拉下来,再运行出现了上述错误. 解决方式:设置如下

  2. thinkphp框架验证码验证一次

    做异步验证验证码,只要验证一次结果正确,拿相同的值再次来对比,返回结果就不正确.我看到论坛中有人说,tp框架只要验证过一次正确后验证码就销毁了.确实是这个效果,但具体的还没深入了解

  3. ASIHTTPRequest类库简介和使用说明

    官方网站: http://allseeing-i.com/ASIHTTPRequest/ .可以从上面下载到最新源码,以及获取到相关的资料. 使用iOS SDK中的HTTP网络请求API,相当的复杂, ...

  4. Expect 初学

    expect可以帮助脚本完成自动化.今天就用二种实例来介绍2种写法. 安装 yum -y install expect 一.直接用/usr/bin/expect 这种就不方便调用linux下的环境变量 ...

  5. 火狐插件 Http请求利器 Httprequester

    搜索并且下载Httprequester

  6. Sqlite 数据库出现database disk image is malformed报错的解决方法

    软件用的是Sqlite数据库,昨天还好好的,今天开机登录软件报错:database disk image is malformed 用Sqlite Expert Personal 重建索引,发现其中一 ...

  7. poj1006-Biorhythms(中国剩余定理)

    一,题意:右上角中文.二,思路: 1,由题意得出方程组 2,利用中国剩余定理求解 3,求出最小正整数三,步骤: 1,由题意得出方程组 (n+d) % 23 = p ; (n+d) % 28 = e ; ...

  8. Excel 中 Index 和 Match 方法的使用

    MATCH函数(返回指定内容所在的位置) MATCH(lookup-value,lookup-array,match-type) lookup-value:表示要在区域或数组中查找的值,可以是直接输入 ...

  9. RESTful简单介绍（入门）

    1.1      什么是RESTful http://www.ruanyifeng.com/blog/2011/09/restful.html RESTful架构,就是目前最流行的一种互联网软件架构. ...

  10. SQL Server 定时自动备份数据库

    在SQL Server中出于数据安全的考虑,所以需要定期的备份数据库,这篇文章介绍使用SQL Server 数据库代理中的作业定时自动备份数据库. 1.启动SQL Server代理服务,如下图: 绿色 ...