看到下面的效果了吗？

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

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

但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过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. [CareerCup] 15.7 Student Grade 学生成绩

    15.7 Imagine a simple database storing information for students' grades. Design what this database m ...

  2. HDU1019

    Least Common Multiple Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  3. JSP + AJAX完整实例及代码

    (1)发送请求index.jsp,注意引入jquery.min.js文件 <%@ page language="java" contentType="text/ht ...

  4. Html5 与 Html4 的区别

    HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...

  5. Expect 初学

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

  6. 使用Sublime Text 直接运行Quick-cocos2d-x 项目

    一.新建一个编译系统 { "cmd": "D:/WorkSoftWare/Quick/quick-cocos2d-x-3.3rc0/quick/samples/Runni ...

  7. HTML - 毛玻璃 滤镜 模糊

    css 秘密花园 http://dabblet.com/gist/d9f243ddd7dbffa341a4 场景,背景图片 + 毛玻璃遮盖 原理:利用background的cover特性,将毛玻璃的区 ...

  8. ready是先执行的，load后执行，DOM文档的加载步骤

    在jq中在文档载入完毕后有这几种方式去执行指定函数: $(document).ready(function() { // ...代码... }); //document ready 简写 $(func ...

  9. GDC2016 执着于光影表现的【全境封锁】的开放世界渲染

    执着于光影表现[全境封锁]的开放世界渲染 Snowdrop(雪莲花)引擎的全局照明技术介绍   补上原文链接:http://game.watch.impress.co.jp/docs/news/201 ...

  10. 使用HttpWebrequest对网站进行模拟操作(附登陆百度demo)

    // a[href=#viewSource]"); //查看源代码标签 viewSourceArr.attr("title", "查看源代码"); v ...