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

这就是一个简单的气泡啦，那么它主要用来干什么呢？他能够用来当我们点击某段文字的时候再显示出来，当然，这个可能须要用到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手写气泡的效果，假设大家还有什么问题，能够在以下给我留言，我会认真查看并回复的。谢谢。

辛星和您一起手写CSS气泡的更多相关文章

  1. 纯css手写圆角气泡对话框 微信小程序和web都适用

    嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...

  2. 手写css按钮组

    css: .lf{float:left} .btn{ width:60px; height:24px; color:#fff; border-radius:4px; cursor:pointer; b ...

  3. 手写CSS+js实现radio单选按钮

    有的时候我们需要用长得漂亮一点的单选按钮,那么,就要抛弃原有的自己来写,下面就是我实现的 <div class="radio"><span class=" ...

  4. 辛星跟您解析在CSS面包屑中三角形的定位问题

    刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的,我当感觉在以下说不清楚,就特别开了一片博客.来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的 ...

  5. 辛星与您使用CSS导航条

    第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  6. 2014年度辛星css教程夏季版第六节

    这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...

  7. 2014年度辛星css教程夏季版第二节

    第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...

  8. 2014年度辛星css教程夏季版第一节

    CSS是Cascading Style Sheets的缩写,即层叠样式表,它用于表现HTML的样式,即HTML只是去写该网页有哪些内容,至于如何去表现它们,由CSS去定制. ************* ...

  9. 2014年最新的辛星html、css教程打包公布了，免积分，纯PDF（还有PHP奥）

    首先说一下,这个教程是我的全部的博客的精华,我整理了两天之后才做出的这个pdf文档,累死我了,以下免积分给大家,希望大家可以不吝指正,提出它的一些不足什么的,谢谢啦: 以下就是它的下载地址了:2014 ...

随机推荐

  1. 基于Bootstrap的步骤引导html页面

    美工设计了一个下一步下一步的引导效果界面,百度谷歌了很久没有找到合适的控件,就想着能不能借助Bootstrap的标签页修改下,实现后的效果如下. 实现思路是先PS三张小图片,作为步骤之间引导的箭头,如 ...

  2. linux系统调用和库函数调用的区别(转)

    Linux下对文件操作有两种方式:系统调用(system call)和库函数调用(Library functions).可以参考<Linux程序设计>(英文原版为<Beginning ...

  3. 在verilog中关于inout口的设计方法

    在学习IIC的时候我们知道这么设计inout inout   scl : reg    scl_reg ,  scl_en ; scl  = scl_en ?   scl_reg : 1'dz ; 当 ...

  4. BZOJ 1742: [Usaco2005 nov]Grazing on the Run 边跑边吃草( dp )

    dp... dp( l , r , k )  , 表示 吃了[ l , r ] 的草 , k = 1 表示最后在 r 处 , k = 0 表示最后在 l 处 . ------------------- ...

  5. 《算法导论》读书笔记之动态规划—最长公共子序列 & 最长公共子串（LCS）

    From:http://my.oschina.net/leejun2005/blog/117167 1.先科普下最长公共子序列 & 最长公共子串的区别: 找两个字符串的最长公共子串,这个子串要 ...

  6. XCode 快速注释插件

    下载VVDocumenter-Xcode这个插件 打开编译后,重启Xcode 输入///,如效果图,Window->VVDocumenter自己定制风格

  7. Chapter 11 迪米特法则

    迪米特法则也叫最少知识原则:如果两个类不必彼此直接通信,那么这两个类就不应当发生直接的相互作用.如果其中一个类需要调用另一个类的某一个方法的话,可以通过第三者转发这个调用. 迪米特法则首先强调的前提是 ...

  8. Visual Studio 2015编译安装配置QT5.5.1(含QTWEBKIT)

    尽管QT5.5.1和VisualStudio 2015都已经发布很久了,但是QT项目组视乎不会为QT5.5.1专门发布预编译的QT5.5.1 for windows(2015)版本的,也不会专门发布V ...

  9. redis(一)简介

    啥也不说百度各种简介 推荐一个博客灰常详细的介绍  nosqlfan  接下来发布redis+USE_TCMALLOC 的安装配置,博客好多坑,找一篇好文真心难啊.  redis+keepalived ...

  10. php 父类子类构造函数注意事项

    网上流传的2点: PHP的构造函数继承必须满足以下条件: 当父类有构造函数的声明时,子类也必须有声明,否则会出错. 在执行父类的构造函数时,必须在子类中引用parent关键字. 第1点不需要. 第二个 ...