CSS入门案例（5）：垂直手风琴

	<div class="box">
        <div class="bb" id="b1">
            <a href="#b1">标题</a>
            <span></span>
            <p> 
                块级元素<br>
                设置display:block就是将元素显示为块级元素
                常用的块状元素有：
                &lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;address&gt;、&lt;blockquote&gt; 、&lt;form&gt;
                特点:
                独占一行
                高度，行高、外边距以及内边距都可以控制
                宽度默认是容器的100%
                以容纳内联元素和其他块元素<br>
                块级元素<br>
                设置display:block就是将元素显示为块级元素
                常用的块状元素有：
                &lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;address&gt;、&lt;blockquote&gt; 、&lt;form&gt;
                特点:
                独占一行
                高度，行高、外边距以及内边距都可以控制
                宽度默认是容器的100%
                以容纳内联元素和其他块元素<br>
            </p>
        </div>
        <div class="bb" id="b2">
            <a href="#b2">标题</a>
            <span></span>
            <p> 
                块级元素<br>
                设置display:block就是将元素显示为块级元素
                常用的块状元素有：
                &lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;address&gt;、&lt;blockquote&gt; 、&lt;form&gt;
                特点:
                独占一行
                高度，行高、外边距以及内边距都可以控制
                宽度默认是容器的100%
                以容纳内联元素和其他块元素<br>
                块级元素<br>
                设置display:block就是将元素显示为块级元素
                常用的块状元素有：
                &lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;address&gt;、&lt;blockquote&gt; 、&lt;form&gt;
                特点:
                独占一行
                高度，行高、外边距以及内边距都可以控制
                宽度默认是容器的100%
                以容纳内联元素和其他块元素<br>
            </p>
        </div>
        <div class="bb" id="b3">
            <a href="#b3">标题</a>
            <span></span>
            <p> 
                块级元素<br>
                设置display:block就是将元素显示为块级元素
                常用的块状元素有：
                &lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;address&gt;、&lt;blockquote&gt; 、&lt;form&gt;
                特点:
                独占一行
                高度，行高、外边距以及内边距都可以控制
                宽度默认是容器的100%
                以容纳内联元素和其他块元素<br>
                块级元素<br>
                设置display:block就是将元素显示为块级元素
                常用的块状元素有：
                &lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;address&gt;、&lt;blockquote&gt; 、&lt;form&gt;
                特点:
                独占一行
                高度，行高、外边距以及内边距都可以控制
                宽度默认是容器的100%
                以容纳内联元素和其他块元素<br>
            </p>
        </div>
    </div>

		*{margin: 0;padding: 0;}
        .box{
            height: 500px;width: 600px;
            margin: 30px auto;
        }
        .box .bb a{
            display: block;
            height: 50px;width: 500px;
            background: linear-gradient(#cecece,#8f8f8f);
            margin: 5px auto;
            border-radius: 5px;
            line-height: 50px;
            padding-left: 12px;
            text-decoration: none;
            color: #424242;
        }
        .box .bb{
            position: relative;
        }
        .box .bb p{
            height: 0px;width: 500px;
            padding-left: 50px;
            overflow: auto;
            transition: 0.5s linear;
        }
        .box .bb span{
            width: 0;height: 0;
            border-left: 5px white solid;
            border-top: 5px transparent solid;
            border-bottom: 5px transparent solid ;
            border-right: 5px transparent solid ;
            position: absolute;
            top: 20px;right: 60px;
        }
        .box .bb:target p{height: 100px;}
        .box .bb a:hover{background: linear-gradient(#6bb2ff,#2288dd);color: #fff;}
        .box .bb:target span{border-top: 5px white solid;border-left: 5px transparent solid;right: 65px;}