html气泡写法,制作CSS气泡框

气泡状文本框,是一种很生动的网页设计手段。

它可以用来表示用户的发言。

c4dbb6907a2fdc72968bfb7696f53c36.png

也可以用来作为特定信息的提示符。

a36637e1ac3abf768d6689375b52d879.png

DVD租借网站Netflix,还用它显示碟片的详细信息。

46fea1e3022a95742dbd08513e1c644c.png

=========================

制作CSS气泡框的传统方法,需要5张背景图片,分别是:

*

902d36a95f5e6441cbd55f66c78a858c.gif tl.gif,左上方的圆角。

*

20f3bd65bdc6872fce5d20804090c717.gif tr.gif,右上方的圆角。

*

90dfc2d735774f6caee785d3b317ce1e.gif bl.gif,左下方的圆角。

*

69d60ee9ba44d0c88beca72082955fe9.gif br.gif,右下方的圆角。

*

f5d3c08c60d6e1b4aea10990ac55afb9.gif angle.gif,突出的三角形。

现在假定有这样一段代码:

床前明月光,疑是地上霜。

李白

我们希望通过气泡框,产生一种视觉效果,将李白与诗句对应起来。

c33772a7e901ce2e7d6179b45fa63d90.png

那么,首先需要为诗句添加四个"钩子"(handler):

床前明月光,疑是地上霜。

然后,为最外面的容器div.tl指定高度和宽度,使它形成一个视觉方框:

.tl{

width:300px;

height:50px;

text-align:center;

line-height:50px;

}

接着,为四个"钩子"依次添加四个不同的圆角背景:

.tl{background:url('tl.gif') top left no-repeat #ff8c45;}

.tr{background:url('tr.gif') top right no-repeat;}

.bl{background:url('bl.gif') bottom left no-repeat;}

.br{background:url('br.gif') bottom right no-repeat;}

最后,在"李白"前面加上三角形图片。

p{

padding: 15px 0px 0px 50px;

background: url('angle.gif') 40px top no-repeat;

}

气泡框就生成了。

这种方法的优点是所有浏览器都支持,缺点是比较麻烦,必须制作专门的图片,增加多余的标签,代码的灵活性较小。

============================

随着CSS3的出现,现在有了更好的方法,不需要任何背景图片和多余的标签,就能生成漂亮的文本框。

e3d3e9063b31a6bae6ad474e1b6cfc4c.png

e75db7c720f956032739f20c5f1c2c44.png

由于这种方法用到了CSS3,所以IE6不支持,IE7和IE8无法显示圆角效果。其他浏览器的最新版本,都能够正常显示。

还是以前面的代码为例。

床前明月光,疑是地上霜。

第一步,生成基本的方框。

.bubble{

position:relative;

padding:15px;

margin:1em 0em 3em;

width:300px;

line-height:1.2;

text-align:center;

color:#fff;

background:#075698;

}

0241bcebd724b8d4a620d454b9a99e24.png

第二步,生成圆角。

.bubble{

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

ce4093c083207f69fcd86dca1e670948.png

第三步,制作线性渐变的效果。

.bubble{

background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));

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

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

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

}

e099648fb9893ac14b2b46bef4473aae.png

第四步,在容器后面添加一个空元素,并将长度和宽度都设为0。

.bubble:after {

content:"\00a0";

width:0;

height:0;

}

第五步,指定这个空元素为块级元素,并且四个边框之中,只显示上方的边框,其他三个边框,都设为透明。因为该元素的大小为0,所以它的每一个边框,都是一个等腰三角形。

.bubble:after{

display:block;

border-style:solid;

border-width:15px;

border-color:#f3961c transparent transparent transparent;

}

这时,已经可以看见这个三角形了(其实是一个上边框)。

71144b1cb5734f206e72581dc8e80d3a.png

第六步,指定空元素的定位方式为absolute。然后,以容器元素的左下角为基点,将空元素水平右移一定的距离(这里是50像素),再垂直下移两个边界的距离。(由于第五步将空元素的边界设为15像素,所以这里就是下移30像素。)

.bubble:after{

position:absolute;

z-index:-1;

bottom:-30px;

left:50px;

}

至此,一个不需要任何背景图片和多余标签的气泡框,就出现在我们眼前了。

ac120ad3d29b5e3378644e60b18a01ea.png

灵活处理空元素的边框,或者改变大小,或者生成圆角,或者将两个空元素的边框重叠,就会产生各种各样的变化。具体的效果和代码,请参考Nicolas Gallagher的范例页。

(完)

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

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

相关文章

html5按钮超链接一个文本文档,怎么做word文档超链接

怎么做word文档超链接超链接,常见于网页制作中,是将两个网页之间建立链接关系,即当点击一个A对象的时,自动跳转到另一个B对象的位置,从而快速查阅网页内容。接下来小编为大家推荐的是word文档超链接相关内容&#xff0…

.net html5 框架,ASP.NET - 介绍 ASP.NET Web 窗体框架的导航 | Microsoft Docs

MVC07/08/2015本文内容介绍 ASP.NET Web 窗体框架的导航ASP.NET Web 窗体框架的导航是一个托管在 navigation.codeplex.com 上的开源项目,该框架使您可以采用单元测试范围来编写 Web 窗体代码,同时遵循“切勿重复”(DRY) 原则,从而使 ASP.NET…

html教程padding,HTML CSS——margin和padding的学习

一、什么是边距CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间)。二、什么是内边距,什么是外边距代码2-1:html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d…

html中最右边,html – 如何获得最右边的列填充剩余空间?

我找到了一个简单的解决方案:table td:last-child {width: 100%;}结果:body {font: 12px "Sans serif";}table {width: 100%;background-color: #222222;color: white;border-collapse: collapse;}table th {padding: 10px;text-align: left;}…

html5的交互标签,html5里交互元素的使用方法

在H5里,交互元素就是和用户进行互动的元素,这一部分非常的重要,并且和之前的JS控制的效果不同,H5相比于HTML增加了很多的交互元素,比如隐藏显示注脚就是其中的一个交互效果。交互元素的使用body{font-size: 12px;}span…

image 3d view HTML5,Cute Slider - 3D 2D HTML5 Image Slider

IMPORTANT!We can NOT provide support for this item since Feb 2015. If you would like to use our item, we highly recommend to use our brand new slider “Master Slider”Cute Slider is a unique and easy to use slider with awesome 3D and 2D transition effects,…

适合计算机社团活动的游戏,适合大学社团活动“游戏”有哪些?

20个适合大学生活动的游戏推荐1、无敌烽火轮规则:各组统一在风火轮内站好,由裁判统一发布口令出发。行进途中,风火轮必须垂直地面,不能将所提供的道具剪裁、折叠,道具纸必须紧密相连。所有组员必须在圈内,身体的任何部…

组策略 控制台登录计算机用用户,Window 2008 R2组策略之一——组策略管理控制台...

组策略管理在windows域管理中占有重要地位,本身也不是新的内容了。但微软在Windows2008中终于集成了一个非常好用的组策略管理工具——组策略管理控制台。并且为原有的组策略添加了新的元素。本文从介绍组策略管理控制台入手,力求通过比较通俗的语言&…

计算机桌面上的输入法状态栏,输入法状态栏

2009-05-02今天不知怎么的,把工具栏里输入法的图标给搞丢了。请问大侠怎样找回?请指点,谢谢任务栏系统托盘区的输入法图标不见了,点击运行输入Ctfmon。exe 回车即可。任务栏没有输入法的解决方法(先右击任务栏/工具栏/勾选语言栏试…

html按钮分享功能实现,一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)...

前几天由于工作需要制作一个分享按钮,考虑到后续其他项目可能也会用到,于是就打算写成插件化,正好也给我自己的插件jquery.hooray增加一个新的功能,为了不浪费大家时间,我先把demo放出来,如果觉得能用到&am…

北京理工大学珠海学院专业计算机类,北京理工大学珠海学院计算机学院网络工程专业...

北京理工大学珠海学院计算机学院网络工程专业发表时间:2019-10-10作者:211大学网日前,在计算机学院网络工程专业林开荣、张海燕老师的带领下,6名来自北京理工大学珠海学院2016级网络工程专业学生参加了珠海市职业技能竞赛云计算工…

国防科技大学计算机学院教员,我国最好的四所科技大学,第一名排名世界前列,还有一所是铁饭碗...

分享亲子快乐,交流教育知识,欢迎关注陆北老师2021年泰晤士世界大学排名揭晓,中国科技大学进入了前一百名,而南方科技大学也进入了前三百名。其实我国的科技类大学,以中国科技大学为首,有四所的实力非常雄厚…

计算机图形学基础教程论文,计算机图形学小论文

为毕业生写计算机图形学小论文提供计算机图形学小论文范文参考,涵盖硕士、大学本科毕业论文范文和职称论文范文,包括论文选题、开题报告、文献综述、任务书、参考文献等,是优秀免费计算机图形学小论文网站。计算机图形学的发展及应用探讨摘要计算机图形学…

c语言添加变量到数据库+a+ +b+ 的方法,《C程序设计基础》模拟考试题(含答案)...

《C程序设计基础》模拟考试题一、选择题(每题2分。共23道选择题)1、关于C程序的叙述,错误的说法是(B)A、C程序总是从主函数开始执行B、C程序中定义的第一个函数是主函数C、在主函数中可以调用其他函数D、一个C程序可以包括多个函数2、C语言的基本数据类型包括(A)A、…

长沙理工大学计算机网络试题,长沙理工大学考试试卷(计算机网络)要点.docx

长沙理工大学考试试卷????????????????????????????????????????卷 号1 教研室(或教 ) 名易建 教研室主任 名蔡碧野????????????????????????????????????????程名称(含档次) 算机网 原理与技…

暗黑3 和社群服务器连线中断,进入《暗黑3夺魂之镰》必须知道10件事

《暗黑破坏神3》首部资料片自去年德国科隆游戏展首次亮相之后已经过去两年时间,昨天凌晨2:00新版游戏正式在台湾上线(全球其它地区也在陆续开服中),同时台湾战网也向准备进入资料片的玩家给出了10点注意事项,了解这些将帮助大家更…

哔哩哔哩服务器在哪个文件夹,哔哩哔哩缓存在哪个文件夹 具体操作步骤

我们在手机b站中缓存了视频,如果想要找到源文件,就必须要在手机的内部存储中去寻找,实际上,手机b站缓存的视频隐藏的很深,其查看路径为:文件管理/本地/内部存储/android/data/tv.danmaku.bili/download/“随…

layui表单的ajax联动,layui的select联动实现代码

要实现联动效果注意两点:第一要可以监听到select的change事件;第二异步加载的内容,需要重新渲染后才可以 正常使用。html结构:所在省份:请选择省份${provincelist.fullname}#list>所在城市 :所在区域 &a…

超算和服务器性能,烽火GPU高性能服务器助力武大超算中心建设

近日,继“武汉大学100G高速网络及网格计算集群采购项目”中标后,烽火GPU高性能服务器再次中标“武汉大学GPU集群采购项目”。作为行业首例,此次烽火将在武大超算中心同时提供Intel KNL以及NVIDIA GPU超算解决方案,两种顶尖HPC方案…

ajax成功之后在执行,ajax传入成功后执行后台方法

做一个网站,再页面读取一段文字后,点击按钮,用ajax将文字传回后台,现在我希望ajax返回成功后,执行另外一段后台方法,请问有什么好方法吗?[WebMethod]public static string GetStr(string s){lin…