看到下面的效果了吗？

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

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

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

    由端口到进程: 直接查看进程: 查看本机连接端口: 杀进程:  (eg:kill httpd) tskill  1596

  2. CodeForces 219D 树形DP

    D. Choosing Capital for Treeland time limit per test 3 seconds memory limit per test 256 megabytes i ...

  3. hdu Sudoku Killer

    简单的dfs,主要就是每个?处填的值是否满足条件的判断.这道题感觉考察的是输出格式的控制. #include"iostream" #include"stdio.h&quo ...

  4. css3效果

    1. 放大图片: /*galleryImage css*/ a.galleryImage{ display:block;} .galleryImage img{ transition:all .4s ...

  5. 关于ASP.NET Web API 客户端的请求报文中添加 Authorization

    当你使用客户端发送请求 Web API 的时候,因为API 有验证,所以你的请求报文中必须有”Authorization“,那么就需要手动添加了! HttpClient client = new Ht ...

  6. Learn ZYNC (4)

    最近整理出一些适合学习zed的实例(所有的例程都基于Vivado2013.4开发环境) (1)关于zed双核的测试案例: 官方链接:地址1.11.standalone,地址1.12.linux 修改源 ...

  7. Bootstrap (导航、标签、面包屑导航)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...

  8. Python格式化字符串

    在编写程序的过程中,经常需要进行格式化输出,每次用每次查.干脆就在这里整理一下,以便索引. 格式化操作符(%) "%"是Python风格的字符串格式化操作符,非常类似C语言里的pr ...

  9. Ubuntu 安装java环境搭建

    1.下载JDK 8从http://www.oracle.com/technetwork/java/javasebusiness/downloads/选择下载JDK的最新版本 JDK 8. 2.解压文件 ...

  10. iOS中集成ijkplayer视频直播框架

    ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...