html+css创建提示框
看到下面的效果了吗?
本来我们站点是用下面的图片做的背景,
但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图:
但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致没更新一次信息就得重新绘制一张背景图,经过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创建提示框的更多相关文章
- css悬浮提示框
效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Swift 动态创建提示框
var alert = UIAlertController(title: "", message: "", prefferedStyle: UIAlertCon ...
- CSS气泡提示框 可自定义配置箭头
在线演示 本地下载
- 纯css来实现提示框
用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...
- CSS圆角框,圆角提示框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery EasyUI 教程-Tooltip(提示框)
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta c ...
- EasyUI Tooltip 提示框
通过 $.fn.tooltip.defaults 重写默认的 defaults. 当用户移动鼠标指针在某个元素上时,出现提示信息窗口用来显示额外信息.提示内容可以包含任何来自页面的或者通过 ajax ...
- tooltip提示框组件
Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...
- 19. UIAlertController 提示框获取文本内容,打印控制台上
1.首先定义一个全局字符串变量,方便接收获取的文本内容 2. -(void)viewDidAppear:(BOOL)animated{ UIAlertController * alert = [UIA ...
随机推荐
- HDU3466 背包DP
Proud Merchants Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) ...
- AESUtils.java
package com.vcredit.framework.utils; import javax.crypto.Cipher;import javax.crypto.spec.SecretKeySp ...
- BizTalk动手实验(十二)WCF-Oracle适配器使用
1 课程简介 通过本课程熟悉WCF-Oracle适配器的的使用 2 准备工作 1. 新建BizTalk空项目 2. 配置BizTalk项目的应用程序名称及程序签名. 3. Oracle数据库 ( Or ...
- PHP第三方登录 -- 微博登录
进化史 博客园 首页 新随笔 联系 管理 订阅 随笔- 9 文章- 0 评论- 0 php 实现qq第三方登录 学习之前,请大家先看一下oAuth协议. 首先呢,我们进入QQ互联的官方网站 ht ...
- Trace文件过量生成问题解决
查看用户临时文件(trace文件)所在位置 如果是trace文件(.trc)大导致的 SQL>show parameters user_dump_dest 在路径下查看 alert_log 文件 ...
- python随机服务器的双线出口ip发送邮件
#-*- coding:utf-8 -*-import smtplibimport sysimport random import socketfrom email.mime.text import ...
- Java - Collection 高效的找出两个List中的不同元素
如题:有List<String> list1和List<String> list2,两个集合各有上万个元素,怎样取出两个集合中不同的元素? 方法1:遍历两个集合 public ...
- 一种javascript链式多重继承的方式(__proto__原型链)
var a=function(){this.foo='bar';} a.prototype={b:1}; var aa=function(){} aa.prototype={c:2,__proto__ ...
- 文档生成工具 appledoc
参考文章 1.安装: $ git clone git://github.com/tomaz/appledoc.git $ cd appledoc $ sudo sh install-appledoc. ...
- Linux内核设计第七周 ——可执行程序的装载
Linux内核设计第七周 ——可执行程序的装载 第一部分 知识点总结 一.预处理.编译.链接和目标文件的格式 1.可执行程序是怎么得来的 编译链接的过程 预处理阶段 gcc -E -o XX.cpp ...