看到下面的效果了吗？

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

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

但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过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. Qweb Pdf 中添加 图片

    具体方法如下: <img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.l ...

  2. PHP脱mysql脚本

    <?php $SQL_Server="xxxxxx:3306"; $SQL_User="xxxx"; $SQL_Name="xxxx" ...

  3. 数据结构--树（遍历，红黑，B树）

    平时接触树还比较少,写一篇博文来积累一下树的相关知识. 很早之前在数据结构里面学的树的遍历. 前序遍历:根节点->左子树->右子树 中序遍历:左子树->根节点->右子树 后序遍 ...

  4. JAVA程序设计 实验一

    北京电子科技学院(BESTI) 实     验    报     告 课程:Java程序设计 班级:1353  姓名:李海空  学号:20135329 成绩:             指导教师:娄嘉鹏 ...

  5. Final-阶段站立会议2

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  6. 使用safe-rm替代rm

    safe-rm主页: https://launchpad.net/safe-rm 一.下载safe-rm 二.解压文件,拷贝safe-rm到/usr/local/bin/目录下 三.建立软连接: #l ...

  7. java中类的创建及初始化过程

    java中类的创建及初始化过程无外乎两种情况,其一为单类的创建及初始化,其二具有继承关系的父子类创建及初始化过程.     首先说简单的,单类的创建及初始化过程.在java中我们都知道绝大部分对象的创 ...

  8. Java中Native关键字的作用

    初次遇见 native是在 java.lang.Object 源码中的一个hashCode方法: 1 public native int hashCode(); 为什么有个native呢?这是我所要学 ...

  9. iOS多线程GCD

    Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法. dispatch queue分成以下三种: 1)运行在主线程的Main queue,通过dispat ...

  10. k近邻算法的Java实现

    k近邻算法是机器学习算法中最简单的算法之一,工作原理是:存在一个样本数据集合,即训练样本集,并且样本集中的每个数据都存在标签,即我们知道样本集中每一数据和所属分类的对应关系.输入没有标签的新数据之后, ...