html css帮助提示,html+css创建提示框

看到下面的效果了吗？

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

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

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

Document

.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;}

◆

◆

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

更新描述：优化了几个bug；

下载SDK包

运行结果如图所示：

这样好处如下：

1. 可以省掉图片，

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

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

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

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

大牛告诉我说：

渐进增强，这个原则下，这样处理是最优的。

后期维护、减少请求数、效率。

这些因素就要靠自己权衡了。

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

css悬浮提示框

效果图: code:

Swift 动态创建提示框

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

纯css来实现提示框

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

CSS圆角框，圆角提示框

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

MFC常见问题以及解决方法(1)_MFC下文本编辑框按下回车后窗口退出

这里主要介绍遇到这种方法的解决方案,解决方法可能有多种,但这里只给出有效的一种,这里不会详细说明出现问题的原因以及为什么这样解决,想了解更多可以百度,写这个主要是防止以后忘记,做个简单的笔记. 问题: ...

session get和load方法对比

get测试代码如下: public class Test { public static void main(String[] args) { // TODO Auto-generated metho ...

「WC2018」通道

没有代码能力... LOJ #2339 Luogu P4220 UOJ #347 题意 给定三棵树$ T1,T2,T3$,求一个点对$ (x,y)$使得$ T1.dist(x,y)+T2.dist(x ...

详解slab机制

转 详解slab机制 2015年01月15日 16:34:47 cosmoslhf 阅读数:12657   http://blog.youkuaiyun.com/u010246947/article/detail ...

Golang中的自动伸缩和自防御设计

Raygun服务由许多活动组件构成,每个组件用于特定的任务.其中一个模块是用Golang编写的,负责对iOS崩溃报告进行处理.简而言之,它接受本机iOS崩溃报告,查找相关的dSYM文件,并生成开发者可 ...

《Linux内核分析》第二周：操作系统是如何工作的

杨舒雯 20135324 北京电子科技学院 杨舒雯 原创作品转载请注明出处 MOOC课程http://mooc.study.163.com/course/USTC-1 ...

【监控】dubbo监控中心安装

使用dubbo的话,两个工具是不可少的: 1:dubbo的管理控制台,在之前的笔记中介绍过 2:简易控制中心monitor 简单介绍下monitor: Simple Monitor挂掉不会影响到Con ...