第三部分——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; }
时间: 2024-08-12 06:31:55