html中如何设计对话框,用纯css3和html制作泡沫对话框实现代码

现在,泡沫对话框是一种比较流行的趋势,一般都是用html和javascript,和或者图片来实现,今天用纯css3和html来实现一些基本的简单的泡沫对话框

html代码如下:

复制代码代码如下:

The basic bubble variants

This only needs one HTML element.

For example, <p>[text]</p>.

But it could be any element you want.

The entire appearance is created only with CSS.

This only needs one HTML element.

For example, <p>[text]</p>.

But it could be any element you want.

The entire appearance is created only with CSS.

css代码如下:

复制代码代码如下:

body {

padding:0;

margin:0;

font:1em/1.4 Cambria, Georgia, sans-serif;

color:#333;

background:#fff;

}

a:link, a:visited {

border-bottom:1px solid #c55500;

text-decoration:none;

color:#c55500;

}

a:visited {

border-bottom:1px solid #730800;

color:#730800;

}

a:hover, a:focus, a:active {

border:0;

color:#fff;

background:#c55500;

}

a:visited:hover, a:visited:focus, a:visited:active {

color:#fff;

background:#730800;

}

h2 {

margin:0.5em 0 1.5em;

font-size:1.25em;

font-weight:normal;

font-style:italic;

text-align:center;

}

p {

margin:1em 0;

}

.content h2 {

margin:2em 0 0.75em;

font-size:2em;

font-weight:bold;

font-style:normal;

text-align:left;

}

.content {

width:500px;

padding:0 0 50px;

margin:0 auto;

position:relative;

z-index:1;

}

.triangle-isosceles {

position:relative;

padding:15px;

margin:1em 0 3em;

color:#000;

background:#f3961c;

background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));

background:-moz-linear-gradient(#f9d835, #f3961c);

background:-o-linear-gradient(#f9d835, #f3961c);

background:linear-gradient(#f9d835, #f3961c);

filter:progid:DXImageTransform.Microsoft.gradient(GradinetType=0, startColorstr="#f9d835", endColorstr="#f3961c");

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

.triangle-isosceles.top {

background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));

background:-moz-linear-gradient(#f3961c, #f9d835);

background:-o-linear-gradient(#f3961c, #f9d835);

background:linear-gradient(#f3961c, #f9d835);

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#f3961c", endColorstr="#f9d835");

}

.triangle-isosceles.left {

margin-left:50px;

background:#f3961c;

}

.triangle-isosceles.right {

margin-right:50px;

background:#f3961c;

}

.triangle-isosceles:after {

content:"";

position:absolute;

left:50px;

bottom:-15px;

border-width:15px 15px 0;

border-style:solid;

border-color:#f3961c transparent;

display:block;

width:0;

}

.triangle-isosceles.top:after {

top:-15px;

bottom:auto;

left:auto;

right:50px;

border-width:0 15px 15px;

border-color:#f3961c transparent;

}

.triangle-isosceles.left:after {

top:16px;

left:-50px;

bottom:auto;

border-width:10px 50px 10px 0;

border-color:transparent #f3961c;

}

.triangle-isosceles.right:after {

top:16px;

right:-50px;

bottom:auto;

border-width:10px 0 10px 50px;

border-color:transparent #f39a1c;

left:auto;

}

.triangle-right {

position:relative;

padding:15px;

margin:1em 0 3em;

color:#fff;

background:#075698;

background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));

background:-moz-linear-gradient(#2e88c4, #075698);

background:-o-linear-gradient(#2e88c4, #075698);

background:-ms-linear-gradient(#2e88c4, #075698);

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#2e88c4", endColorstr="#075698");

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

.triangle-right.top {

background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));

background:-moz-linear-gradient(#075698, #2e88c4);

background:-o-linear-gradient(#075698, #2e88c4);

background:linear-gradient(#075698, #2e88c4);

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#075698", endColorstr="#2e88c4");

}

.triangle-right.left {

margin-left:40px;

background:#075698;

}

.triangle-right.right {

margin-right:40px;

background:#075698;

}

.triangle-right:after {

content:"";

position:absolute;

bottom:-20px;

left:50px;

border-width:20px 0 0 20px;

border-style:solid;

border-color:#075698 transparent;

display:block;

width:0;

height:0;

}

.triangle-right.left:after {

top:16px;

left:-40px;

bottom:auto;

border-width:15px 40px 0 0;

border-color:transparent #075698;

}

.triangle-right.top:after {

top:-20px;

right:50px;

bottom:auto;

left:auto;

right:50px;

border-width:20px 20px 0 0;

border-color:transparent #075698;

}

.triangle-right.right:after {

top:16px;

right:-40px;

bottom:auto;

left:auto;

border-width:15px 0 0px 40px;

border-color:transparent #075698;

}

支持的浏览器有:Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

预览效果如下:

在firefox14.0中预览的效果:

5198bde02bd4d1f52e028583a88c260f.png

在chrome10.0中预览效果

a556726a7de5eae01d48cc52f6a25981.png

在ie9中预览效果:

84989b8aa58c6077bfee76d41d55c9e8.png

在ie8中预览的效果:

0009c6e9ec152fd367537bb19413a847.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/505645.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

clickhouse建库_专访ClickHouse创始人:数据库竞争依旧火热,技术整合势在必行

加入「公开课」交流群&#xff0c;获取更多学习资料、课程及热招岗位等信息翻译&#xff5c;郑天祺 (Amos Bird) 中科院计算所博士整理 | 夕颜2000 年以来&#xff0c;随着自互联网和云计算技术变革&#xff0c;数据库技术从底层计算系统开始发生一次蜕变&#xff0c;进入了以开…

html获取此次点击的id,github项目解析(八)--Activity启动过程中获取组件宽高的三种方式...

转载请标明出处&#xff1a;1片枫叶的专栏上1个github小项目中我们介绍了避免按钮重复点击的小框架&#xff0c;其实现的核心逻辑是重写OnClickListener的onClick方法&#xff0c;添加避免重复点击的逻辑&#xff0c;即为第2次点击与第1次点击的时间间隔添加阙值&#xff0c;若…

minitab怎么算西格玛水平_16:三因子二水平全因子实验设计和MINITAB应用训练

16&#xff1a;思慧慧咨询官网――精益生产、六西格玛黑带、绿带、TRIZ创新发明、实验设计DOE、价值工程、全面设备管理&#xff08;TPM&#xff09;培训和项目咨询​www.sihuide.com分享地址&#xff1a;千聊入口1 https://m.qlchat.com/topic/details?topicId20000087131743…

sqlserver 过滤html,sqlserver 过滤掉某些字段查询剩余字段的方法

select * from syscolumns a, sysobjects b where a.object_idb.object_id and b.namedingdan and a.name not in(编号,datafilename)报错&#xff0c;是因为我是sqlserver2005&#xff0c;没有obejct_id&#xff0c;而是id&#xff0c;所以改一下是&#xff1a;select * from …

python写软件测试用例_Python单元测试框架unittest:单个测试用例编写步骤及实例...

一、Python单元测试框架的编写步骤导入模块必须继承unittest.TestCase主要是配置环境&#xff1a;进行测试前的初始化工作&#xff0c;比如在接口测试前面做一些前置的参数赋值&#xff0c;数据库操作等等定义测试用例&#xff0c;名字以“test”开头定义assert断言&#xff0c…

html css position,[CSS]CSS Position 详解

一. CSS position 属性介绍CSS中position属性指定一个元素(静态的&#xff0c;相对的&#xff0c;绝对或固定)的定位方法的类型。有static&#xff0c;relative&#xff0c;absolute和fixed四种取值&#xff0c;默认是static。二. position: staticstatic&#xff1a;没有定位&…

基克的聚合 机器人_重做秒变神器!基克的聚合成辅助标配

导读&#xff1a;7.12版本登陆国服一周有余&#xff0c;在这次更新中有一件装备值得我们关注。它就是基克的聚合&#xff0c;乍一听你可能有点不熟悉&#xff0c;其实它就是之前基克的先驱重做之后的产物。今天笔者就要跟大家详细说说这件装备&#xff0c;它在改动之后俨然成为…

win2008无法用计算机名共享,Windows Server 2008 R2中文件共享

在网上找过很多次相关资料&#xff0c;还是自己整理一下吧。实践了才是自己的&#xff0c;只看永远是别人的。服务器&#xff1a;Server 2008 R2(IP&#xff1a;192.168.1.106)&#xff1b;客户端&#xff1a;Server 2008 R2(IP&#xff1a;192.168.1.107)一、 创建用户itjong运…

hive udf 分组取top1_Hive中分组取前N个值的实现-row_number()

背景假设有一个学生各门课的成绩的表单&#xff0c;应用hive取出每科成绩前100名的学生成绩。这个就是典型在分组取Top N的需求。解决思路对于取出每科成绩前100名的学生成绩&#xff0c;针对学生成绩表&#xff0c;根据学科&#xff0c;成绩做orderby排序,然后对排序后的成绩&…

线性规划图解法求最优解_高中数学:简单的线性规划问题

1. 简单线性规划问题的有关概念先来看一道高考题&#xff1a;某公司招收男职员x名&#xff0c;女职员y名&#xff0c;x和y须满足约束条件&#xff0c;则的最大值是( )A. 80 B. 85 C. 90 D. 95(1)约束条件&#xff1a;变量x、y满足的一组条件&#xff0c;如上面高考题中的二元一…

在桌面关闭计算机关机不了怎么办,为什么我电脑按关机屏幕一直显示正在关机却一直关不了机怎么办...

“开始”-->“运行”-->键入“Regedit”-->“HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\control\Shutdown子项&#xff0c;在右边窗口中新建一个"字符串值"&#xff0c;命名为"FastReboot",同时将"数值数据"设为0即可。如果还不行再…

go struct 静态函数_Go语言学习笔记(四)结构体struct 接口Interface 反射reflect...

加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号&#xff1a;96933959结构体structstruct 用来自定义复杂数据结构&#xff0c;可以包含多个字段(属性)&#xff0c;可以嵌套&#xff1b;go中的struct类型理解为类&#xff0c;可以定义方法&#xff0c;和函数定义有些许区…

html彩色背景指令,HTML_第四章 颜色背景的CSS,本 章 C S S 的 主 - phpStudy...

第四章 颜色背景的&#xff23;&#xff33;&#xff33;本 章 &#xff23; &#xff33; &#xff33; 的 主 要 作 用在前面的章节介绍完了声明与应用的方法及 一些特性之後&#xff0c;从这章开始&#xff0c;便要正式进入&#xff23;&#xff33;&#xff33;的…

arcgis xml 下载 切片_xml格式文件如何用arcgis进行编辑和更新

展开全部为了让你的解析器能够明白这些62616964757a686964616fe59b9ee7ad9431333335343339字符&#xff0c;你必须在XML文档中统一的字符编码标准。--------------------------------------------------------------------------------Windows 95/98 记事本Windows 95/98 记事本…

计算机c盘用户,windows 7 c盘的用户文件夹users如何转移

在这儿逛的朋友一看转移系统文件夹&#xff0c;肯定想到了Windows7优化大师或者魔方&#xff0c;通过他们可以轻松的转移“收藏夹”、“我的文档”等等系统文件夹。但是&#xff0c;如果要把 c:users 这个文件夹彻底转移怎么办呢?Windows7的用户文件夹默认所在位置是系统盘(通…

spark-sql建表语句限制_SparkSQL

SparkSQL介绍Hive是Shark的前身&#xff0c;Shark是SparkSQL的前身,SparkSQL产生的根本原因是其完全脱离了Hive的限制。SparkSQL支持查询原生的RDD。 RDD是Spark平台的核心概念&#xff0c;是Spark能够高效的处理大数据的各种场景的基础。能够在scala中写SQL语句。支持简单的SQ…

docker harbor 域名_docker registry harbor

部署 harbor安装方式&#xff1a; offline软件安装需求&#xff1a;docker 1.10.0 and docker-compose 1.6.0docker 我们选用官方的 repo , yum install docker-ce -ydocker-compose , yum install python-pip,pip install docker-compose下载 Harbor离线安装包&#xff1a; ht…

groupwise_GroupWise部分文档翻译

最近用到了GroupWise,BaiDu了一下,基本没有中文资料,所以只有看英文文档,顺便把看到的东西记录下来,以备以后使用.*****PostOffice的信息存储1.PostOffice数据库PostOffice数据库(wphost.db)包括了所有PostOffice管理的信息,包括PostOffice地址薄(Address Book)的Copy,在GW系统…

苏州大学计算机学院报录比,【图片】18年苏州大学计算机872考研经验分享【苏州大学研究生吧】_百度贴吧...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼二、面试苏大的面试环节个人感觉就很水了。面试一共300′&#xff0c;但是大多数人五分钟就完事了&#xff0c;所以不大会有什么差距&#xff0c;除非你很优秀或者是什么都答不上来。苏大的面试是分组的&#xff0c;具体分到什么组…

计算机大作业论文意义,大学的大作业是什么?

原标题&#xff1a;大学的大作业是什么&#xff1f;大学里面的大作业一般就是课程设计之类的&#xff0c;一些老师会让学生做些课外实践的作业&#xff0c;作为平时成绩的一部分大作业听起来很高大上&#xff0c;然而好多课程其实只是一篇论文。论文类的就是有点水的了。毕竟学…