HTML+CSS页面练习——legend第六部分

第六部分——testimonials

简要介绍：

本部分运用了一个新HTML标签，<blockquote>。

页面效果：

HTML代码：

<section id="testimonials">
        <div class="container">
            <blockquote class="mega">
            <!-- <blockquote> 标签定义摘自另一个源的块引用。 -->
                <div class="row">
                    <div>
                        <p class="cite">John Doe &amp; Sons:</p>
                    </div>
                    <div>
                        <p class="alignright">"We highly appreciate the enthusiasm and creative talent of the people at Legend!"</p>
                    </div>
                </div>
            </blockquote>
        </div>
    </section>

CSS代码：

       #testimonials{
            height: 647px;
            background: url("img/yellow_testimonial.png") repeat-x 0 0;
            padding: 0 50px;
            margin-top: 130px;
            margin-bottom: 20px;
            color: #e4e5e2;
            z-index: 500;
            box-shadow: 1px 1px 16px #c1bac1;
        }
        #testimonials .container{
            display: table-cell;  
            /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
            vertical-align: middle;
            height: 647px;
        }
        #testimonials .alignright{
            font-size: 45px;
            font-family: 'Patua One',cursive;
            font-weight: bold;
            color: #313a1e;
            line-height: 50px;
            text-align: left;
             750px;
            padding: 0;
            margin: 0px;
        }
        #testimonials .cite{
            font-size: 22px;
            color: #313a1e;
            font-family: 'Patua One',cursive;
            line-height: 50px;
            text-align: left;
            font-weight: 500;
            padding: 0;
            margin: 0;
        }

总结：

display:table-cell;    “table-cell”表示元素作为一个表格单元格显示（类似 <td> 和 <th>）。

<blockquote>表示引用。