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

第三部分——feature

简要介绍：

这部分比较简单。主要用<p>元素写了两句话。用一张图片设置背景。

页面效果：

HTML代码：

    <div >
        <section id="feature">
           <article>
            <p>We work to make web a beautiful place.</p>
            <p>We craft beautiful designs and convert them into</p>
            <p>fully functional and user-friendy web app.</p>
           </article>
        </section>
    </div>

CSS代码：

       #feature {
            background: url(img/yellow.png) repeat-x 0 0 ;
            /*背景是一张照片，在（0,0）处放置，在X轴重复*/
            height: 406px;
            z-index: 500;      /*Z轴方向上的堆叠顺序，值越大，就显示在上面*/
            margin: 0;
            padding: 0;
            box-shadow: 0 5px 16px rgba(0,0,0,0.3);
        }
        #feature  article{
               padding-top:85px;
        }
        #feature p{
            font-family:'Patua One',cursive;
            font-size:40px;
            text-align:center;
            margin-bottom:0;
            line-height:0.6em;  /*两行文字之间的间距*/
            color:#fff;
        }