辛星和您一起手写CSS气泡

上文中我公布了一篇手写导航条的博客，那么这一篇博客我将和大家一起手写气泡。那么什么是气泡呢？先给那些刚入门的童鞋一个截图，来更好的认识一下什么是气泡把：

这就是一个简单的气泡啦，那么它主要用来干什么呢？他能够用来当我们点击某段文字的时候再显示出来，当然，这个可能须要用到Javascript的知识，我们先不提了，我们这里先给大家看一下怎样去做一个CSS气泡把。

我们先分析一下思路，它的实现无非就是一个矩形的边框。然后以下是一个三角形，可是这个三角形是一个镂空的，也就是是一个空心三角形，而且它还是一个仅仅有两条边的三角形，那么我们先来看一下怎样去做出来这个三角形，事实上实现这个三角形还是蛮简单的，我先给出代码。然后给出解释：

<html>
<head>
<style type="text/css">#demo{width: 0px;height: 0px;border-width: 75px;border-style:solid;border-color:#F00  transparent transparent; }</style>
</head>
<body>
<div id = "demo"></div>
</body>
</html>

上面这段代码大家去执行的话，发现仅仅有一个红色的倒立的三角形，效果图例如以下：

那么它是怎样实现的呢？首先我们创建了一个div。然后设置其id为demo。然后我们在css中把它的宽度和高度都设置为0，把边框设置为75像素，这一点非常关键。即事实上我们是看不到它的内容的，我们所示仅仅有它的边框。而它的四个边框的颜色都是红色的，可是就可是在，它的下边框和左右边框都是透明的。因此。我们就仅仅能看到上边框了，也就是我们仅仅能看到一个倒立的三角形，看不到整个的矩形区域了，这就是这个三角形的实现原理，假设大想要做出来向右的三角形。能够自己写一写试试奥。

第一步，我们先写一个my.html文件，内容例如以下：

<!DOCTYPE html>
<html lang="zh-cn">
<head><title>辛星手写CSS气泡</title><link rel="stylesheet" type="text/css" href="xing.css">
</head>
<body>
<div class="tag"><div class="arrow"><em></em><span></span></div>辛星CSS手写气泡
</div>
</body>
</html>

第二步，我们新建一个xing.css文件，開始我们的css编辑工作，我们要在em中实现这个三角形，然后用span去镂空它，因此我们的tag来实现文本显示。我们用以下的arrow来实现箭头。我们先写tag的样式：

.tag{ width:300px; height:100px;border:5px solid #09F; position: relative;background-color:#FFF;
}

第三步。我们開始写以下的这个箭头。我们就须要用到em这个标签了，在写之前，有一个问题：那就是它的布局怎么办。这里我们採用绝对布局，关于绝对布局，假设大家不清楚。能够翻翻我前面的教程。里面有解说。

关于怎样实现这个箭头，上面也有解说，假设读者不清楚，能够跟着代码多敲敲，试验几遍，我们加入后的代码例如以下：

.tag{ width:300px; height:100px;border:5px solid #09F; background-color:#FFF;
}
.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;
}

第四步，可能有童鞋会感觉有问题，刷新界面之后这个下拉箭头没有实现，那又是什么原因呢？这就是我们在一个子元素中使用绝对布局的话，假设父元素中没有指定布局模式。那么子元素就会相对于body进行定位，在body的以下40个像素。当然什么都不会看到了。于是我们在tag中变化代码例如以下，即加入它的定位属性，变化后的代码例如以下：

.tag{ width:300px; height:100px;border:5px solid #09F; position: relative;background-color:#FFF;
}
.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;
}

此时，让我们来看一下效果把：

事实上，此时已经能够说是一个气泡了，假设读者要求不高的话。如今已经能够打完收工了。

第五步，进一步的修饰，事实上这个时候就非常easy了，我们以下的span差点儿就是照抄上面的em标签，我们仅仅须要让该元素的向下的箭头是一个白色的三角形就Ok了。因此加入之后的代码例如以下：

.tag{ width:300px; height:100px;border:5px solid #09F; position: relative;background-color:#FFF;
}
.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;
}
.tag span{display:block; border-width:20px;position:absolute; bottom:-33px; left:100px;border-style:solid ; border-color:#FFF transparent transparent;
}

好啦，我们来看一下效果：

好啦。这就完毕了我们的用纯CSS手写气泡的效果，假设大家还有什么问题，能够在以下给我留言，我会认真查看并回复的。谢谢。

转载于:https://www.cnblogs.com/mfrbuaa/p/5162092.html

辛星和您一起手写CSS气泡相关推荐

html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
【湖上日出】从零开始通过拖拉拽可视化的方式制作动态风景，免手写CSS
手把手教你从空白页面开始通过拖拉拽可视化的方式制作一幅美丽的动态风景[湖上日出],整个过程在众触应用平台进行,不用手写一行CSS代码. 最终制成效果图: 澄澈的湖水娴静而又安详,岸边的水草迎着晨风朝你 ...
分享一些手写 CSS 动画的常用思路
前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗. 交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇. 那么如 ...
html编写气泡对话框,纯css手写圆角气泡对话框微信小程序和web都适用
嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...
html+css+气泡,CSS气泡
气泡状文本框,是一种很生动的网页设计手段. 它可以用来表示用户的发言. 也可以用来作为特定信息的提示符. DVD租借网站Netflix,还用它显示碟片的详细信息. ================== ...
纯JS+CSS手写日历
介绍今天带来一个纯JS+css手写的日历, 一开始先显示当前日期,比如下方25日就是当前日期会有较深蓝色背景色,鼠标指着的日期是下方图片14日的淡蓝色背景色上面显示日期,可左右选择上个月或者下个月 ...
2014年度辛星解读css第四节
接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. ************** ...
[css] 手写一个满屏品字布局的方案
[css] 手写一个满屏品字布局的方案 <!DOCTYPE html> <html><head><meta name="viewport" ...
[css] 让你手写一个reset的文件，你应该怎么写？要考虑哪些方面呢？
[css] 让你手写一个reset的文件,你应该怎么写?要考虑哪些方面呢? 肯定首先考虑的是浏览器本身的样式,还有浏览器兼容.margin,padding ==>0ul,ol list styl ...

辛星和您一起手写CSS气泡

辛星和您一起手写CSS气泡相关推荐

最新文章

热门文章