看到下面的效果了吗？

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

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

但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过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. cat 显示指定行

    [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1000 [二]显示1000行到3000行 cat ...

  2. backbone学习笔记一

    backbone是一个MVC单页面框架,针对传统的WEB开发B/S架构的缺点,即通过表现层的浏览器,功能层的WEB服务器,数据层的数据库服务器构架,而操作渲染过程太过复杂.

  3. C# 常用数据库连接字符串【转】

    一:C# 连接SQL数据库 Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myP ...

  4. 注入语句详解(get注入，cookie注入，搜索型注入等)

    注意:对于普通的get注入,如果是字符型,前加'   后加 and ''=' 拆半法 ###################################### and exists (select ...

  5. spring security 判断用户是否登录 只要登录就可以访问资源

    有些情况,只要用户登录就可以访问某些资源,而不需要具体要求用户拥有哪些权限,这时候可以使用IS_AUTHENTICATED_FULLY,配置如下所示: <http auto-config='tr ...

  6. 大量查询SQL语句 实例

    1.查看表结构语句:DESC   表名   2.查询所有列:select  *  from  表名   3.查询指定列:select  字段名  form  表名   4.查询指定行:SELECT * ...

  7. Mongo中append方法使用

    在MongoDB的官网已经很详细的介绍了各种客户端的使用,其中也包括java的,在此,仅对几个比较疑惑的地方做个标注: (1).如何向db中添加collection? 如果在api文档中找不到答案,那 ...

  8. PHP检测移动设备类mobile detection使用实例

    目前,一个网站有多个版本是很正常的,如PC版,3G版,移动版等等.根据不同的浏览设备我们需要定向到不同的版本中.不仅如此,我们有时候还需要根据不同的客户端加载不同的CSS,因此我们需要能够检测浏览设备 ...

  9. swift2.0单例

    import Foundation   public class SwiftSingleton{     var name = "000"     public static le ...

  10. iOS：一些常用的框架

    一.更多框架请看链接: https://github.com/xiayuanquan/TimLiu-iOS http://www.cnblogs.com/XYQ-208910/p/5901012.ht ...