用CSS代码设计三个竖直方向的小图标
1、案例思考：我们要在网页上面设计三个动感的图标，这三个图标是竖起方向的，那么我们在代码当中就要给出图标的位置与大小的样式，还要定义一下这些图形的地址，最后在图标上面还有一个文字的定义。
2、绿色小图标的定义。我们给出了排列方式的定义，我们给出了文字的宽、高、字体、颜色，展现方式，背景图片，文字内容等等。
<section style="text-align:left;">
<section style="width:4em;
height:4em;
color:white;
font-size:2em;
line-height:4em;
display:inline-block;
text-align:center;
background-image:url(***.gif);
background-repeat:no-repeat;
background-size:100%;
background-position:0;
margin:0 auto;">
<p style="margin:0">
1
</section>
3、我们再给出灰色小图标的定义。文字的样式与图片的样式也是一并定义出来。
</section>
<section style="text-align:left;">
<section style="width:4em;
height:4em;
color:white;
font-size:2em;
line-height:4em;
display:inline-block;
text-align:center;
background-image:url(http://style.ipaiban.com/stylenew/viptemplet/lin_014c.gif);
background-repeat:no-repeat;
background-size:100%;
background-position:0;
margin:0 auto;">
<p style="margin:0">
2
</section>
4、我们再给出蓝色小图标的定义，也是同样的文字样式与图片的定义。
</section>
<section style="text-align:left;">
<section style="width:4em;
height:4em;
color:white;
font-size:2em;
line-height:4em;
display:inline-block;
text-align:center;
background-image:url(http://style.ipaiban.com/stylenew/viptemplet/lin_014d.gif);
background-repeat:no-repeat;
background-size:100%;
background-position:0;
margin:0 auto;">
<p style="margin:0"虚哄>
3
泪霸
</section>
5、所有的炼败秤定义完成之后，再检查一个所有的CSS代码，接着运行一下程序看看这个效果。这个竖直三图标的效果就做出来了。
6、我们也可以调整代码从而让图标的位置与内容发生变化。
