辛星和您一起手写CSS气泡-阿里云开发者社区

开发者社区> 开发与运维> 正文

辛星和您一起手写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手写气泡的效果,假设大家还有什么问题,能够在以下给我留言,我会认真查看并回复的。谢谢。





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5162092.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章